Video Thumbnails Gallery

<!--
  A video wall mock: the play glyph is a pure-CSS triangle (a bordered zero-size
  box), not an asset or a real <video>, and the duration is a tabular-nums
  badge. The play button scales on group-hover and group-focus-visible alike;
  motion-reduce holds it still. Each card's accessible name says "Play <title>".
-->
<ul class="grid w-full list-none grid-cols-2 gap-3 p-0 sm:grid-cols-3 lg:grid-cols-4">
  <li>
    <button type="button" class="group relative block w-full overflow-hidden rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
      <span class="block aspect-video w-full bg-gradient-to-br from-sky-400 to-indigo-600" role="img" aria-label="Sky-blue to indigo gradient"></span>
      <span class="absolute inset-0 flex items-center justify-center" aria-hidden="true">
        <span class="flex h-11 w-11 items-center justify-center rounded-full bg-black/55 ring-1 ring-white/40 transition-transform group-hover:scale-110 group-focus-visible:scale-110 motion-reduce:transition-none">
          <span class="ml-0.5 h-0 w-0 border-y-[7px] border-l-[11px] border-y-transparent border-l-white"></span>
        </span>
      </span>
      <span class="absolute bottom-1.5 right-1.5 rounded bg-black/70 px-1.5 py-0.5 text-xs font-medium tabular-nums text-white" aria-hidden="true">4:12</span>
      <span class="sr-only">Play Reef dive</span>
    </button>
  </li>
  <li>
    <button type="button" class="group relative block w-full overflow-hidden rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
      <span class="block aspect-video w-full bg-gradient-to-br from-rose-400 to-orange-500" role="img" aria-label="Rose to orange gradient"></span>
      <span class="absolute inset-0 flex items-center justify-center" aria-hidden="true">
        <span class="flex h-11 w-11 items-center justify-center rounded-full bg-black/55 ring-1 ring-white/40 transition-transform group-hover:scale-110 group-focus-visible:scale-110 motion-reduce:transition-none">
          <span class="ml-0.5 h-0 w-0 border-y-[7px] border-l-[11px] border-y-transparent border-l-white"></span>
        </span>
      </span>
      <span class="absolute bottom-1.5 right-1.5 rounded bg-black/70 px-1.5 py-0.5 text-xs font-medium tabular-nums text-white" aria-hidden="true">2:47</span>
      <span class="sr-only">Play Canyon flyover</span>
    </button>
  </li>
</ul>