Responsive Portfolio Grid with Image Hover Overlays

<section class="sm:px-6 md:px-10 w-full max-w-7xl mr-auto mb-20 ml-auto pr-4 pl-4">
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4">

    <!-- Project 1 - Large -->
    <article
      class="project-item md:col-span-2 md:row-span-2 relative overflow-hidden bg-center group cursor-pointer transition-all duration-300 hover:shadow-xl hover:border-neutral-300 h-full bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6442f8b2-3d30-4884-9f30-adcfcc0043c0_800w.jpg)] bg-cover border-neutral-200 border rounded-2xl"
      data-category="identity">
      <div
        class="absolute inset-0 group-hover:from-black/80 transition-all duration-500 bg-gradient-to-t from-black/60 via-black/20 to-transparent h-full">
      </div>
      <div class="absolute top-4 left-4 flex gap-2">
        <span class="inline-flex items-center text-xs text-white/90 bg-black/30 border border-white/20 rounded-full px-3 py-1.5 backdrop-blur transition-all duration-300 group-hover:bg-black/40">Brand Identity</span>
        <span class="inline-flex items-center text-xs text-white/90 bg-black/30 border border-white/20 rounded-full px-3 py-1.5 backdrop-blur transition-all duration-300 group-hover:bg-black/40">2024</span>
      </div>
      <div
        class="absolute bottom-4 left-4 right-4 transform transition-all duration-300 group-hover:translate-y-[-4px]">
        <h3 class="text-white text-xl sm:text-2xl font-medium tracking-tight leading-tight mb-2">Neon Ritual</h3>
        <p class="text-white/80 text-sm leading-relaxed">Complete rebrand for underground music venue, featuring
          neon-inspired typography and immersive visual identity system.</p>
        <div class="flex items-center gap-4 mt-4 text-white/60 text-xs">
          <span class="">Music &amp; Entertainment</span>
          <span>•</span>
          <span class="">New York</span>
        </div>
      </div>
    </article>

    <!-- Project 2 -->
    <article
      class="project-item relative overflow-hidden bg-cover border border-neutral-200 rounded-2xl bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/71f7b8bc-6bae-401a-b7fd-461564dbd7b0_800w.jpg)] bg-center group cursor-pointer transition-all duration-300 hover:shadow-xl hover:border-neutral-300 aspect-square"
      data-category="web">
      <div
        class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent group-hover:from-black/80 transition-all duration-500">
      </div>
      <div class="absolute top-4 left-4 flex gap-2">
        <span class="inline-flex items-center text-xs text-white/90 bg-black/30 border border-white/20 rounded-full px-3 py-1.5 backdrop-blur transition-all duration-300 group-hover:bg-black/40">Web Design</span>
      </div>
      <div
        class="absolute bottom-4 left-4 right-4 transform transition-all duration-300 group-hover:translate-y-[-4px]">
        <h3 class="text-white text-lg font-medium tracking-tight leading-tight mb-2">Soft Minimal</h3>
        <p class="text-white/80 text-sm leading-relaxed">E-commerce platform for sustainable fashion brand with clean,
          minimal interface.</p>
      </div>
    </article>

    <!-- Project 3 -->
    <article
      class="project-item relative overflow-hidden bg-cover border border-neutral-200 rounded-2xl bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/14590110-b7b4-428d-bf0c-a85921aa5058_800w.jpg)] bg-center group cursor-pointer transition-all duration-300 hover:shadow-xl hover:border-neutral-300 aspect-square"
      data-category="campaign">
      <div
        class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent group-hover:from-black/80 transition-all duration-500">
      </div>
      <div class="absolute top-4 left-4">
        <span class="inline-flex items-center text-xs text-white/90 bg-black/30 border border-white/20 rounded-full px-3 py-1.5 backdrop-blur transition-all duration-300 group-hover:bg-black/40">Campaign</span>
      </div>
      <div
        class="absolute bottom-4 left-4 right-4 transform transition-all duration-300 group-hover:translate-y-[-4px]">
        <h3 class="text-white text-lg font-medium tracking-tight leading-tight mb-2">Desert Bloom</h3>
        <p class="text-white/80 text-sm leading-relaxed">Wellness retreat campaign celebrating natural beauty and
          mindfulness.</p>
      </div>
    </article>

    <!-- Project 4 -->
    <article
      class="project-item md:col-span-2 relative overflow-hidden bg-cover border border-neutral-200 rounded-2xl bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2977947c-4a50-48ff-9019-0950ce76ba7a_800w.jpg)] bg-center group cursor-pointer transition-all duration-300 hover:shadow-xl hover:border-neutral-300 aspect-[2/1]"
      data-category="web">
      <div
        class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent group-hover:from-black/80 transition-all duration-500">
      </div>
      <div class="absolute top-4 left-4">
        <span class="inline-flex items-center text-xs text-white/90 bg-black/30 border border-white/20 rounded-full px-3 py-1.5 backdrop-blur transition-all duration-300 group-hover:bg-black/40">Motion</span>
      </div>
      <div
        class="absolute bottom-4 left-4 right-4 transform transition-all duration-300 group-hover:translate-y-[-4px]">
        <h3 class="text-white text-xl font-medium tracking-tight leading-tight mb-2">Nocturne</h3>
        <p class="text-white/80 text-sm leading-relaxed">Animated brand identity and motion graphics for tech startup
          launch.</p>
        <div class="flex items-center gap-4 mt-4 text-white/60 text-xs">
          <span>Technology</span>
          <span>•</span>
          <span class="">Berlin</span>
        </div>
      </div>
    </article>

    <!-- Project 5 -->
    <article
      class="project-item relative overflow-hidden bg-center group cursor-pointer transition-all duration-300 hover:shadow-xl hover:border-neutral-300 h-full bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/94f85473-10ec-40cb-b97f-ff3b6f076199_800w.jpg)] bg-cover border-neutral-200 border rounded-2xl"
      data-category="identity">
      <div
        class="absolute inset-0 group-hover:from-black/80 transition-all duration-500 bg-gradient-to-t from-black/60 via-black/20 to-transparent">
      </div>
      <div class="absolute top-4 left-4">
        <span class="inline-flex items-center text-xs text-white/90 bg-black/30 border border-white/20 rounded-full px-3 py-1.5 backdrop-blur transition-all duration-300 group-hover:bg-black/40">Identity</span>
      </div>
      <div
        class="absolute bottom-4 left-4 right-4 transform transition-all duration-300 group-hover:translate-y-[-4px]">
        <h3 class="text-white text-lg font-medium tracking-tight leading-tight mb-2">Terra Wellness</h3>
        <p class="text-white/80 text-sm leading-relaxed">Holistic wellness brand identity with earthy aesthetics and
          premium packaging.</p>
      </div>
    </article>

    <!-- Project 6 -->
    <article
      class="project-item relative overflow-hidden bg-center group cursor-pointer transition-all duration-300 hover:shadow-xl hover:border-neutral-300 h-full bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3df10614-4cdb-4e4f-9e1d-19959aed90a0_800w.jpg)] bg-cover border-neutral-200 border rounded-2xl"
      data-category="identity">
      <div
        class="absolute inset-0 group-hover:from-black/80 transition-all duration-500 bg-gradient-to-t from-black/60 via-black/20 to-transparent">
      </div>
      <div class="absolute top-4 left-4">
        <span class="inline-flex items-center text-xs text-white/90 bg-black/30 border border-white/20 rounded-full px-3 py-1.5 backdrop-blur transition-all duration-300 group-hover:bg-black/40">Identity</span>
      </div>
      <div
        class="absolute bottom-4 left-4 right-4 transform transition-all duration-300 group-hover:translate-y-[-4px]">
        <h3 class="text-white text-lg font-medium tracking-tight leading-tight mb-2">Coastal Coffee</h3>
        <p class="text-white/80 text-sm leading-relaxed">Artisan coffee roastery brand with coastal-inspired identity
          and packaging.</p>
      </div>
    </article>

    <!-- Project 7 -->
    <article
      class="project-item md:col-span-2 relative overflow-hidden bg-center group cursor-pointer transition-all duration-300 hover:shadow-xl hover:border-neutral-300 aspect-[2/1] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/df528971-1835-44e0-b06b-c0e517476a73_800w.jpg)] bg-cover border-neutral-200 border rounded-2xl"
      data-category="web">
      <div
        class="absolute inset-0 group-hover:from-black/80 transition-all duration-500 bg-gradient-to-t from-black/60 via-black/20 to-transparent">
      </div>
      <div class="absolute top-4 left-4">
        <span class="inline-flex items-center text-xs text-white/90 bg-black/30 border border-white/20 rounded-full px-3 py-1.5 backdrop-blur transition-all duration-300 group-hover:bg-black/40">Web App</span>
      </div>
      <div
        class="absolute bottom-4 left-4 right-4 transform transition-all duration-300 group-hover:translate-y-[-4px]">
        <h3 class="text-white text-xl font-medium tracking-tight leading-tight mb-2">Flow Design System</h3>
        <p class="text-white/80 text-sm leading-relaxed">Comprehensive design system for SaaS productivity platform with
          components and guidelines.</p>
        <div class="flex items-center gap-4 mt-4 text-white/60 text-xs">
          <span class="">Technology</span>
          <span>•</span>
          <span>Remote</span>
        </div>
      </div>
    </article>

    <!-- Project 8 -->


  </div>
</section>