HeadingStacked heading

---
interface Props {
  small: string;
  large: string;
}
const { small = "Onze belofte aan jou", large = "Meetbaar resultaat of je geld terug." } = Astro.props;
---

<div class="hd-stacked">
  <p class="hd-stacked__small">{small}</p>
  <h2 class="hd-stacked__large">{large}</h2>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .hd-stacked {
    padding: 3rem 0;
    text-align: center;
  }
  .hd-stacked__small {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .hd-stacked__large {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1.05;
    color: var(--color-primary);
    letter-spacing: -0.03em;
    max-width: 800px;
    margin: 0 auto;
  }
</style>