Polaroid Gallery

<!--
  Snapshot cards on a white print frame, tilted alternately with odd/even
  rotation. Each is a button so the straighten-on-hover also fires on
  focus-visible; motion-reduce cancels the tilt entirely. The white frame is
  intentional in both themes - a photo print is not a UI surface.
-->
<ul class="grid w-full list-none grid-cols-2 gap-4 p-0 sm:grid-cols-3 lg:grid-cols-4">
  <li>
    <button type="button" class="group block w-full -rotate-2 rounded-sm bg-white p-2 pb-1 shadow-md transition-transform hover:rotate-0 focus-visible:rotate-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none motion-reduce:rotate-0">
      <span class="block aspect-square w-full bg-gradient-to-br from-sky-400 to-indigo-600" role="img" aria-label="Sky-blue to indigo gradient"></span>
      <span class="mt-2 block text-center text-sm font-medium text-gray-800">Coastline</span>
    </button>
  </li>
  <li>
    <button type="button" class="group block w-full rotate-2 rounded-sm bg-white p-2 pb-1 shadow-md transition-transform hover:rotate-0 focus-visible:rotate-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none motion-reduce:rotate-0">
      <span class="block aspect-square w-full bg-gradient-to-br from-rose-400 to-orange-500" role="img" aria-label="Rose to orange gradient"></span>
      <span class="mt-2 block text-center text-sm font-medium text-gray-800">Canyon</span>
    </button>
  </li>
  <li>
    <button type="button" class="group block w-full -rotate-2 rounded-sm bg-white p-2 pb-1 shadow-md transition-transform hover:rotate-0 focus-visible:rotate-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none motion-reduce:rotate-0">
      <span class="block aspect-square w-full bg-gradient-to-br from-emerald-400 to-teal-600" role="img" aria-label="Emerald to teal gradient"></span>
      <span class="mt-2 block text-center text-sm font-medium text-gray-800">Forest</span>
    </button>
  </li>
  <li>
    <button type="button" class="group block w-full rotate-2 rounded-sm bg-white p-2 pb-1 shadow-md transition-transform hover:rotate-0 focus-visible:rotate-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none motion-reduce:rotate-0">
      <span class="block aspect-square w-full bg-gradient-to-br from-violet-400 to-fuchsia-600" role="img" aria-label="Violet to fuchsia gradient"></span>
      <span class="mt-2 block text-center text-sm font-medium text-gray-800">Dusk</span>
    </button>
  </li>
</ul>