.grid {
  display: grid;
  grid-gap: spacing(-1) spacing(-1);

  //fallback for browsers not supporting min()
  //https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/
  grid-template-columns: repeat(auto-fill, minmax(spacing(0, $times: -2, $add: "17.5rem + 10%"), 1fr));
  //browsers supporting min()
  grid-template-columns: repeat(auto-fill, minmax(#{"min(20rem, 100%)"}, 1fr));


  &__item {
    @include content-container;
  }

  &--vertical-margin {
    margin-top: spacing(0);
    margin-bottom: spacing(0);
  }

  @for $i from 5 through 40 {
    &--item-min-width-#{$i * 2} {
      //browsers not supporting min()
      $min-width: #{$i * 2%} + 4%;
      $min-width: "#{$min-width} + 17.5rem";
      grid-template-columns: repeat(auto-fit, minmax(spacing(0, $times: -2, $add: $min-width), 1fr));

      //browsers supporting min()
      grid-template-columns: repeat(auto-fit, minmax(#{"min(" + $i * 2rem + ", 100%)"}, 1fr));
    }
  }
}