Responsive Portfolio Grid with Feature Card

<section class="bg-white rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6 max-w-5xl">
  <!-- Header -->
  <div class="flex items-center justify-between mb-3">
    <p class="text-xs font-medium text-neutral-500 uppercase tracking-wide" style="">/Portfolio</p>
    <span class="text-xs font-medium text-neutral-500" style="">(02)</span>
  </div>

  <div class="flex gap-6 items-start justify-between mb-8">
    <div class="max-w-3xl">
      <h2 class="text-4xl md:text-6xl text-neutral-900 font-light tracking-tight" style="">Latest moments from my
        portfolio.</h2>
      <p class="mt-4 text-sm md:text-base text-neutral-600" style="">Portraits, editorials, and landscapes by Suzy
        Liu—minimal, calm, and intentional storytelling through light.</p>
    </div>
    <a href="#"
      class="hidden sm:inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition bg-neutral-100 ring-1 ring-neutral-200 hover:bg-neutral-200 text-neutral-900"
      style="">
      View all projects
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus"
        class="lucide lucide-plus h-4 w-4">
        <path d="M5 12h14" class=""></path>
        <path d="M12 5v14" class=""></path>
      </svg>
    </a>
  </div>

  <!-- Grid -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Feature Card (spans 2) -->
    <article class="lg:col-span-2 rounded-3xl p-1 ring-1 bg-neutral-50 ring-neutral-200">
      <div class="relative overflow-hidden rounded-2xl">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a96798fa-9905-42b3-9d61-fec4d29fbe06_800w.jpg" alt="Minimal landscape in soft gradient light" class="h-[360px] md:h-[460px] w-full object-cover" loading="lazy">
        <!-- Category pill -->
        <span class="absolute right-3 top-3 rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-neutral-800 shadow-sm backdrop-blur" style="">Editorial</span>
        <!-- Bottom overlay -->
        <div class="pointer-events-none absolute inset-x-0 bottom-0">
          <div class="h-40 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
        </div>
        <div class="absolute left-4 right-4 bottom-4">
          <p class="text-xs font-medium text-white/80" style="">May 30, 2025</p>
          <h3 class="mt-1 text-xl md:text-2xl text-white font-light tracking-tight" style="">The Power of Restraint in
            Photography</h3>
          <p class="mt-2 text-sm text-white/80" style="">How simplicity, negative space, and patient framing amplify
            emotion and create timeless images.</p>
        </div>
      </div>
    </article>

    <!-- Card 2 -->
    <article class="rounded-3xl p-1 ring-1 bg-neutral-50 ring-neutral-200">
      <div class="overflow-hidden rounded-2xl relative">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/361b93b3-4faa-4d90-a64d-f5de4921a4d7_800w.jpg" alt="Motion portrait in soft tones" class="h-[240px] md:h-[260px] w-full object-cover" loading="lazy">
        <span class="absolute right-3 top-3 rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-neutral-800 shadow-sm backdrop-blur" style="">Portrait</span>
      </div>
      <div class="px-4 pt-4 pb-6">
        <p class="text-xs font-medium text-neutral-500" style="">May 23, 2025</p>
        <h4 class="mt-1 text-lg font-semibold tracking-tight text-neutral-900" style="">Designing for Calm: Motion in
          Portraits</h4>
        <p class="mt-2 text-sm text-neutral-600" style="">Exploring blur, minimal palettes, and subtle pacing to shape
          the viewer's emotional response.</p>
      </div>
    </article>

    <!-- Card 3 -->
    <article class="ring-1 ring-neutral-200 bg-neutral-50 rounded-3xl pt-1 pr-1 pb-1 pl-1">
      <div class="overflow-hidden rounded-2xl relative">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cee814f4-9f14-4c82-896a-b36587194633_800w.jpg" alt="Studio black-and-white portrait with geometric light" class="h-[240px] md:h-[260px] w-full object-cover" loading="lazy">
        <span class="absolute right-3 top-3 rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-neutral-800 shadow-sm backdrop-blur" style="">Studio</span>
      </div>
      <div class="px-4 pt-4 pb-6">
        <p class="text-xs font-medium text-neutral-500" style="">May 16, 2025</p>
        <h4 class="mt-1 text-lg font-semibold tracking-tight text-neutral-900" style="">Building a Timeless Aesthetic
        </h4>
        <p class="mt-2 text-sm text-neutral-600" style="">Creating images that transcend trends by focusing on light,
          form, and honest expression.</p>
      </div>
    </article>

    <article class="ring-1 ring-neutral-200 bg-neutral-50 rounded-3xl pt-1 pr-1 pb-1 pl-1">
      <div class="overflow-hidden rounded-2xl relative">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/88cc054f-a996-4a0c-8fec-3721e3ac4e25_800w.jpg" alt="Studio black-and-white portrait with geometric light" class="h-[240px] md:h-[260px] w-full object-cover" loading="lazy">
        <span class="absolute right-3 top-3 rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-neutral-800 shadow-sm backdrop-blur" style="">Studio</span>
      </div>
      <div class="px-4 pt-4 pb-6">
        <p class="text-xs font-medium text-neutral-500" style="">May 16, 2025</p>
        <h4 class="mt-1 text-lg font-semibold tracking-tight text-neutral-900" style="">Building a Timeless Aesthetic
        </h4>
        <p class="mt-2 text-sm text-neutral-600" style="">Creating images that transcend trends by focusing on light,
          form, and honest expression.</p>
      </div>
    </article>

    <article class="ring-1 ring-neutral-200 bg-neutral-50 rounded-3xl pt-1 pr-1 pb-1 pl-1">
      <div class="overflow-hidden rounded-2xl relative">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/779c923e-bcc8-49c7-9328-661a04d3f208_800w.jpg" alt="Studio black-and-white portrait with geometric light" class="h-[240px] md:h-[260px] w-full object-cover" loading="lazy">
        <span class="absolute right-3 top-3 rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-neutral-800 shadow-sm backdrop-blur" style="">Studio</span>
      </div>
      <div class="px-4 pt-4 pb-6">
        <p class="text-xs font-medium text-neutral-500" style="">May 16, 2025</p>
        <h4 class="mt-1 text-lg font-semibold tracking-tight text-neutral-900" style="">Building a Timeless Aesthetic
        </h4>
        <p class="mt-2 text-sm text-neutral-600" style="">Creating images that transcend trends by focusing on light,
          form, and honest expression.</p>
      </div>
    </article>
  </div>

  <!-- Mobile View-all -->
  <div class="mt-6 sm:hidden">
    <a href="#"
      class="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition bg-neutral-100 ring-1 ring-neutral-200 hover:bg-neutral-200 text-neutral-900 w-full justify-center"
      style="">
      View all projects
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus"
        class="lucide lucide-plus h-4 w-4">
        <path d="M5 12h14" class=""></path>
        <path d="M12 5v14" class=""></path>
      </svg>
    </a>
  </div>
</section>