Gallery Stacked Columns

<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)]">Gallery</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-gallery-text)] sm:text-4xl">Moments we've captured</h2>
    </div>

    <!-- 6 stacked columns, each with 2 images, bottom-aligned -->
    <div class="mt-12 grid grid-cols-2 items-end gap-3 sm:grid-cols-3 lg:grid-cols-6">

      <!-- Column 1 — tall top image -->
      <div class="flex flex-col gap-3">
        <a href="#" class="group block overflow-hidden rounded-xl">
          <div class="aspect-[3/4] w-full bg-gradient-to-b from-slate-300 to-slate-400 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-slate-700 dark:to-slate-800"></div>
        </a>
        <a href="#" class="group block overflow-hidden rounded-xl">
          <div class="aspect-square w-full bg-gradient-to-br from-indigo-200 to-indigo-300 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-indigo-900 dark:to-indigo-800"></div>
        </a>
      </div>

      <!-- Column 2 — short top image -->
      <div class="flex flex-col gap-3">
        <a href="#" class="group block overflow-hidden rounded-xl">
          <div class="aspect-square w-full bg-gradient-to-br from-violet-200 to-violet-300 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-violet-900 dark:to-violet-800"></div>
        </a>
        <a href="#" class="group block overflow-hidden rounded-xl">
          <div class="aspect-[3/4] w-full bg-gradient-to-b from-slate-400 to-slate-500 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-slate-600 dark:to-slate-700"></div>
        </a>
      </div>

      <!-- Column 3 — landscape top -->
      <div class="flex flex-col gap-3">
        <a href="#" class="group block overflow-hidden rounded-xl">
          <div class="aspect-[4/3] w-full bg-gradient-to-br 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>
        </a>
        <a href="#" class="group block overflow-hidden rounded-xl">
          <div class="aspect-[3/4] w-full bg-gradient-to-b from-slate-300 to-slate-400 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-slate-700 dark:to-slate-600"></div>
        </a>
      </div>

      <!-- Column 4 — tall top image -->
      <div class="flex flex-col gap-3">
        <a href="#" class="group block overflow-hidden rounded-xl">
          <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>
        </a>
        <a href="#" class="group block overflow-hidden rounded-xl">
          <div class="aspect-square w-full bg-gradient-to-br from-slate-200 to-slate-300 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-slate-700 dark:to-slate-600"></div>
        </a>
      </div>

      <!-- Column 5 — square + portrait -->
      <div class="flex flex-col gap-3">
        <a href="#" class="group block overflow-hidden rounded-xl">
          <div class="aspect-square w-full bg-gradient-to-br 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>
        </a>
        <a href="#" class="group block overflow-hidden rounded-xl">
          <div class="aspect-[4/5] 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>
        </a>
      </div>

      <!-- Column 6 — landscape + square -->
      <div class="flex flex-col gap-3">
        <a href="#" class="group block overflow-hidden rounded-xl">
          <div class="aspect-[4/3] w-full bg-gradient-to-br from-slate-200 to-stone-300 transition duration-500 group-hover:scale-105 group-hover:opacity-90 dark:from-slate-700 dark:to-stone-700"></div>
        </a>
        <a href="#" class="group block overflow-hidden rounded-xl">
          <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>
        </a>
      </div>

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