---
const { title = await Astro.slots.render('default'), subtitle = await Astro.slots.render('subtitle') } = Astro.props;
---

<header class="mb-8 md:mb-16 text-center max-w-3xl mx-auto">
  <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading">
    {title}
  </h1>
  {
    subtitle && (
      <div class="mt-2 md:mt-3 mx-auto text-xl text-gray-500 dark:text-slate-400 font-medium" set:html={subtitle} />
    )
  }
</header>