Featured Work Card

<article class="relative overflow-hidden lg:rounded-3xl md:col-span-2 lg:col-span-1 group bg-[url(https://images.unsplash.com/photo-1724525647065-f948fc102e68?w=1080&q=80)] bg-cover rounded-2xl shadow-xl backdrop-blur-lg w-[400px]">
  <div class="relative z-10 flex flex-col h-full lg:p-8 min-h-[320px] lg:min-h-[400px] pt-6 pr-6 pb-6 pl-6 justify-between">
    <div class="flex items-start justify-between">
      <div class="flex flex-wrap gap-2">
        <span class="px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wider text-white/90 ring-1 ring-white/30 bg-white/15 backdrop-blur-sm">Adobe After Effects</span>
        <span class="px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wider text-white/90 ring-1 ring-white/30 bg-white/15 backdrop-blur-sm">Cinema 4D</span>
      </div>
      <button class="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors backdrop-blur-sm">
        <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" class="w-4 h-4 text-white">
          <path d="M15 3h6v6"></path>
          <path d="M10 14 21 3"></path>
          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
        </svg>
      </button>
    </div>
    <div class="mt-auto">
      <h3 class="text-5xl font-normal text-white tracking-tighter font-bricolage mb-2">Nike Air Max Campaign</h3>
      <blockquote class="mb-4">
        <p class="text-sm leading-relaxed text-white/85">
          "Every pixel tells a story. We craft motion narratives that don't just catch eyes—they capture hearts and drive action."
        </p>
        <footer class="mt-3 flex items-center gap-3">
          <img src="https://images.unsplash.com/photo-1560918801-53fe5c710a80?w=1080&q=80" alt="Maria Santos" class="w-8 h-8 object-cover rounded-full">
          <div class="text-xs">
            <div class="text-white/90 font-medium">Maria Santos</div>
            <div class="text-white/60">Creative Director</div>
          </div>
        </footer>
      </blockquote>
    </div>
  </div>
</article>