grid.css

.container {
  margin-left: calc(var(--medium-half-gutter) * -1);
  margin-right: calc(var(--medium-half-gutter) * -1);

  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.col {
  float: left;
  padding-left: var(--medium-half-gutter);
  padding-right: var(--medium-half-gutter);
}

.flex {
  display: flex;
}

.hideSmallOnly {
  display: none;

  @media (--m-breakpoint) {
    display: block;

    &.flex {
      display: flex;
    }
  }
}

.small- {
  &1 {
    width: calc(var(--full-width) * 1 / var(--total-columns));
  }

  &2 {
    width: calc(var(--full-width) * 2 / var(--total-columns));
  }

  &3 {
    width: calc(var(--full-width) * 3 / var(--total-columns));
  }

  &4 {
    width: calc(var(--full-width) * 4 / var(--total-columns));
  }

  &5 {
    width: calc(var(--full-width) * 5 / var(--total-columns));
  }

  &6 {
    width: calc(var(--full-width) * 6 / var(--total-columns));
  }

  &7 {
    width: calc(var(--full-width) * 7 / var(--total-columns));
  }

  &8 {
    width: calc(var(--full-width) * 8 / var(--total-columns));
  }

  &9 {
    width: calc(var(--full-width) * 9 / var(--total-columns));
  }

  &10 {
    width: calc(var(--full-width) * 10 / var(--total-columns));
  }

  &11 {
    width: calc(var(--full-width) * 11 / var(--total-columns));
  }

  &12 {
    width: var(--full-width);
  }
}

@media (--s-breakpoint) {
  .medium- {
    &1 {
      width: calc(var(--full-width) * 1 / var(--total-columns));
    }

    &2 {
      width: calc(var(--full-width) * 2 / var(--total-columns));
    }

    &3 {
      width: calc(var(--full-width) * 3 / var(--total-columns));
    }

    &4 {
      width: calc(var(--full-width) * 4 / var(--total-columns));
    }

    &5 {
      width: calc(var(--full-width) * 5 / var(--total-columns));
    }

    &6 {
      width: calc(var(--full-width) * 6 / var(--total-columns));
    }

    &7 {
      width: calc(var(--full-width) * 7 / var(--total-columns));
    }

    &8 {
      width: calc(var(--full-width) * 8 / var(--total-columns));
    }

    &9 {
      width: calc(var(--full-width) * 9 / var(--total-columns));
    }

    &10 {
      width: calc(var(--full-width) * 10 / var(--total-columns));
    }

    &11 {
      width: calc(var(--full-width) * 11 / var(--total-columns));
    }

    &12 {
      width: var(--full-width);
    }
  }
}

@media (--m-breakpoint) {
  .container {
    margin-left: calc(var(--large-half-gutter) * -1);
    margin-right: calc(var(--large-half-gutter) * -1);
  }

  .col {
    padding-left: var(--large-half-gutter);
    padding-right: var(--large-half-gutter);
  }

  .large- {
    &1 {
      width: calc(var(--full-width) * 1 / var(--total-columns));
    }

    &2 {
      width: calc(var(--full-width) * 2 / var(--total-columns));
    }

    &3 {
      width: calc(var(--full-width) * 3 / var(--total-columns));
    }

    &4 {
      width: calc(var(--full-width) * 4 / var(--total-columns));
    }

    &5 {
      width: calc(var(--full-width) * 5 / var(--total-columns));
    }

    &6 {
      width: calc(var(--full-width) * 6 / var(--total-columns));
    }

    &7 {
      width: calc(var(--full-width) * 7 / var(--total-columns));
    }

    &8 {
      width: calc(var(--full-width) * 8 / var(--total-columns));
    }

    &9 {
      width: calc(var(--full-width) * 9 / var(--total-columns));
    }

    &10 {
      width: calc(var(--full-width) * 10 / var(--total-columns));
    }

    &11 {
      width: calc(var(--full-width) * 11 / var(--total-columns));
    }

    &12 {
      width: var(--full-width);
    }
  }
}