Responsive Portfolio Showcase Section with Project Cards

<section id="approach" class="sm:p-8 bg-neutral-50 border-neutral-200 border rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6 max-w-6xl">
  <!-- Background dividers -->
  <div class="absolute inset-0 opacity-10 pointer-events-none">
    <div class="absolute top-1/4 left-0 right-0 h-px bg-gradient-to-r from-transparent via-neutral-300 to-transparent">
    </div>
    <div class="absolute top-3/4 left-0 right-0 h-px bg-gradient-to-r from-transparent via-neutral-300 to-transparent">
    </div>
    <div class="absolute top-0 bottom-0 left-1/3 w-px bg-gradient-to-b from-transparent via-neutral-300 to-transparent">
    </div>
    <div
      class="absolute top-0 bottom-0 right-1/3 w-px bg-gradient-to-b from-transparent via-neutral-300 to-transparent">
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10 items-start relative z-10">
    <!-- Left: Heading + copy -->
    <div class="flex flex-col justify-between min-h-full">
      <div class="">
        <span class="text-sm font-normal text-neutral-500 font-geist" style="">Portfolio showcase</span>
        <h2 class="text-[44px] sm:text-6xl lg:text-7xl leading-[0.9] text-neutral-900 mt-2 tracking-tight font-geist">
          Projects that define categories and drive growth.
        </h2>

        <!-- subtle plus markers with divider -->
        <div class="mt-8 relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full h-px bg-gradient-to-r from-neutral-200 via-neutral-300 to-neutral-200"></div>
          </div>
          <div class="hidden sm:grid grid-cols-3 gap-6 text-neutral-600 bg-neutral-50 px-4 relative">
            <div class="flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus"
                class="lucide lucide-plus h-4 w-4" style="stroke-width: 1.5">
                <path d="M5 12h14" class=""></path>
                <path d="M12 5v14" class=""></path>
              </svg>
              <span class="text-sm font-normal font-geist" style="">Brand Identity</span>
            </div>
            <div class="flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus"
                class="lucide lucide-plus h-4 w-4" style="stroke-width: 1.5">
                <path d="M5 12h14" class=""></path>
                <path d="M12 5v14" class=""></path>
              </svg>
              <span class="text-sm font-normal font-geist" style="">Product Design</span>
            </div>
            <div class="flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus"
                class="lucide lucide-plus h-4 w-4" style="stroke-width: 1.5">
                <path d="M5 12h14" class=""></path>
                <path d="M12 5v14" class=""></path>
              </svg>
              <span class="text-sm font-normal font-geist" style="">Web Development</span>
            </div>
          </div>
        </div>
      </div>

      <div class="w-full mt-10">
        <div class="">
          <p class="text-sm font-medium text-neutral-900 tracking-tight font-geist" style="">Impactful results across
            industries</p>
          <p class="mt-1 text-sm text-neutral-600 font-geist" style="">From startup MVPs to enterprise transformations,
            our projects consistently deliver measurable outcomes and user engagement that drives business growth.</p>
          <a href="#work"
            class="mt-4 w-full inline-flex items-center justify-center gap-2 h-10 px-4 rounded-full bg-neutral-900 text-white text-sm font-normal hover:bg-neutral-800 transition font-geist"
            style="">
            View all projects
            <span class="inline-flex h-2 w-2 rounded-full bg-white"></span>
          </a>
        </div>
      </div>
    </div>

    <!-- Right: Project grid -->
    <div class="grid grid-cols-2 gap-4 relative">
      <!-- Left Column -->
      <div class="flex flex-col gap-4">
        <!-- Project 1 -->
        <article
          class="relative overflow-hidden aspect-[4/5] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c6bb21d7-3ce2-44b4-abbf-2b0d092cd7fc_800w.jpg)] bg-cover border-neutral-200 border rounded-2xl">
          <div class="absolute top-3 left-3">
            <span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/90 text-neutral-900 border border-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles h-3.5 w-3.5" style="stroke-width: 1.5"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
        </span>
          </div>
          <div class="absolute top-3 right-3">
            <span class="px-2 py-1 rounded-md bg-white/60 backdrop-blur text-[11px] text-neutral-700 font-normal border border-neutral-200 font-geist" style="">Branding</span>
          </div>
          <div class="absolute bottom-3 left-3 right-3">
            <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist" style="">Arcadia OS</p>
          </div>
        </article>

        <!-- Project 3 -->
        <article
          class="relative overflow-hidden aspect-[4/3] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9b13123e-ec51-4d3a-b994-c64aab4555ba_800w.jpg)] bg-cover border-neutral-200 border rounded-2xl">
          <div class="absolute top-3 left-3">
            <span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/90 text-neutral-900 border border-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="activity" class="lucide lucide-activity h-3.5 w-3.5" style="stroke-width: 1.5"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" class=""></path></svg>
        </span>
          </div>
          <div class="absolute top-3 right-3">
            <span class="px-2 py-1 rounded-md bg-white/60 backdrop-blur text-[11px] text-neutral-700 font-normal border border-neutral-200 font-geist" style="">Health</span>
          </div>
          <div class="absolute bottom-3 left-3 right-3">
            <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist" style="">Helix Care</p>
          </div>
        </article>
      </div>

      <!-- Right Column -->
      <div class="flex flex-col gap-4">
        <!-- Project 2 -->
        <article
          class="relative overflow-hidden aspect-[4/3] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6dc04406-de49-4988-8d82-e1d9fe1d83c1_800w.jpg)] bg-cover border-neutral-200 border rounded-2xl">
          <div class="absolute top-3 left-3">
            <span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/90 text-neutral-900 border border-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="layout-dashboard" class="lucide lucide-layout-dashboard h-3.5 w-3.5" style="stroke-width: 1.5"><rect width="7" height="9" x="3" y="3" rx="1" class=""></rect><rect width="7" height="5" x="14" y="3" rx="1" class=""></rect><rect width="7" height="9" x="14" y="12" rx="1" class=""></rect><rect width="7" height="5" x="3" y="16" rx="1" class=""></rect></svg>
        </span>
          </div>
          <div class="absolute top-3 right-3">
            <span class="px-2 py-1 rounded-md bg-white/60 backdrop-blur text-[11px] text-neutral-700 font-normal border border-neutral-200 font-geist" style="">Product</span>
          </div>
          <div class="absolute bottom-3 left-3 right-3">
            <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist" style="">Nimbus Finance
            </p>
          </div>
        </article>

        <!-- Project 4 -->
        <article
          class="relative overflow-hidden aspect-[4/5] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5ee0a38a-b5d3-4531-8793-98beed4af162_800w.jpg)] bg-cover border-neutral-200 border rounded-2xl">
          <div class="absolute top-3 left-3">
            <span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/90 text-neutral-900 border border-neutral-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clapperboard" class="lucide lucide-clapperboard h-3.5 w-3.5" style="stroke-width: 1.5"><path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z" class=""></path><path d="m6.2 5.3 3.1 3.9" class=""></path><path d="m12.4 3.4 3.1 4" class=""></path><path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" class=""></path></svg>
        </span>
          </div>
          <div class="absolute top-3 right-3">
            <span class="px-2 py-1 rounded-md bg-white/60 backdrop-blur text-[11px] text-neutral-700 font-normal border border-neutral-200 font-geist" style="">Motion</span>
          </div>
          <div class="absolute bottom-3 left-3 right-3">
            <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist" style="">Lumen AI</p>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>