Gallery Carousel

<section class="ws-gallery bg-[var(--ws-gallery-bg)] py-20">
  <div class="mx-auto max-w-4xl px-6">
    <div class="text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-gallery-text)] sm:text-4xl">Featured work</h2>
      <p class="mt-3 text-lg text-[var(--ws-gallery-text-soft)]">Swipe through our latest projects.</p>
    </div>

    <div class="relative mt-12">
      <!-- Carousel container -->
      <div id="carousel-track" class="flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth scrollbar-none">
        <div class="w-full flex-shrink-0 snap-center">
          <div class="flex w-full items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-200 to-indigo-300 aspect-[9/5]" aria-label="Project 1">
            <svg class="h-8 w-8 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" /></svg>
          </div>
        </div>
        <div class="w-full flex-shrink-0 snap-center">
          <div class="flex w-full items-center justify-center rounded-2xl bg-gradient-to-tr from-emerald-200 to-emerald-300 aspect-[9/5]" aria-label="Project 2">
            <svg class="h-8 w-8 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" /></svg>
          </div>
        </div>
        <div class="w-full flex-shrink-0 snap-center">
          <div class="flex w-full items-center justify-center rounded-2xl bg-gradient-to-bl from-amber-200 to-amber-300 aspect-[9/5]" aria-label="Project 3">
            <svg class="h-8 w-8 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" /></svg>
          </div>
        </div>
        <div class="w-full flex-shrink-0 snap-center">
          <div class="flex w-full items-center justify-center rounded-2xl bg-gradient-to-tl from-rose-200 to-rose-300 aspect-[9/5]" aria-label="Project 4">
            <svg class="h-8 w-8 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" /></svg>
          </div>
        </div>
      </div>

      <!-- Prev / Next -->
      <button type="button" onclick="document.getElementById('carousel-track').scrollBy({left:-document.getElementById('carousel-track').offsetWidth,behavior:'smooth'})"
        class="absolute left-3 top-1/2 -translate-y-1/2 rounded-full bg-white/90 p-2.5 shadow-md transition hover:bg-white" aria-label="Previous">
        <svg class="h-5 w-5 text-slate-700" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
      </button>
      <button type="button" onclick="document.getElementById('carousel-track').scrollBy({left:document.getElementById('carousel-track').offsetWidth,behavior:'smooth'})"
        class="absolute right-3 top-1/2 -translate-y-1/2 rounded-full bg-white/90 p-2.5 shadow-md transition hover:bg-white" aria-label="Next">
        <svg class="h-5 w-5 text-slate-700" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
      </button>
    </div>
  </div>
</section>