Responsive Product Recommendation Grid

<section class="sm:px-6 lg:px-8 max-w-7xl mx-auto px-4 py-12">
        <div class="flex items-end justify-between gap-4 mb-8">
          <div class="">
            <h2 class="text-3xl font-semibold tracking-tight font-geist">More from Nike</h2>
            <p class="mt-1 text-sm text-neutral-600 font-sans">Complete your athletic look</p>
          </div>
          <button class="hidden sm:inline-flex items-center gap-2 text-sm font-medium text-neutral-900 hover:text-neutral-700 transition-all duration-200 hover:scale-105 font-sans">
            View all Nike
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </button>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          <!-- Product 1 -->
          <article class="bg-white border border-neutral-200 rounded-xl overflow-hidden hover-lift cursor-pointer fade-in">
            <div class="aspect-square bg-neutral-100 overflow-hidden">
              <img src="https://cdn.midjourney.com/a18e65a9-0911-47cf-96aa-fa683126038c/0_0.png?w=800&amp;q=80" alt="Nike Air Jordan 1" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-neutral-900 mb-1 font-geist">Nike Air Jordan 1</h3>
              <p class="text-sm text-neutral-600 mb-2 font-sans">Classic high-top sneaker</p>
              <div class="flex items-center justify-between">
                <span class="text-lg font-bold font-geist">$170</span>
                <button class="p-2 rounded-md hover:bg-neutral-100 transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </button>
              </div>
            </div>
          </article>

          <!-- Product 2 -->
          <article class="bg-white border border-neutral-200 rounded-xl overflow-hidden hover-lift cursor-pointer fade-in" style="animation-delay: 0.1s;">
            <div class="aspect-square bg-neutral-100 overflow-hidden">
              <img src="https://cdn.midjourney.com/262f9267-fa07-4075-8a11-c9b836b68427/0_0.png?w=800&amp;q=80" alt="Nike Dri-FIT Shirt" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-neutral-900 mb-1 font-geist">Nike Dri-FIT Shirt</h3>
              <p class="text-sm text-neutral-600 mb-2 font-sans">Moisture-wicking tee</p>
              <div class="flex items-center justify-between">
                <span class="text-lg font-bold font-geist">$35</span>
                <button class="p-2 rounded-md hover:bg-neutral-100 transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </button>
              </div>
            </div>
          </article>

          <!-- Product 3 -->
          <article class="bg-white border border-neutral-200 rounded-xl overflow-hidden hover-lift cursor-pointer fade-in" style="animation-delay: 0.2s;">
            <div class="aspect-square bg-neutral-100 overflow-hidden">
              <img src="https://cdn.midjourney.com/b4d99e84-1d78-4120-ae49-3d553f673171/0_0.png?w=800&amp;q=80" alt="Nike Tech Fleece Hoodie" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-neutral-900 mb-1 font-geist">Nike Tech Fleece</h3>
              <p class="text-sm text-neutral-600 mb-2 font-sans">Premium hoodie</p>
              <div class="flex items-center justify-between">
                <span class="text-lg font-bold font-geist">$110</span>
                <button class="p-2 rounded-md hover:bg-neutral-100 transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </button>
              </div>
            </div>
          </article>

          <!-- Product 4 -->
          <article class="bg-white border border-neutral-200 rounded-xl overflow-hidden hover-lift cursor-pointer fade-in" style="animation-delay: 0.3s;">
            <div class="aspect-square bg-neutral-100 overflow-hidden">
              <img src="https://cdn.midjourney.com/babe9229-5cb3-4062-a0d7-fd9b345de7da/0_0.png?w=800&amp;q=80" alt="Nike Running Shorts" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-neutral-900 mb-1 font-geist">Nike Running Shorts</h3>
              <p class="text-sm text-neutral-600 mb-2 font-sans">Lightweight performance</p>
              <div class="flex items-center justify-between">
                <span class="text-lg font-bold font-geist">$45</span>
                <button class="p-2 rounded-md hover:bg-neutral-100 transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </button>
              </div>
            </div>
          </article>
        </div>
      </section>