Brand Identity Card

<article class="relative overflow-hidden lg:rounded-3xl flex flex-col min-h-[320px] lg:min-h-[400px] text-white bg-[url(https://images.unsplash.com/photo-1643780668909-580822430155?w=1080&q=80)] bg-cover rounded-2xl shadow-xl">
  <div class="relative z-10 flex flex-col grow lg:p-10 text-center pt-8 pr-8 pb-8 pl-8 items-center justify-center">
    <div class="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center mb-6 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-[32px] h-[32px]" style="color: rgb(255, 255, 255);">
        <circle cx="12" cy="12" r="10"></circle>
        <circle cx="12" cy="12" r="1"></circle>
      </svg>
    </div>
    <h2 class="lg:text-3xl text-2xl font-normal text-white tracking-tight font-instrument-serif mb-2">Prism Studio</h2>
    <p class="text-xs tracking-widest uppercase text-white/70 mb-1">Est. 2019 • Los Angeles</p>
    <p class="text-sm text-white/80 mb-8 max-w-xs">Transforming brands through motion, color, and digital artistry</p>
    <div class="flex gap-3">
      <button class="ring-1 ring-white/40 hover:bg-white/10 transition-colors text-sm font-medium text-white/90 rounded-full pt-2.5 pr-6 pb-2.5 pl-6 backdrop-blur-md">
        Watch Reel
        <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 inline mr-1">
          <polygon points="6 3 20 12 6 21 6 3"></polygon>
        </svg>
      </button>
      <button class="hover:bg-white/20 transition-colors text-sm font-medium text-white bg-white/15 rounded-full pt-2.5 pr-6 pb-2.5 pl-6 backdrop-blur-md">Projects</button>
    </div>
  </div>
</article>