HeadingNumber heading

---
interface Props {
  number: string | number;
  title: string;
  sub?: string;
}
const { number = "01", title = "Strategie & Analyse", sub = "We starten altijd met diepgaand onderzoek naar jouw markt en doelgroep." } = Astro.props;
---

<div class="hd-number">
  <span class="hd-number__num">{number}</span>
  <div class="hd-number__content">
    <h2 class="hd-number__title">{title}</h2>
    {sub && <p class="hd-number__sub">{sub}</p>}
  </div>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .hd-number {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem 0;
  }
  .hd-number__num {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 900;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.25;
    flex-shrink: 0;
    letter-spacing: -0.04em;
  }
  .hd-number__content {
    padding-top: 0.5rem;
  }
  .hd-number__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.2;
  }
  .hd-number__sub {
    margin: 0;
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
  }
</style>