Gallery Metadata Grid

<section class="ws-gallery bg-[var(--ws-gallery-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-xl text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-color-text-soft)]">Portfolio</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-gallery-text)] sm:text-4xl">Selected work</h2>
    </div>

    <!-- 4-col grid, alternating items offset downward on lg -->
    <div class="mt-14 grid grid-cols-2 gap-6 lg:grid-cols-4">

      <!-- Item 1 — normal position -->
      <a href="#" class="group flex flex-col gap-3">
        <div class="overflow-hidden rounded-2xl">
          <div class="aspect-[3/4] w-full bg-gradient-to-b from-indigo-200 to-violet-300 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-indigo-900 dark:to-violet-800"></div>
        </div>
        <div class="text-center">
          <h3 class="text-sm font-semibold text-[var(--ws-gallery-text)] transition group-hover:text-[var(--ws-color-accent)]">Brand identity</h3>
          <p class="mt-0.5 text-xs text-[var(--ws-color-text-soft)]">Branding</p>
        </div>
      </a>

      <!-- Item 2 — offset down on lg -->
      <a href="#" class="group flex flex-col gap-3 lg:mt-10">
        <div class="overflow-hidden rounded-2xl">
          <div class="aspect-[3/4] w-full bg-gradient-to-b from-emerald-200 to-teal-300 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-emerald-900 dark:to-teal-800"></div>
        </div>
        <div class="text-center">
          <h3 class="text-sm font-semibold text-[var(--ws-gallery-text)] transition group-hover:text-[var(--ws-color-accent)]">Product design</h3>
          <p class="mt-0.5 text-xs text-[var(--ws-color-text-soft)]">UI / UX</p>
        </div>
      </a>

      <!-- Item 3 — normal position -->
      <a href="#" class="group flex flex-col gap-3">
        <div class="overflow-hidden rounded-2xl">
          <div class="aspect-[3/4] w-full bg-gradient-to-b from-amber-200 to-orange-300 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-amber-900 dark:to-orange-800"></div>
        </div>
        <div class="text-center">
          <h3 class="text-sm font-semibold text-[var(--ws-gallery-text)] transition group-hover:text-[var(--ws-color-accent)]">Editorial layout</h3>
          <p class="mt-0.5 text-xs text-[var(--ws-color-text-soft)]">Print & Digital</p>
        </div>
      </a>

      <!-- Item 4 — offset down on lg -->
      <a href="#" class="group flex flex-col gap-3 lg:mt-10">
        <div class="overflow-hidden rounded-2xl">
          <div class="aspect-[3/4] w-full bg-gradient-to-b from-rose-200 to-pink-300 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-rose-900 dark:to-pink-800"></div>
        </div>
        <div class="text-center">
          <h3 class="text-sm font-semibold text-[var(--ws-gallery-text)] transition group-hover:text-[var(--ws-color-accent)]">Motion graphics</h3>
          <p class="mt-0.5 text-xs text-[var(--ws-color-text-soft)]">Animation</p>
        </div>
      </a>

    </div>

    <!-- Second row -->
    <div class="mt-6 grid grid-cols-2 gap-6 lg:grid-cols-4">

      <a href="#" class="group flex flex-col gap-3">
        <div class="overflow-hidden rounded-2xl">
          <div class="aspect-[3/4] w-full bg-gradient-to-b from-sky-200 to-blue-300 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-sky-900 dark:to-blue-800"></div>
        </div>
        <div class="text-center">
          <h3 class="text-sm font-semibold text-[var(--ws-gallery-text)] transition group-hover:text-[var(--ws-color-accent)]">Web experience</h3>
          <p class="mt-0.5 text-xs text-[var(--ws-color-text-soft)]">Development</p>
        </div>
      </a>

      <a href="#" class="group flex flex-col gap-3 lg:mt-10">
        <div class="overflow-hidden rounded-2xl">
          <div class="aspect-[3/4] w-full bg-gradient-to-b from-slate-300 to-stone-400 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-slate-700 dark:to-stone-700"></div>
        </div>
        <div class="text-center">
          <h3 class="text-sm font-semibold text-[var(--ws-gallery-text)] transition group-hover:text-[var(--ws-color-accent)]">Photography</h3>
          <p class="mt-0.5 text-xs text-[var(--ws-color-text-soft)]">Visual</p>
        </div>
      </a>

      <a href="#" class="group flex flex-col gap-3">
        <div class="overflow-hidden rounded-2xl">
          <div class="aspect-[3/4] w-full bg-gradient-to-b from-violet-200 to-purple-300 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-violet-900 dark:to-purple-800"></div>
        </div>
        <div class="text-center">
          <h3 class="text-sm font-semibold text-[var(--ws-gallery-text)] transition group-hover:text-[var(--ws-color-accent)]">Packaging</h3>
          <p class="mt-0.5 text-xs text-[var(--ws-color-text-soft)]">Industrial</p>
        </div>
      </a>

      <a href="#" class="group flex flex-col gap-3 lg:mt-10">
        <div class="overflow-hidden rounded-2xl">
          <div class="aspect-[3/4] w-full bg-gradient-to-b from-green-200 to-emerald-300 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-green-900 dark:to-emerald-800"></div>
        </div>
        <div class="text-center">
          <h3 class="text-sm font-semibold text-[var(--ws-gallery-text)] transition group-hover:text-[var(--ws-color-accent)]">Social media</h3>
          <p class="mt-0.5 text-xs text-[var(--ws-color-text-soft)]">Content</p>
        </div>
      </a>

    </div>
  </div>
</section>