Responsive Portfolio Grid with Hover Cards

<section id="portfolio" class="mt-10">
      <div class="flex sm:mb-8 mb-6 items-end justify-between">
        <div class="">
          <p class="text-[11px] sm:text-xs tracking-widest text-neutral-500 uppercase font-geist">(03) Selected Work</p>
          <h3 class="mt-2 text-2xl sm:text-3xl tracking-tight font-geist font-medium" style="">A few projects I'm proud of.</h3>
        </div>
        <a href="#work" class="hidden sm:inline-flex items-center gap-2 ring-1 ring-neutral-200 hover:shadow text-sm text-neutral-700 font-geist bg-white rounded-full pt-2 pr-4 pb-2 pl-4">
          View Portfolio
          <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="arrow-up-right" class="lucide lucide-arrow-up-right w-[24px] h-[16px]" style="width: 24px; height: 16px; color: rgb(64, 64, 64);"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
        </a>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-5">
        <!-- Column 1 -->
        <div class="flex flex-col gap-4 sm:gap-5">
          <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/af5c4f11-0653-43c0-b21e-5b8cc085c9f3_800w.jpg" alt="Cloud Analytics dashboard project" class="h-56 w-full transition-transform duration-500 group-hover:scale-105 object-cover">
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-5">
              <p class="text-xs text-white/70 font-geist">SaaS • Product</p>
              <div class="mt-1 flex items-center justify-between">
                <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Cloud Analytics</h4>
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
                  <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </span>
              </div>
            </div>
          </a>

          <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/60f49edd-2009-43cf-a12a-d82fd91aae5e_800w.jpg" alt="E-commerce platform" class="h-72 w-full transition-transform duration-500 group-hover:scale-105 object-cover">
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-5">
              <p class="text-xs text-white/70 font-geist">E-commerce • Platform</p>
              <div class="mt-1 flex items-center justify-between">
                <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Shop Pro</h4>
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
                  <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </span>
              </div>
            </div>
          </a>

          <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/27aa90c0-b947-4bfd-b8da-7cf0ab291ab1_800w.jpg" alt="Portfolio website" class="h-48 w-full transition-transform duration-500 group-hover:scale-105 object-cover">
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-5">
              <p class="text-xs text-white/70 font-geist">Portfolio • Website</p>
              <div class="mt-1 flex items-center justify-between">
                <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Creative Hub</h4>
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
                  <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </span>
              </div>
            </div>
          </a>
        </div>

        <!-- Column 2 -->
        <div class="flex flex-col gap-4 sm:gap-5">
          <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b19e7d3a-309c-4d55-9373-80ca043c0f49_800w.jpg" alt="Product launch landing page" class="h-64 w-full object-cover transition-transform duration-500 group-hover:scale-105">
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-5">
              <p class="text-xs text-white/70 font-geist">Platform • Website</p>
              <div class="mt-1 flex items-center justify-between">
                <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Boltshift Launch</h4>
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
                  <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </span>
              </div>
            </div>
          </a>

          <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a76e4f7e-e0f8-4732-8b99-5b3abe6fd91d_800w.jpg" alt="Mobile app design" class="h-56 w-full transition-transform duration-500 group-hover:scale-105 object-cover">
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-5">
              <p class="text-xs text-white/70 font-geist">Mobile • App</p>
              <div class="mt-1 flex items-center justify-between">
                <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">FitTracker</h4>
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
                  <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </span>
              </div>
            </div>
          </a>

          <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cac77434-d322-40be-a298-4e2198a61175_800w.jpg" alt="Data visualization" class="h-56 w-full transition-transform duration-500 group-hover:scale-105 object-cover">
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-5">
              <p class="text-xs text-white/70 font-geist">Data • Visualization</p>
              <div class="mt-1 flex items-center justify-between">
                <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">DataFlow</h4>
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
                  <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </span>
              </div>
            </div>
          </a>
        </div>

        <!-- Column 3 -->
        <div class="flex flex-col gap-4 sm:gap-5">
          <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7df94c66-5d1e-4235-a476-1d2d8881a456_800w.jpg" alt="Design system" class="h-72 w-full transition-transform duration-500 group-hover:scale-105 object-cover">
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-5">
              <p class="text-xs text-white/70 font-geist">Design • System</p>
              <div class="mt-1 flex items-center justify-between">
                <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Nexus System</h4>
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
                  <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </span>
              </div>
            </div>
          </a>

          <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b1350108-f0ef-4f66-83ae-fe50447f6f74_800w.jpg" alt="Brand identity and campaign visuals" class="h-48 w-full object-cover transition-transform duration-500 group-hover:scale-105">
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-5">
              <p class="text-xs text-white/70 font-geist">Identity • Campaign</p>
              <div class="mt-1 flex items-center justify-between">
                <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">Quotient Rebrand</h4>
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
                  <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </span>
              </div>
            </div>
          </a>

          <a href="#work" class="group relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/68a7825c-0f07-4225-a8e0-d22929426aa3_800w.jpg" alt="Web application" class="h-56 w-full transition-transform duration-500 group-hover:scale-105 object-cover">
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-5">
              <p class="text-xs text-white/70 font-geist">Web • Application</p>
              <div class="mt-1 flex items-center justify-between">
                <h4 class="text-base sm:text-lg tracking-tight font-medium text-white font-geist">TaskFlow Pro</h4>
                <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
                  <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </span>
              </div>
            </div>
          </a>
        </div>
      </div>

      <div class="mt-8 sm:mt-10 flex justify-center">
        <a href="#work" class="inline-flex items-center gap-2 rounded-full bg-white ring-1 ring-neutral-200 px-5 py-3 text-sm text-neutral-700 hover:shadow font-geist">
          View All Work
          <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="arrow-up-right" class="lucide lucide-arrow-up-right w-[24px] h-[16px]" style="width: 24px; height: 16px; color: rgb(64, 64, 64);"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
        </a>
      </div>
    </section>