HeadingLarge heading

---
/**
 * HeadingLarge — grote, gecentreerde paginatitel met sub. Zware display-kop.
 *
 * Props:
 * - title?: string
 * - sub?: string
 */
interface Props {
  title?: string;
  sub?: string;
}

const { title, sub } = Astro.props;
---

<section class="bl-section hd-large-section">
  <div class="bl-inner bl-inner--narrow hd-large">
    {title && <h2 class="hd-large__title">{title}</h2>}
    {sub && <p class="hd-large__sub">{sub}</p>}
  </div>
</section>

<style>
.hd-large{text-align:center}
.hd-large__title{margin:0 0 1rem;font-size:clamp(3rem, 5vw, 5rem);font-weight:900;line-height:1;color:var(--color-primary);letter-spacing:-.03em}
.hd-large__sub{margin:0;font-size:1.15rem;color:#444;line-height:1.6}
</style>