Masonry Gallery with Captions

<!--
  CSS-columns masonry (columns-2 sm:columns-3 lg:columns-4) with the caption overlaid on a
  dark-to-transparent scrim so it reads on any tile colour. break-inside-avoid
  is not optional: without it a tile splits across the column boundary. The
  varying heightClass per tile is what makes it read as masonry, not a grid.
-->
<ul class="w-full list-none columns-2 gap-3 p-0 sm:columns-3 lg:columns-4">
  <li class="mb-3 break-inside-avoid">
    <figure class="relative m-0 overflow-hidden rounded-xl">
      <div class="h-40 w-full bg-gradient-to-br from-sky-400 to-indigo-600" role="img" aria-label="Sky-blue to indigo gradient"></div>
      <figcaption class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-3 pb-2 pt-8 text-sm font-medium text-white">Coastline</figcaption>
    </figure>
  </li>
  <li class="mb-3 break-inside-avoid">
    <figure class="relative m-0 overflow-hidden rounded-xl">
      <div class="h-56 w-full bg-gradient-to-br from-rose-400 to-orange-500" role="img" aria-label="Rose to orange gradient"></div>
      <figcaption class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-3 pb-2 pt-8 text-sm font-medium text-white">Canyon</figcaption>
    </figure>
  </li>
  <li class="mb-3 break-inside-avoid">
    <figure class="relative m-0 overflow-hidden rounded-xl">
      <div class="h-48 w-full bg-gradient-to-br from-emerald-400 to-teal-600" role="img" aria-label="Emerald to teal gradient"></div>
      <figcaption class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-3 pb-2 pt-8 text-sm font-medium text-white">Forest</figcaption>
    </figure>
  </li>
  <li class="mb-3 break-inside-avoid">
    <figure class="relative m-0 overflow-hidden rounded-xl">
      <div class="h-36 w-full bg-gradient-to-br from-violet-400 to-fuchsia-600" role="img" aria-label="Violet to fuchsia gradient"></div>
      <figcaption class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-3 pb-2 pt-8 text-sm font-medium text-white">Dusk</figcaption>
    </figure>
  </li>
</ul>