---
---
<div class="bg-secondary rounded-xl overflow-hidden shadow-lg h-full flex flex-col max-w-[280px] mx-auto border border-hover/30">
  <div class="relative overflow-hidden aspect-[2/3] rounded-t-xl bg-hover animate-pulse"></div>
  
  <div class="p-4 md:p-5 flex-grow flex flex-col bg-secondary relative rounded-b-xl">
    <div class="absolute -top-8 left-3 right-3 bg-hover animate-pulse h-12 rounded-lg"></div>
    
    <div class="mt-6">
      <div class="bg-hover animate-pulse h-8 w-24 rounded-full"></div>
      
      <div class="mt-3">
        <div class="flex flex-wrap gap-2">
          {[1, 2, 3].map(() => (
            <div class="bg-hover animate-pulse h-6 w-16 rounded-full"></div>
          ))}
        </div>
      </div>
    </div>
    
    <div class="mt-auto pt-4 flex items-center justify-between">
      <div class="bg-hover animate-pulse h-4 w-32 rounded"></div>
      <div class="bg-hover animate-pulse h-4 w-20 rounded"></div>
    </div>
  </div>
</div>