.row {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 calc(var(--gap, #{$grid-width}) * -1);
}

.col {
  box-sizing: border-box;
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
  padding: 0 var(--gap, #{$grid-width});
}

@for $i from 1 through $grid-columns {
  .col-#{$i} {
    flex-basis: 100% / $grid-columns * $i;
    max-width: 100% / $grid-columns * $i;
  }

  .col-offset-#{$i} {
    margin-left: 100% / $grid-columns * $i;
  }
}