Image Tiles Marquee

<!--
  Gradient tiles stand in for photos - no external images. Each tile fixes its
  own aspect via h-28 w-40 so the track width is stable and the loop stays
  smooth. Swap the gradient div for an <img> with the same box when you have art.
-->
<style>
  @keyframes marquee-tiles-scroll {
    to { transform: translateX(-50%); }
  }
</style>

<section class="w-full overflow-hidden py-6" aria-label="Recent shots">
  <div class="flex w-max animate-[marquee-tiles-scroll_36s_linear_infinite] motion-reduce:w-full motion-reduce:animate-none">
    <ul class="flex shrink-0 items-center gap-4 pr-4 motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-4 motion-reduce:pr-0">
      <li class="relative h-28 w-40 shrink-0 overflow-hidden rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600"><span class="absolute bottom-2 left-3 text-xs font-semibold text-white">Ridgeline</span></li>
      <li class="relative h-28 w-40 shrink-0 overflow-hidden rounded-xl bg-gradient-to-br from-rose-500 to-orange-500"><span class="absolute bottom-2 left-3 text-xs font-semibold text-white">Harbor</span></li>
      <li class="relative h-28 w-40 shrink-0 overflow-hidden rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600"><span class="absolute bottom-2 left-3 text-xs font-semibold text-white">Canopy</span></li>
      <li class="relative h-28 w-40 shrink-0 overflow-hidden rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-600"><span class="absolute bottom-2 left-3 text-xs font-semibold text-white">Dusk</span></li>
    </ul>
    <ul class="flex shrink-0 items-center gap-4 pr-4 motion-reduce:hidden" aria-hidden="true">
      <li class="relative h-28 w-40 shrink-0 overflow-hidden rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600"><span class="absolute bottom-2 left-3 text-xs font-semibold text-white">Ridgeline</span></li>
      <li class="relative h-28 w-40 shrink-0 overflow-hidden rounded-xl bg-gradient-to-br from-rose-500 to-orange-500"><span class="absolute bottom-2 left-3 text-xs font-semibold text-white">Harbor</span></li>
      <li class="relative h-28 w-40 shrink-0 overflow-hidden rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600"><span class="absolute bottom-2 left-3 text-xs font-semibold text-white">Canopy</span></li>
      <li class="relative h-28 w-40 shrink-0 overflow-hidden rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-600"><span class="absolute bottom-2 left-3 text-xs font-semibold text-white">Dusk</span></li>
    </ul>
  </div>
</section>