.grid {

margin: auto;
width: grid-base-width() * 96;

display: flex;
flex-wrap: wrap;
align-items: baseline;

@for $col_size from 1 through 12 {
  .grid-col-#{ $col_size } {
    padding: 0 grid-base-width();
    width: grid-base-width() * 8 * $col_size;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  @for $off_size from 1 through 12-$col_size {
    .grid-col-#{ $col_size }-off-#{ $off_size } {
      @extend .grid-col-#{ $col_size };
      margin-left: grid-base-width() * (8 * $off_size + 1);
    }
  }
}

}