HeadingMinimal heading

---
interface Props {
  title: string;
  sub?: string;
}
const { title = "Onze werkwijze", sub = "Eenvoud is de ultieme verfijning." } = Astro.props;
---

<div class="hd-minimal">
  <h2 class="hd-minimal__title">{title}</h2>
  {sub && <p class="hd-minimal__sub">{sub}</p>}
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .hd-minimal {
    padding: 2rem 0;
  }
  .hd-minimal__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
  }
  .hd-minimal__sub {
    margin: 0;
    font-size: 1rem;
    color: #777;
    line-height: 1.55;
  }
</style>