.grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: -#{$grid-gap} 0 0 -#{$grid-gap};
  padding: 0;

  &__cell {
    margin: #{$grid-gap} 0 0 #{$grid-gap};
    width: 100%;
    max-width: 100%;
  }

  @for $i from 1 through $grid-cols {
    [class~="#{$i}of#{$grid-cols}"] {
      max-width: calc(#{percentage($i / $grid-cols)} - #{$grid-gap});
    }
  }

  @each $breakpoint, $value in $grid-breakpoints {
    @media (min-width: #{$value + 1px}) {

      // GRID CELL UTIL CLASSES
      @for $i from 1 through $grid-cols {
        [class~="#{$i}of#{$grid-cols}\@#{$breakpoint}"] {
          max-width: calc(#{percentage($i / $grid-cols)} - #{$grid-gap});
        }
      }
    }
  }

  &--half-gap {
    margin: -#{$grid-gap / 2} 0 0 -#{$grid-gap / 2};

    @for $i from 1 through $grid-cols {
      [class~="#{$i}of#{$grid-cols}"] {
        max-width: calc(#{percentage($i / $grid-cols)} - #{$grid-gap / 2});
      }
    }

    @each $breakpoint, $value in $grid-breakpoints {
      @media (min-width: #{$value + 1px}) {

        // GRID CELL UTIL CLASSES
        @for $i from 1 through $grid-cols {
          [class~="#{$i}of#{$grid-cols}\@#{$breakpoint}"] {
            max-width: calc(#{percentage($i / $grid-cols)} - #{$grid-gap / 2});
          }
        }
      }
    }
  }

  &--half-gap &__cell {
      margin: #{$grid-gap / 2} 0 0 #{$grid-gap / 2};
  }

  @media (max-width: map-get($grid-breakpoints, sm)) {
    margin: -#{$grid-gap / 2} 0 0 -#{$grid-gap / 2};

    &__cell {
      margin: #{$grid-gap / 2} 0 0 #{$grid-gap / 2};
    }

    @for $i from 1 through $grid-cols {
      [class~="#{$i}of#{$grid-cols}"] {
        max-width: calc(#{percentage($i / $grid-cols)} - #{$grid-gap / 2});
      }
    }

    @each $breakpoint, $value in $grid-breakpoints {
      @media (min-width: #{$value + 1px}) {

        // GRID CELL UTIL CLASSES
        @for $i from 1 through $grid-cols {
          [class~="#{$i}of#{$grid-cols}\@#{$breakpoint}"] {
            max-width: calc(#{percentage($i / $grid-cols)} - #{$grid-gap / 2});
          }
        }
      }
    }
  }
}
