src/components/organisms/images/gallery.module.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

@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));
        }
      }
    }
  }
}