HeadingSplit heading

---
interface Props {
  leftTitle: string;
  rightText: string;
}
const { leftTitle = "Groei begint met een strategie.", rightText = "Wij analyseren jouw markt, identificeren kansen en bouwen een plan dat werkt — niet alleen op papier, maar in de praktijk." } = Astro.props;
---

<div class="hd-split">
  <h2 class="hd-split__left">{leftTitle}</h2>
  <p class="hd-split__right">{rightText}</p>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .hd-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    padding: 3rem 0;
    border-top: 2px solid var(--color-primary);
  }
  .hd-split__left {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-primary);
    letter-spacing: -0.02em;
  }
  .hd-split__right {
    margin: 0;
    font-size: 1.1rem;
    color: #555;
    line-height: 1.7;
    border-left: 2px solid var(--color-accent);
    padding-left: 1.5rem;
  }
  @media (max-width: 680px) {
    .hd-split {
      grid-template-columns: 1fr;
    }
    .hd-split__right {
      border-left: none;
      padding-left: 0;
      border-top: 2px solid var(--color-accent);
      padding-top: 1.5rem;
    }
  }
</style>