<div class="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 m-4">
  <div class="bg-white dark:bg-zinc-800 p-4 ring-1 ring-zinc-900/5 rounded-lg shadow-lg w-full">
    <div class="flex space-x-4 animate-pulse">
      <div class="rounded-full bg-zinc-200 dark:bg-zinc-700 w-1/4 aspect-square"></div>
      <div class="flex-1 space-y-6 py-1">
        <div class="h-2 bg-zinc-200 dark:bg-zinc-700 rounded"></div>
        <div class="space-y-3">
          <div class="grid grid-cols-3 gap-4">
            <div class="h-2 bg-zinc-200 dark:bg-zinc-700 rounded col-span-2"></div>
            <div class="h-2 bg-zinc-200 dark:bg-zinc-700 rounded col-span-1"></div>
          </div>
          <div class="h-2 bg-zinc-200 dark:bg-zinc-700 rounded"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-zinc-800 p-4 ring-1 ring-zinc-900/5 rounded-lg shadow-lg w-full">
    <div class="flex-col space-y-4 animate-pulse">
      <div class="rounded-full bg-zinc-200 dark:bg-zinc-700 w-1/4 aspect-square mx-auto"></div>
      <div class="flex-1 space-y-6 py-1">
        <div class="h-2 bg-zinc-200 dark:bg-zinc-700 rounded"></div>
        <div class="h-2 bg-zinc-200 dark:bg-zinc-700 w-3/4 rounded"></div>
        <div class="h-6 bg-zinc-200 dark:bg-zinc-700 w-20 mx-auto rounded"></div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-zinc-800 p-4 ring-1 ring-zinc-900/5 rounded-lg shadow-lg w-full">
    <div class="flex-col space-y-4 animate-pulse">
      <div class="rounded bg-zinc-200 dark:bg-zinc-700 w-1/4 aspect-square mx-auto"></div>
      <div class="flex-1 space-y-6 py-1">
        <div class="h-2 bg-zinc-200 dark:bg-zinc-700 rounded"></div>
        <div class="h-2 bg-zinc-200 dark:bg-zinc-700 w-3/4 rounded"></div>
        <div class="h-6 bg-zinc-200 dark:bg-zinc-700 w-20 mx-auto rounded"></div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-zinc-800 p-4 ring-1 ring-zinc-900/5 rounded-lg shadow-lg w-full">
    <div class="flex space-x-4 animate-pulse items-center">
      <div class="rounded-full bg-zinc-200 dark:bg-zinc-700 w-1/4 aspect-square"></div>
      <div class="flex-1 space-y-6 py-1">
        <div class="h-4 bg-zinc-200 dark:bg-zinc-700 w-2/3 rounded"></div>
        <div class="h-2 bg-zinc-200 dark:bg-zinc-700 w-3/4 rounded"></div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-zinc-800 p-4 ring-1 ring-zinc-900/5 rounded-lg shadow-lg w-full">
    <div class="flex space-x-4 animate-pulse items-center">
      <div class="flex-1 space-y-6 py-1 w-1/2">
        <div class="h-4 bg-zinc-200 dark:bg-zinc-700 w-2/3 rounded"></div>
        <div class="h-2 bg-zinc-200 dark:bg-zinc-700 w-3/4 rounded"></div>
      </div>
      <div class="rounded bg-zinc-200 dark:bg-zinc-700 w-1/2 aspect-square"></div>
    </div>
  </div>
  <div class="bg-white dark:bg-zinc-800 p-4 ring-1 ring-zinc-900/5 rounded-lg shadow-lg w-full">
    <div class="flex space-x-4 animate-pulse items-center">
      <div class="rounded-tl-full rounded-tr-full bg-zinc-200 dark:bg-zinc-700 w-full aspect-video"></div>
    </div>
    <div class="flex space-x-4 animate-pulse items-center mt-4">
      <div class="rounded bg-zinc-200 dark:bg-zinc-700 w-5 aspect-square"></div>
      <div class="flex-1 space-y-6 py-1">
        <div class="h-2 bg-zinc-200 dark:bg-zinc-700 w-1/2 rounded"></div>
      </div>
    </div>
    <div class="flex space-x-4 animate-pulse items-center mt-2">
      <div class="rounded bg-zinc-200 dark:bg-zinc-700 w-5 aspect-square"></div>
      <div class="flex-1 space-y-6 py-1">
        <div class="h-2 bg-zinc-200 dark:bg-zinc-700 w-1/2 rounded"></div>
      </div>
    </div>
    <div class="flex space-x-4 animate-pulse items-center mt-2">
      <div class="rounded bg-zinc-200 dark:bg-zinc-700 w-5 aspect-square"></div>
      <div class="flex-1 space-y-6 py-1">
        <div class="h-2 bg-zinc-200 dark:bg-zinc-700 w-1/2 rounded"></div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-zinc-800 p-4 ring-1 ring-zinc-900/5 rounded-lg shadow-lg w-full">
    <div class="animate-pulse text-zinc-200 aspect-video">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 21" class="w-full h-full" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M34.97 2.622a.9.9 0 0 1 .563 1.284l-3.957 7.599c-.133.255-.474.424-.861.427-.387.003-.742-.162-.896-.415L28.2 8.853l-7.265 6.896c-.162.154-.412.25-.684.261a1.21 1.21 0 0 1-.739-.197l-7.123-5.009-7.663 7.442a.823.823 0 0 1-1.147-1.181l7.914-7.686c.16-.156.411-.254.686-.267.274-.013.546.059.743.198l7.132 5.014 7.597-7.21c.2-.19.532-.289.868-.257.337.031.628.187.763.41l1.332 2.19 3.324-6.383a.899.899 0 0 1 1.033-.452Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M.5 0a.5.5 0 0 0-.5.5V20a1 1 0 0 0 1 1h36.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-1-1V.5A.5.5 0 0 0 .5 0Z" clip-rule="evenodd"/></svg>
    </div>
  </div>
    <div class="bg-white dark:bg-zinc-800 p-4 ring-1 ring-zinc-900/5 rounded-lg shadow-lg w-full">
    <div class="animate-pulse text-zinc-200 aspect-video">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 21" class="w-full h-full" fill="none"><path fill="currentColor" d="m4.017 9.026 6-.005.007 9-6 .005zM12.014 6.02l6-.005.01 12-6 .005zM20.017 10.014l6-.005.006 8-6 .005zM29.012 3.007l6-.005.011 15-6 .005z"/><path fill="currentColor" fill-rule="evenodd" d="M.5 0a.5.5 0 0 0-.5.5V20a1 1 0 0 0 1 1h37.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-1-1V.5A.5.5 0 0 0 .5 0Z" clip-rule="evenodd"/></svg>
    </div>
  </div>
</div>