Tailwind Responsive Portfolio Cards Grid

<section class="relative">
      <div class="max-w-7xl md:px-8 mr-auto ml-auto pr-6 pb-24 pl-6">
        <div class="mx-auto max-w-3xl text-center">
          <h2 class="text-3xl md:text-4xl tracking-tight text-white font-manrope font-medium" style="">Selected Work</h2>
          <p class="mt-3 text-sm md:text-base text-neutral-300 font-sans" style="">Strategy-led direction and tasteful execution across identity, web, and motion.</p>
        </div>

        <div class="mt-10 grid grid-cols-1 gap-6 md:grid-cols-2">
          <!-- Card 1 -->
          <a href="#" class="group overflow-hidden rounded-3xl bg-neutral-900/70 ring-1 ring-white/10 backdrop-blur hover:ring-white/20 transition">
            <div class="aspect-[16/10] w-full overflow-hidden">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/490c8ca8-008e-410e-8e61-2c3781f58e9f_1600w.jpg" alt="3D abstract render" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]" style="">
            </div>
            <div class="p-5">
              <div class="flex items-center justify-between">
                <h3 class="text-xl tracking-tight font-medium text-white font-sans" style="">Nimbus Identity System</h3>
                <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 h-4 w-4 text-neutral-400"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
              </div>
              <p class="mt-2 text-sm text-neutral-300 font-sans" style="">A modular brand kit for a climate analytics platform.</p>
            </div>
          </a>

          <!-- Card 2 -->
          <a href="#" class="group overflow-hidden rounded-3xl bg-neutral-900/70 ring-1 ring-white/10 backdrop-blur hover:ring-white/20 transition">
            <div class="aspect-[16/10] w-full overflow-hidden">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5d13224d-5157-4e3e-91c5-4debb76e73df_800w.jpg" alt="Minimal mountain" class="h-full w-full transition duration-500 group-hover:scale-[1.03] object-cover" style="">
            </div>
            <div class="p-5">
              <div class="flex items-center justify-between">
                <h3 class="text-xl tracking-tight font-medium text-white font-sans" style="">Opal Product Launch</h3>
                <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 h-4 w-4 text-neutral-400"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
              </div>
              <p class="mt-2 text-sm text-neutral-300 font-sans" style="">Site, motion, and content system for a developer tool.</p>
            </div>
          </a>

          <!-- Card 3 -->
          <a href="#" class="group overflow-hidden rounded-3xl bg-neutral-900/70 ring-1 ring-white/10 backdrop-blur hover:ring-white/20 transition md:col-span-2">
            <div class="aspect-[21/9] w-full overflow-hidden">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/98da3ebc-16c2-4776-962a-febe1bb9e426_1600w.jpg" alt="Minimal portrait lighting" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]" style="">
            </div>
            <div class="p-5">
              <div class="flex items-center justify-between">
                <h3 class="text-xl tracking-tight font-medium text-white font-sans" style="">Asteron Visual Language</h3>
                <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 h-4 w-4 text-neutral-400"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
              </div>
              <p class="mt-2 text-sm text-neutral-300 font-sans" style="">A cohesive system spanning UI, iconography, and motion.</p>
            </div>
          </a>
        </div>
      </div>
    </section>