Portfolio Fullscreen Panels

<section class="ws-portfolio ws-fullscreen-panels snap-y snap-mandatory overflow-y-auto" style="height: 100vh; --portfolio-text: var(--ws-color-text);">
  <!-- Panel 1 -->
  <div class="relative flex h-screen snap-start items-end bg-gradient-to-br from-slate-800 to-slate-900 p-8 lg:p-16">
    <div class="max-w-xl">
      <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">01 / Branding</span>
      <h2 class="mt-3 text-4xl font-bold text-white lg:text-5xl">Redefining Visual Identity</h2>
      <p class="mt-3 text-lg text-slate-300">A complete brand overhaul for a fintech startup entering the European market.</p>
      <a href="#" class="mt-6 inline-flex items-center gap-2 text-sm font-medium text-white hover:gap-3 transition-all">
        View project
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
      </a>
    </div>
  </div>

  <!-- Panel 2 -->
  <div class="relative flex h-screen snap-start items-end bg-gradient-to-br from-blue-900 to-indigo-950 p-8 lg:p-16">
    <div class="max-w-xl">
      <span class="text-xs font-semibold uppercase tracking-wider text-blue-300">02 / Digital</span>
      <h2 class="mt-3 text-4xl font-bold text-white lg:text-5xl">E-Commerce Platform</h2>
      <p class="mt-3 text-lg text-blue-200">End-to-end design and development for a sustainable fashion brand.</p>
      <a href="#" class="mt-6 inline-flex items-center gap-2 text-sm font-medium text-white hover:gap-3 transition-all">
        View project
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
      </a>
    </div>
  </div>

  <!-- Panel 3 -->
  <div class="relative flex h-screen snap-start items-end bg-gradient-to-br from-emerald-900 to-teal-950 p-8 lg:p-16">
    <div class="max-w-xl">
      <span class="text-xs font-semibold uppercase tracking-wider text-emerald-300">03 / App</span>
      <h2 class="mt-3 text-4xl font-bold text-white lg:text-5xl">Mobile Health Tracker</h2>
      <p class="mt-3 text-lg text-emerald-200">Intuitive mobile experience for daily wellness tracking and insights.</p>
      <a href="#" class="mt-6 inline-flex items-center gap-2 text-sm font-medium text-white hover:gap-3 transition-all">
        View project
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
      </a>
    </div>
  </div>
</section>