@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, 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--uneven">
    <figure class="gallery-item gallery-item--1">
        <a href="#">
            <img src="https://ui.sprucecss.com/img/post/gallery/benjamin-voros-phIFdC6lA4E-unsplash.jpg" alt="snow mountain under stars" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--2">
        <a href="#">
            <img src="https://ui.sprucecss.com/img/post/gallery/boris-baldinger-eUFfY6cwjSU-unsplash.jpg" alt="aerial view of mountain" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--3">
        <a href="#">
            <img src="https://ui.sprucecss.com/img/post/gallery/fabrice-villard-QrRSm-QbjW0-unsplash.jpg" alt="mountain coated with snow" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--4">
        <a href="#">
            <img src="https://ui.sprucecss.com/img/post/gallery/guillaume-briard-lSXpV8bDeMA-unsplash.jpg" alt="closeup photo of rocky mountain under blue and white sky" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--5">
        <a href="#">
            <img src="https://ui.sprucecss.com/img/post/gallery/kyle-johnson-Aq7id0ZjEW4-unsplash.jpg" alt="man standing on grass field overlooking mountain" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--6">
        <a href="#">
            <img src="https://ui.sprucecss.com/img/post/gallery/lucas-clara-hvPB-UCAmmU-unsplash.jpg" alt="man with red backpack standing on cliff facing mountains under white sky during daytime" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--7">
        <a href="#">
            <img src="https://ui.sprucecss.com/img/post/gallery/marco-pregnolato-ahYX46whD8s-unsplash.jpg" alt="snow covered mountain under blue sky during daytime" lazyload>
        </a>
    </figure>
    <figure class="gallery-item gallery-item--8">
        <a href="#">
            <img src="https://ui.sprucecss.com/img/post/gallery/pietro-de-grandi-T7K4aEPoGGk-unsplash.jpg" alt="three brown wooden boat on blue lake water taken at daytime" lazyload>
        </a>
    </figure>
</div>