<ul>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&1" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&2" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&3" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&4" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&5" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&6" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&7" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&8" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&9" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&10" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&11" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&12" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&13" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&14" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&15" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&16" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&17" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&18" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&19" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&20" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&21" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&22" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&23" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&24" alt=""></li>
  <li><img src="https://source.unsplash.com/random/300x300/?fruit&25" alt=""></li>
</ul>

/* SDA Demo */

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  img {
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 25%;
  }
}

/* ETC */


img {
  width: 100%;
  max-width: 300px;
  border-radius: 1rem;
}

li {
  list-style: none;
}

li:nth-child(even) {
  margin-top: 8rem;
}

li:nth-child(odd):not(:first-child) {
  margin-top: -4rem;
}

ul {
  padding: 0;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 1rem;
  justify-content: center;
}

/* background colors if images don't show up */

img {
  background-color: lightblue;
}

img:nth-child(2) {
  background-color: yellow;
}

// Browser support: Chrome 115+, Firefox behind a flag, as of April 3, 2024