@use "@styles/abstracts/mixins" as mix;
@use "@styles/abstracts/placeholders";

.wrapper {
  @extend %reset-list;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-sm);
  max-width: 100%;
  margin: var(--spacing-sm) 0;

  @for $i from 0 to 6 {
    &--#{$i}-columns {
      @include mix.media("screen") {
        @include mix.dimensions("xs") {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @include mix.dimensions("sm") {
          grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
        }
      }
    }
  }
}