Responsive Portfolio Card Grid Section

<section class="max-w-7xl sm:px-6 sm:mt-20 mt-14 mr-auto ml-auto pr-4 pl-4">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl sm:text-2xl tracking-tight font-semibold text-white">Recent Work</h2>
        <a href="#" class="text-sm text-neutral-300 hover:text-white inline-flex items-center gap-2">
          <span>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="2" 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="grid grid-cols-1 md:grid-cols-3 gap-5">
        <!-- Card 1 -->
        <article class="group rounded-xl overflow-hidden ring-1 ring-white/10 bg-white/5">
          <div class="relative aspect-[16/10]">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c4e25fdd-1ad7-4b5d-8138-c0b5dbe0c9e2_800w.jpg" alt="3D abstract render" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
          </div>
          <div class="p-4">
            <div class="flex items-center gap-2 text-xs text-neutral-400">
              <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="box" class="lucide lucide-box w-4 h-4"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" class=""></path><path d="m3.3 7 8.7 5 8.7-5" class=""></path><path d="M12 22V12" class=""></path></svg>
              <span>3D System</span>
            </div>
            <h3 class="mt-2 text-base font-semibold tracking-tight text-white">Nebula Interface</h3>
            <p class="mt-1 text-sm text-neutral-400">Interactive motion study for modular components.</p>
          </div>
        </article>

        <!-- Card 2 -->
        <article class="group rounded-xl overflow-hidden ring-1 ring-white/10 bg-white/5">
          <div class="relative aspect-[16/10]">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e0a39d5f-b50a-4023-af86-d6cd0cd2c5c6_800w.jpg" alt="Mountain landscape" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
          </div>
          <div class="p-4">
            <div class="flex items-center gap-2 text-xs text-neutral-400">
              <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="mountain" class="lucide lucide-mountain w-4 h-4"><path d="m8 3 4 8 5-5 5 15H2L8 3z" class=""></path></svg>
              <span>Exploration</span>
            </div>
            <h3 class="mt-2 text-base font-semibold tracking-tight text-white">Summit Dashboard</h3>
            <p class="mt-1 text-sm text-neutral-400">Data viz prototypes for outdoor telemetry.</p>
          </div>
        </article>

        <!-- Card 3 -->
        <article class="group rounded-xl overflow-hidden ring-1 ring-white/10 bg-white/5">
          <div class="relative aspect-[16/10]">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/166b473a-a637-42d7-92a0-a1c7325e07cc_800w.jpg" alt="Minimal ocean scene" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">
          </div>
          <div class="p-4">
            <div class="flex items-center gap-2 text-xs text-neutral-400">
              <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 w-4 h-4"><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>Minimal</span>
            </div>
            <h3 class="mt-2 text-base font-semibold tracking-tight text-white">Tide Kit</h3>
            <p class="mt-1 text-sm text-neutral-400">A clean component set for rapid prototyping.</p>
          </div>
        </article>
      </div>
    </section>