TextCenteredImpact text

---
interface Props {
  text: string;
  sub?: string;
}
const { text = "Jouw concurrenten adverteren al. De vraag is: wie adverteert slimmer?", sub = "BLURR maakt het verschil." } = Astro.props;
---

<div class="tx-ci">
  <p class="tx-ci__text">{text}</p>
  {sub && <p class="tx-ci__sub">{sub}</p>}
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-ci {
    text-align: center;
    padding: 3rem 1rem;
    max-width: 720px;
    margin: 0 auto;
  }
  .tx-ci__text {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.25;
    letter-spacing: -0.02em;
  }
  .tx-ci__sub {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-accent);
  }
</style>