Gallery 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-2xl text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-gallery-text)]">Gallery</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-gallery-text)] sm:text-4xl">Our latest work</h2>
    </div>

    <div class="mt-12 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
      <a href="#" class="group relative aspect-square overflow-hidden rounded-xl bg-[var(--ws-color-surface-alt)]">
        <div class="h-full w-full bg-gradient-to-br from-indigo-200 to-purple-200 transition duration-300 group-hover:scale-110"></div>
        <div class="absolute inset-0 bg-slate-900/0 transition duration-300 group-hover:bg-slate-900/40"></div>
        <div class="absolute inset-x-0 bottom-0 translate-y-full p-4 transition duration-300 group-hover:translate-y-0">
          <p class="text-sm font-medium text-white">Brand Identity</p>
          <p class="text-xs text-slate-300">Design</p>
        </div>
      </a>

      <a href="#" class="group relative aspect-square overflow-hidden rounded-xl bg-[var(--ws-color-surface-alt)]">
        <div class="h-full w-full bg-gradient-to-br from-emerald-200 to-teal-200 transition duration-300 group-hover:scale-110"></div>
        <div class="absolute inset-0 bg-slate-900/0 transition duration-300 group-hover:bg-slate-900/40"></div>
        <div class="absolute inset-x-0 bottom-0 translate-y-full p-4 transition duration-300 group-hover:translate-y-0">
          <p class="text-sm font-medium text-white">Dashboard App</p>
          <p class="text-xs text-slate-300">Web App</p>
        </div>
      </a>

      <a href="#" class="group relative aspect-square overflow-hidden rounded-xl bg-[var(--ws-color-surface-alt)]">
        <div class="h-full w-full bg-gradient-to-br from-amber-200 to-orange-200 transition duration-300 group-hover:scale-110"></div>
        <div class="absolute inset-0 bg-slate-900/0 transition duration-300 group-hover:bg-slate-900/40"></div>
        <div class="absolute inset-x-0 bottom-0 translate-y-full p-4 transition duration-300 group-hover:translate-y-0">
          <p class="text-sm font-medium text-white">Marketing Site</p>
          <p class="text-xs text-slate-300">Landing Page</p>
        </div>
      </a>

      <a href="#" class="group relative aspect-square overflow-hidden rounded-xl bg-[var(--ws-color-surface-alt)]">
        <div class="h-full w-full bg-gradient-to-br from-rose-200 to-pink-200 transition duration-300 group-hover:scale-110"></div>
        <div class="absolute inset-0 bg-slate-900/0 transition duration-300 group-hover:bg-slate-900/40"></div>
        <div class="absolute inset-x-0 bottom-0 translate-y-full p-4 transition duration-300 group-hover:translate-y-0">
          <p class="text-sm font-medium text-white">Mobile App</p>
          <p class="text-xs text-slate-300">iOS / Android</p>
        </div>
      </a>

      <a href="#" class="group relative aspect-square overflow-hidden rounded-xl bg-[var(--ws-color-surface-alt)]">
        <div class="h-full w-full bg-gradient-to-br from-sky-200 to-cyan-200 transition duration-300 group-hover:scale-110"></div>
        <div class="absolute inset-0 bg-slate-900/0 transition duration-300 group-hover:bg-slate-900/40"></div>
        <div class="absolute inset-x-0 bottom-0 translate-y-full p-4 transition duration-300 group-hover:translate-y-0">
          <p class="text-sm font-medium text-white">E-Commerce</p>
          <p class="text-xs text-slate-300">Shopify</p>
        </div>
      </a>

      <a href="#" class="group relative aspect-square overflow-hidden rounded-xl bg-[var(--ws-color-surface-alt)]">
        <div class="h-full w-full bg-gradient-to-br from-violet-200 to-fuchsia-200 transition duration-300 group-hover:scale-110"></div>
        <div class="absolute inset-0 bg-slate-900/0 transition duration-300 group-hover:bg-slate-900/40"></div>
        <div class="absolute inset-x-0 bottom-0 translate-y-full p-4 transition duration-300 group-hover:translate-y-0">
          <p class="text-sm font-medium text-white">SaaS Platform</p>
          <p class="text-xs text-slate-300">Web App</p>
        </div>
      </a>

      <a href="#" class="group relative aspect-square overflow-hidden rounded-xl bg-[var(--ws-color-surface-alt)]">
        <div class="h-full w-full bg-gradient-to-br from-lime-200 to-green-200 transition duration-300 group-hover:scale-110"></div>
        <div class="absolute inset-0 bg-slate-900/0 transition duration-300 group-hover:bg-slate-900/40"></div>
        <div class="absolute inset-x-0 bottom-0 translate-y-full p-4 transition duration-300 group-hover:translate-y-0">
          <p class="text-sm font-medium text-white">Documentation</p>
          <p class="text-xs text-slate-300">Developer Tools</p>
        </div>
      </a>

      <a href="#" class="group relative aspect-square overflow-hidden rounded-xl bg-[var(--ws-color-surface-alt)]">
        <div class="h-full w-full bg-gradient-to-br from-slate-200 to-zinc-300 transition duration-300 group-hover:scale-110"></div>
        <div class="absolute inset-0 bg-slate-900/0 transition duration-300 group-hover:bg-slate-900/40"></div>
        <div class="absolute inset-x-0 bottom-0 translate-y-full p-4 transition duration-300 group-hover:translate-y-0">
          <p class="text-sm font-medium text-white">Design System</p>
          <p class="text-xs text-slate-300">Component Library</p>
        </div>
      </a>
    </div>
  </div>
</section>