Responsive Portfolio Masonry Grid Section

<section id="work" class="max-w-7xl sm:px-6 sm:mt-20 border-white/10 border-t mt-16 mr-auto ml-auto pt-10 pr-4 pl-4">
  <div class="flex items-center justify-between">
    <h2 class="text-xl sm:text-2xl tracking-tight">Recent Work</h2>
    <a href="#" class="inline-flex items-center gap-2 text-sm tracking-tight text-white/70 hover:text-white">
      <span class="">View all</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
    </a>
  </div>

  <div class="mt-6 columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
    <!-- Item 1 - Tall -->
    <article class="group break-inside-avoid mb-5 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]">
      <div class="relative aspect-[16/9]">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f16eab49-7c29-4933-aca8-f41b2c337f6f_800w.jpg" alt="RAG dashboard" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
        <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
      </div>
      <div class="p-4 border-t border-white/10">
        <div class="flex items-center gap-2 text-xs text-white/60">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bot" class="lucide lucide-bot w-4 h-4"><path d="M12 8V4H8" class=""></path><rect width="16" height="12" x="4" y="8" rx="2" class=""></rect><path d="M2 14h2" class=""></path><path d="M20 14h2" class=""></path><path d="M15 13v2" class=""></path><path d="M9 13v2" class=""></path></svg>
          <span class="">RAG Platform</span>
        </div>
        <h3 class="mt-2 text-base font-semibold tracking-tight">Vector‑backed Retrieval</h3>
        <p class="text-sm text-white/70 mt-1">Hybrid search, chunking, schema‑aware re‑ranking, observability.</p>
      </div>
    </article>

    <!-- Item 2 - Medium -->
    <article class="group break-inside-avoid mb-5 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]">
      <div class="relative aspect-[4/3]">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/41f44e91-a4d8-4042-8253-0c6a79be833b_800w.jpg" alt="Agentic workflow" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
        <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
      </div>
      <div class="p-4 border-t border-white/10">
        <div class="flex items-center gap-2 text-xs text-white/60">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="workflow" class="lucide lucide-workflow w-4 h-4"><rect width="8" height="8" x="3" y="3" rx="2" class=""></rect><path d="M7 11v4a2 2 0 0 0 2 2h4" class=""></path><rect width="8" height="8" x="13" y="13" rx="2" class=""></rect></svg>
          <span>Agents</span>
        </div>
        <h3 class="mt-2 text-base font-semibold tracking-tight">Agent Orchestrator</h3>
        <p class="text-sm text-white/70 mt-1">Multi‑tool planning, retries, guardrails, tracing via OpenTelemetry.</p>
      </div>
    </article>

    <!-- Item 3 - Short -->
    <article class="group break-inside-avoid mb-5 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]">
      <div class="relative aspect-[4/3]">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7fc6a2de-15db-4034-8a23-06b7a43997f6_800w.jpg" alt="Code copilot" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]" style="">
        <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
      </div>
      <div class="p-4 border-t border-white/10">
        <div class="flex items-center gap-2 text-xs text-white/60">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="code-2" class="lucide lucide-code-2 w-4 h-4"><path d="m18 16 4-4-4-4" class=""></path><path d="m6 8-4 4 4 4" class=""></path><path d="m14.5 4-5 16" class=""></path></svg>
          <span class="">Developer UX</span>
        </div>
        <h3 class="mt-2 text-base font-semibold tracking-tight">Code Copilot</h3>
        <p class="text-sm text-white/70 mt-1">Inline suggestions, context windows, evals, and latency budgets.</p>
      </div>
    </article>

    <!-- Item 4 - Medium Tall -->
    <article class="group break-inside-avoid mb-5 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]">
      <div class="relative aspect-[16/9]">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a2cd53da-e321-41c2-9467-565b1a1b0b52_800w.jpg" alt="Data pipeline" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
        <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
      </div>
      <div class="p-4 border-t border-white/10">
        <div class="flex items-center gap-2 text-xs text-white/60">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="database" class="lucide lucide-database w-4 h-4"><ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5" class=""></path><path d="M3 12A9 3 0 0 0 21 12" class=""></path></svg>
          <span>Data Pipeline</span>
        </div>
        <h3 class="mt-2 text-base font-semibold tracking-tight">Real‑time Analytics</h3>
        <p class="text-sm text-white/70 mt-1">Streaming data processing with Apache Kafka and real‑time dashboards.</p>
      </div>
    </article>

    <!-- Item 5 - Square -->
    <article class="group break-inside-avoid mb-5 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]">
      <div class="relative aspect-[16/9]">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f826149d-7e8d-4b68-a4fd-cc16fb762142_800w.jpg" alt="ML model" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
        <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
      </div>
      <div class="p-4 border-t border-white/10">
        <div class="flex items-center gap-2 text-xs text-white/60">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="brain" class="lucide lucide-brain w-4 h-4"><path d="M12 18V5" class=""></path><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4" class=""></path><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5" class=""></path><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77" class=""></path><path d="M18 18a4 4 0 0 0 2-7.464" class=""></path><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" class=""></path><path d="M6 18a4 4 0 0 1-2-7.464" class=""></path><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77" class=""></path></svg>
          <span class="">Machine Learning</span>
        </div>
        <h3 class="mt-2 text-base font-semibold tracking-tight">Custom Model Training</h3>
        <p class="text-sm text-white/70 mt-1">Fine‑tuned transformers for domain‑specific tasks with custom datasets.</p>
      </div>
    </article>

    <!-- Item 6 - Medium -->
    <article class="group break-inside-avoid mb-5 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]">
      <div class="relative aspect-[4/3]">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/36460156-d7ce-43aa-89af-e013fb87ccfc_800w.jpg" alt="API system" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]" style="">
        <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
      </div>
      <div class="p-4 border-t border-white/10">
        <div class="flex items-center gap-2 text-xs text-white/60">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="server" class="lucide lucide-server w-4 h-4"><rect width="20" height="8" x="2" y="2" rx="2" ry="2" class=""></rect><rect width="20" height="8" x="2" y="14" rx="2" ry="2" class=""></rect><line x1="6" x2="6.01" y1="6" y2="6" class=""></line><line x1="6" x2="6.01" y1="18" y2="18" class=""></line></svg>
          <span>API Architecture</span>
        </div>
        <h3 class="mt-2 text-base font-semibold tracking-tight">Scalable Backend</h3>
        <p class="text-sm text-white/70 mt-1">Microservices architecture with GraphQL, Redis caching, and auto‑scaling.</p>
      </div>
    </article>
  </div>
</section>