Responsive Recent Work Portfolio Grid

<section id="work" class="max-w-7xl sm:px-6 sm:mt-20 border-black/5 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-gray-700 hover:text-gray-900">
          <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 grid grid-cols-1 md:grid-cols-3 gap-5">
        <!-- Card 1 -->
        <article class="group overflow-hidden rounded-2xl border border-black/5 bg-white">
          <div class="relative aspect-[16/10]">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6595dc59-1c6b-45fa-b6fa-596b47a99f7c_800w.jpg" alt="Fintech dashboard design" 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/10 via-transparent to-transparent"></div>
          </div>
          <div class="p-4 border-t border-black/5">
            <div class="flex items-center gap-2 text-xs text-gray-500">
              <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="monitor" class="lucide lucide-monitor w-4 h-4"><rect width="20" height="14" x="2" y="3" rx="2" class=""></rect><line x1="8" x2="16" y1="21" y2="21" class=""></line><line x1="12" x2="12" y1="17" y2="21" class=""></line></svg>
              <span>Product Design</span>
            </div>
            <h3 class="mt-2 text-base font-semibold tracking-tight">Atlas Analytics</h3>
            <p class="text-sm text-gray-600 mt-1">Realtime dashboard for a fintech platform.</p>
          </div>
        </article>

        <!-- Card 2 -->
        <article class="group overflow-hidden rounded-2xl border border-black/5 bg-white">
          <div class="relative aspect-[16/10]">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b2935f88-b46a-4628-bd14-9d912c5060ee_1600w.jpg" alt="Mobile app design" 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/10 via-transparent to-transparent"></div>
          </div>
          <div class="p-4 border-t border-black/5">
            <div class="flex items-center gap-2 text-xs text-gray-500">
              <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="smartphone" class="lucide lucide-smartphone w-4 h-4"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect><path d="M12 18h.01" class=""></path></svg>
              <span>Mobile</span>
            </div>
            <h3 class="mt-2 text-base font-semibold tracking-tight">Tempo Health</h3>
            <p class="text-sm text-gray-600 mt-1">Companion app for remote care.</p>
          </div>
        </article>

        <!-- Card 3 -->
        <article class="group overflow-hidden rounded-2xl border border-black/5 bg-white">
          <div class="relative aspect-[16/10]">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/109e8c99-f7f6-4bd2-8398-d4646bff4b4f_800w.jpg" alt="Marketing website design" 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/10 via-transparent to-transparent"></div>
          </div>
          <div class="p-4 border-t border-black/5">
            <div class="flex items-center gap-2 text-xs text-gray-500">
              <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="globe" class="lucide lucide-globe w-4 h-4"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path><path d="M2 12h20" class=""></path></svg>
              <span>Web</span>
            </div>
            <h3 class="mt-2 text-base font-semibold tracking-tight">Nexus Commerce</h3>
            <p class="text-sm text-gray-600 mt-1">High‑converting storefront experience.</p>
          </div>
        </article>
      </div>
    </section>