@use 'sprucecss/scss/spruce' as *;

.gallery {
  $this: &;

  img {
    border-radius: config('border-radius-sm', $display);
    object-fit: cover;
  }

  &-item {
    margin-block: 0;
  }

  &--even {
    @include layout-grid('m', 15rem);

    img {
      aspect-ratio: 1;
    }
  }

  &--uneven {
    display: grid;
    grid-auto-rows: min-content;
    grid-gap: spacer-clamp('s', 'm');
    grid-template-columns: repeat(6, minmax(0, 1fr));

    #{$this}-item--1 {
      grid-column: 1 / span 3;
      grid-row: 1 / span 1;
    }

    #{$this}-item--2 {
      grid-column: 4 / span 3;
      grid-row: 1 / span 1;
    }

    #{$this}-item--3 {
      grid-column: 1 / span 2;
      grid-row: 2 / span 1;
    }

    #{$this}-item--4 {
      grid-column: 3 / span 2;
      grid-row: 2 / span 1;
    }

    #{$this}-item--5 {
      grid-column: 5 / span 2;
      grid-row: 2 / span 1;
    }

    #{$this}-item--6 {
      grid-column: 1 / span 3;
      grid-row: 3 / span 1;

      img {
        aspect-ratio: 3 / 1.5;
      }
    }

    #{$this}-item--7 {
      grid-column: 1 / span 3;
      grid-row: 4 / span 1;

      img {
        aspect-ratio: 3 / 1.5;
      }
    }

    #{$this}-item--8 {
      grid-column: 4 / span 3;
      grid-row: 3 / span 2;

      img {
        aspect-ratio: auto;
      }
    }

    img {
      aspect-ratio: 3 / 2;
      block-size: 100%;
      inline-size: 100%;
    }
  }
}

<div class="gallery gallery--even">
    <figure class="gallery-item">
        <a href="#">
            <img src="/img/blog/4-areas-where-modern-css-solves-a-lot.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item">
        <a href="#">
            <img src="/img/blog/8-helpful-sass-mixins-and-functions.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item">
        <a href="#">
            <img src="/img/blog/about-modern-sass.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item">
        <a href="#">
            <img src="/img/blog/cracking-the-theme-switcher-and-dark-mode.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item">
        <a href="#">
            <img src="/img/blog/how-to-choose-a-css-framework.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item">
        <a href="#">
            <img src="/img/blog/introduction-of-spruce-ui.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item">
        <a href="#">
            <img src="/img/blog/the-simplest-sass-compile-setup.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item">
        <a href="#">
            <img src="/img/blog/writing-better-css.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item">
        <a href="#">
            <img src="/img/blog/why-use-sass.png" alt="" lazyload>
        </a>
    </figure>
</div>
<div class="gallery gallery--uneven">
    <figure class="gallery-item gallery-item--1">
        <a href="#">
            <img src="/img/blog/4-areas-where-modern-css-solves-a-lot.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--2">
        <a href="#">
            <img src="/img/blog/8-helpful-sass-mixins-and-functions.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--3">
        <a href="#">
            <img src="/img/blog/about-modern-sass.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--4">
        <a href="#">
            <img src="/img/blog/cracking-the-theme-switcher-and-dark-mode.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--5">
        <a href="#">
            <img src="/img/blog/how-to-choose-a-css-framework.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--6">
        <a href="#">
            <img src="/img/blog/introduction-of-spruce-ui.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--7">
        <a href="#">
            <img src="/img/blog/the-simplest-sass-compile-setup.png" alt="" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--8">
        <a href="#">
            <img src="/img/blog/writing-better-css.png" alt="" lazyload>
        </a>
    </figure>
</div>