HeadingHighlight heading

---
/**
 * HeadingHighlight — sectiekop waarin een woordgroep met een marker-stift wordt
 * gemarkeerd, plus sub. Titel = before + highlight + after.
 *
 * Props:
 * - before?: string
 * - highlight?: string
 * - after?: string
 * - sub?: string
 */
interface Props {
  before?: string;
  highlight?: string;
  after?: string;
  sub?: string;
}

const { before, highlight, after, sub } = Astro.props;
---

<section class="bl-section hd-highlight-section">
  <div class="bl-inner hd-highlight">
    <h2 class="hd-highlight__title">
      {before && <span>{before}</span>}
      {highlight && <mark class="hd-highlight__mark">{highlight}</mark>}
      {after && <span>{after}</span>}
    </h2>
    {sub && <p class="hd-highlight__sub">{sub}</p>}
  </div>
</section>

<style>
.hd-highlight__title{margin:0 0 1rem;font-size:clamp(2rem,5vw,3.25rem);font-weight:800;color:var(--color-primary);line-height:1.2;letter-spacing:-.02em;max-width:720px}
.hd-highlight__mark{background:linear-gradient(to bottom,transparent 55%,rgba(99,102,241,.25) 55%);color:inherit;padding:0 .1em}
.hd-highlight__sub{margin:0;font-size:1.0625rem;color:#444;line-height:1.65}
</style>