Parallax Columns Gallery

<section class="ws-gallery-parallax bg-[var(--ws-color-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mb-16 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-color-text)] sm:text-4xl">Our work</h2>
      <p class="mt-4 text-base text-[var(--ws-color-text-soft)]">Offset columns give the impression of scroll-driven parallax — pure CSS, no JavaScript.</p>
    </div>

    <!-- 3-column parallax grid -->
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">

      <!-- Left column: offset upward -->
      <div class="flex flex-col gap-4" style="transform: translateY(-40px)">
        <div class="aspect-[3/4] rounded-2xl bg-gradient-to-br from-indigo-200 to-violet-300"></div>
        <div class="aspect-[3/4] rounded-2xl bg-gradient-to-br from-rose-200 to-pink-300"></div>
        <div class="aspect-[3/4] rounded-2xl bg-gradient-to-br from-amber-200 to-orange-300"></div>
      </div>

      <!-- Middle column: normal position -->
      <div class="flex flex-col gap-4">
        <div class="aspect-[3/4] rounded-2xl bg-gradient-to-br from-emerald-200 to-teal-300"></div>
        <div class="aspect-[3/4] rounded-2xl bg-gradient-to-br from-sky-200 to-blue-300"></div>
        <div class="aspect-[3/4] rounded-2xl bg-gradient-to-br from-fuchsia-200 to-purple-300"></div>
      </div>

      <!-- Right column: offset downward -->
      <div class="flex flex-col gap-4" style="transform: translateY(40px)">
        <div class="aspect-[3/4] rounded-2xl bg-gradient-to-br from-lime-200 to-green-300"></div>
        <div class="aspect-[3/4] rounded-2xl bg-gradient-to-br from-cyan-200 to-sky-300"></div>
        <div class="aspect-[3/4] rounded-2xl bg-gradient-to-br from-orange-200 to-amber-300"></div>
      </div>
    </div>
    <!-- Bottom padding compensates for the downward-shifted column overflow -->
    <div class="mt-20"></div>
  </div>
</section>