Load More Gallery

<!--
  Reveal-in-place pagination. A polite live region states "Showing X of Y" so a
  screen-reader user learns the count grew without a page move, and the button
  disappears once everything is shown rather than sitting there dead. Reveal
  logic is in the React/TS tabs.
-->
<div class="w-full">
  <ul class="grid list-none grid-cols-2 gap-3 p-0 sm:grid-cols-3 lg:grid-cols-4">
    <li>
      <figure class="m-0">
        <div class="aspect-square w-full rounded-xl bg-gradient-to-br from-sky-400 to-indigo-600" role="img" aria-label="Sky-blue to indigo gradient"></div>
        <figcaption class="pt-2 text-[0.8125rem] text-gray-700 dark:text-gray-300">Coastline</figcaption>
      </figure>
    </li>
    <li>
      <figure class="m-0">
        <div class="aspect-square w-full rounded-xl bg-gradient-to-br from-rose-400 to-orange-500" role="img" aria-label="Rose to orange gradient"></div>
        <figcaption class="pt-2 text-[0.8125rem] text-gray-700 dark:text-gray-300">Canyon</figcaption>
      </figure>
    </li>
  </ul>

  <p class="mt-3 text-center text-[0.8125rem] text-gray-600 dark:text-gray-400" aria-live="polite">Showing 4 of 8 photos</p>

  <div class="mt-2 flex justify-center">
    <button type="button" class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">Load more</button>
  </div>
</div>