.col {
  display: block;
  width: 100%;
  max-width: 100%;
  flex: 1 1 0;
  padding-block: $space;

  @include min-width($breakpoint-xs) {
    padding-inline: $space;

    &.col-10 {
      max-width: 10%;
      flex: 0 0 10%;
    }

    &.col-16 {
      max-width: 16.66666666%;
      flex: 0 0 16.66666666%;
    }

    &.col-20 {
      max-width: 20%;
      flex: 0 0 20%;
    }

    &.col-25 {
      max-width: 25%;
      flex: 0 0 25%;
    }

    &.col-30 {
      max-width: 30%;
      flex: 0 0 30%;
    }

    &.col-33 {
      max-width: 33.33333333%;
      flex: 0 0 33.33333333%;
    }

    &.col-40 {
      max-width: 40%;
      flex: 0 0 40%;
    }

    &.col-50 {
      max-width: 50%;
      flex: 0 0 50%;
    }

    &.col-60 {
      max-width: 60%;
      flex: 0 0 60%;
    }

    &.col-67 {
      max-width: 66.66666666%;
      flex: 0 0 66.66666666%;
    }

    &.col-70 {
      max-width: 70%;
      flex: 0 0 70%;
    }

    &.col-75 {
      max-width: 75%;
      flex: 0 0 75%;
    }

    &.col-80 {
      max-width: 80%;
      flex: 0 0 80%;
    }

    &.col-84 {
      max-width: 83.33333333%;
      flex: 0 0 83.33333333%;
    }

    &.col-90 {
      max-width: 90%;
      flex: 0 0 90%;
    }

    //offsets
    &.col-span-10 {
      margin-left: 10%;
    }

    &.col-span-16 {
      margin-left: 16.66666666%;
    }

    &.col-span-20 {
      margin-left: 20%;
    }

    &.col-span-25 {
      margin-left: 25%;
    }

    &.col-span-30 {
      margin-left: 30%;
    }

    &.col-span-33 {
      margin-left: 33.33333333%;
    }

    &.col-span-40 {
      margin-left: 40%;
    }

    &.col-span-50 {
      margin-left: 50%;
    }

    &.col-span-60 {
      margin-left: 60%;
    }

    &.col-span-67 {
      margin-left: 66.66666666%;
    }

    &.col-span-70 {
      margin-left: 70%;
    }

    &.col-span-75 {
      margin-left: 75%;
    }

    &.col-span-80 {
      margin-left: 80%;
    }

    &.col-span-84 {
      margin-left: 83.33333333%;
    }

    &.col-span-90 {
      margin-left: 90%;
    }
  }
}

.gra-row.gra-row-mobile {
  .gra-col {
    padding-inline: $space;

    &.col-10 {
      max-width: 10%;
      flex: 0 0 10%;
    }

    &.col-16 {
      max-width: 16.66666666%;
      flex: 0 0 16.66666666%;
    }

    &.col-20 {
      max-width: 20%;
      flex: 0 0 20%;
    }

    &.col-25 {
      max-width: 25%;
      flex: 0 0 25%;
    }

    &.col-30 {
      max-width: 30%;
      flex: 0 0 30%;
    }

    &.col-33 {
      max-width: 33.33333333%;
      flex: 0 0 33.33333333%;
    }

    &.col-40 {
      max-width: 40%;
      flex: 0 0 40%;
    }

    &.col-50 {
      max-width: 50%;
      flex: 0 0 50%;
    }

    &.col-60 {
      max-width: 60%;
      flex: 0 0 60%;
    }

    &.col-67 {
      max-width: 66.66666666%;
      flex: 0 0 66.66666666%;
    }

    &.col-70 {
      max-width: 70%;
      flex: 0 0 70%;
    }

    &.col-75 {
      max-width: 75%;
      flex: 0 0 75%;
    }

    &.col-80 {
      max-width: 80%;
      flex: 0 0 80%;
    }

    &.col-84 {
      max-width: 83.33333333%;
      flex: 0 0 83.33333333%;
    }

    &.col-90 {
      max-width: 90%;
      flex: 0 0 90%;
    }

    //offsets
    &.col-span-10 {
      margin-left: 10%;
    }

    &.col-span-16 {
      margin-left: 16.66666666%;
    }

    &.col-span-20 {
      margin-left: 20%;
    }

    &.col-span-25 {
      margin-left: 25%;
    }

    &.col-span-30 {
      margin-left: 30%;
    }

    &.col-span-33 {
      margin-left: 33.33333333%;
    }

    &.col-span-40 {
      margin-left: 40%;
    }

    &.col-span-50 {
      margin-left: 50%;
    }

    &.col-span-60 {
      margin-left: 60%;
    }

    &.col-span-67 {
      margin-left: 66.66666666%;
    }

    &.col-span-70 {
      margin-left: 70%;
    }

    &.col-span-75 {
      margin-left: 75%;
    }

    &.col-span-80 {
      margin-left: 80%;
    }

    &.col-span-84 {
      margin-left: 83.33333333%;
    }

    &.col-span-90 {
      margin-left: 90%;
    }
  }
}