ListOrdered list

---
interface Props {
  items: Array<{ title: string; body: string }>;
}
const { items = [
  { title: "Analyseer je concurrenten", body: "Begrijp waar jij de kans hebt om op te vallen in de markt." },
  { title: "Definieer je doelgroep", body: "Wie is jouw ideale klant en wat beweegt hem of haar?" },
  { title: "Kies de juiste kanalen", body: "Niet elk kanaal is geschikt voor elke business." },
  { title: "Meet alles van dag één", body: "Zonder data maak je beslissingen op gevoel — niet slim." },
] } = Astro.props;
---

<ol class="lst-ord">
  {items.map((item, i) => (
    <li class="lst-ord__item">
      <span class="lst-ord__num">{i + 1}</span>
      <div class="lst-ord__content">
        <strong class="lst-ord__title">{item.title}</strong>
        <p class="lst-ord__body">{item.body}</p>
      </div>
    </li>
  ))}
</ol>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-ord {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }
  .lst-ord__item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
  }
  .lst-ord__num {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.2;
    flex-shrink: 0;
    letter-spacing: -0.04em;
    min-width: 2.5rem;
    text-align: right;
  }
  .lst-ord__content { padding-top: 0.35rem; }
  .lst-ord__title {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.3rem;
  }
  .lst-ord__body {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
  }
</style>