.l-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, $card-grid-min-width), 1fr)
  );
  gap: $card-grid-gap;

  &--2 {
    grid-template-columns: repeat(2, 1fr);
    .c-icon-card {
      min-height: 300px;
    }
  }

  &--3 {
    @include bp(lg) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  &--4 {
    @include bp(lg) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  &--gap-s {
    gap: sp(4);
  }
  &--gap-l {
    gap: sp(8);
  }
  &--gap-xl {
    gap: sp(12);
  }
}