TextNote text

---
interface Props {
  number?: string | number;
  text: string;
}
const { number = 1, text = "ROAS staat voor Return on Ad Spend: de verhouding tussen gegenereerde omzet en het bestede advertentiebudget. Een ROAS van 4× betekent dat elke euro advertentiekosten €4 omzet oplevert." } = Astro.props;
---

<aside class="tx-note">
  <span class="tx-note__num">{number}</span>
  <p class="tx-note__text">{text}</p>
</aside>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-note {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.6rem 0;
    border-top: 1px solid #ebebeb;
  }
  .tx-note__num {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--color-accent);
    flex-shrink: 0;
    padding-top: 0.1rem;
  }
  .tx-note__text {
    margin: 0;
    font-size: 0.825rem;
    color: #777;
    line-height: 1.6;
  }
</style>