---
import DirectusImg from "./DirectusImg.astro"
---

<div class="hero h-screen">
  <DirectusImg
    src="1f836313-ee59-4840-8da7-5cc6cb874a61"
    widths={[256]}
    format="webp"
    class="absolute w-full h-full object-cover blur-sm"
    alt=""
  />

  <DirectusImg
    src="1f836313-ee59-4840-8da7-5cc6cb874a61"
    widths={[3840, 1920, 1080, 720]}
    format="webp"
    class="absolute w-full h-full object-cover transition-opacity ease-in duration-500 opacity-0"
    onload="this.style.opacity = 1"
    alt=""
  />

  <div class="hero-content">
    <div
      class="card rounded-none border border-white max-w-xl bg-base-100/80 shadow-[0_0_50px_rgba(255,255,255,0.8)]"
    >
      <div class="card-body text-center">
        <slot />
      </div>
    </div>
  </div>
</div>