<section class="horizontal-snap">
  
  <a href="https://www.tenhundredart.com/"><picture>
    <source type="image/webp" srcset="https://intrinsic-layout-guide.glitch.me/img/tees/Defenders-of-the-moon-tee.webp 1x">
    <img src="https://intrinsic-layout-guide.glitch.me/img/tees/Defenders-of-the-moon-tee.jpg" loading="lazy">
  </picture></a>
  
  <a href="https://www.tenhundredart.com/"><picture>
    <source type="image/webp" srcset="https://intrinsic-layout-guide.glitch.me/img/tees/Statix-Boy-Black-Tee.webp 1x">
    <img src="https://intrinsic-layout-guide.glitch.me/img/tees/Statix-Boy-Black-Tee.jpg" loading="lazy">
  </picture></a>
  
  <a href="https://www.tenhundredart.com/"><picture>
    <source type="image/webp" srcset="https://intrinsic-layout-guide.glitch.me/img/tees/Discover-Paradise-Vintage-Black-Scoop.webp 1x">
    <img src="https://intrinsic-layout-guide.glitch.me/img/tees/Discover-Paradise-Vintage-Black-Scoop.jpg" loading="lazy">
  </picture></a>
  
  <a href="https://www.tenhundredart.com/"><picture>
    <source type="image/webp" srcset="https://intrinsic-layout-guide.glitch.me/img/tees/The-Archer-Tee-BLACK.webp 1x">
    <img src="https://intrinsic-layout-guide.glitch.me/img/tees/The-Archer-Tee-BLACK.jpg" loading="lazy">
  </picture></a>
  
  <a href="https://www.tenhundredart.com/"><picture>
    <source type="image/webp" srcset="https://intrinsic-layout-guide.glitch.me/img/tees/Strange-World-Black-Tee.webp 1x">
    <img src="https://intrinsic-layout-guide.glitch.me/img/tees/Strange-World-Black-Tee.jpg" loading="lazy">
  </picture></a>
  
  <a href="https://www.tenhundredart.com/"><picture>
    <source type="image/webp" srcset="https://intrinsic-layout-guide.glitch.me/img/tees/Alchemist-Returns-Tee-BLACK.webp 1x">
    <img src="https://intrinsic-layout-guide.glitch.me/img/tees/Alchemist-Returns-Tee-BLACK.jpg" loading="lazy">
  </picture></a>
  
  <a href="https://www.tenhundredart.com/"><picture>
    <source type="image/webp" srcset="https://intrinsic-layout-guide.glitch.me/img/tees/Shred-Seattle-Tee.webp 1x">
    <img src="https://intrinsic-layout-guide.glitch.me/img/tees/Shred-Seattle-Tee.jpg" loading="lazy">
  </picture></a>
  
</section>

@use postcss-preset-env {
  stage: 0;
  browsers: last 2 versions
}

.horizontal-snap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  
  & > a {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  
  & img {
    width: 100vw;
    object-fit: contain;
  }
}

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
}