---
const hasHeader = Astro.slots.has("header");
const hasDefault = Astro.slots.has("default");
---

<div class="grid grid-cols-1 gap-0.5">
  {
    Astro.slots.has("header") && (
      <div>
        <slot name="header" />
      </div>
    )
  }
  {
    Astro.slots.has("default") && (
      <div class="grid grid-cols-1 gap-3">
        <slot />
      </div>
    )
  }
</div>