ListNumbered list

---
interface Props {
  items: Array<{ title: string; desc?: string }>;
}
const { items = [
  { title: "Intake & analyse", desc: "We leren jouw business grondig kennen." },
  { title: "Strategie opstellen", desc: "Maatwerk plan op basis van data." },
  { title: "Campagne lanceren", desc: "Live gaan met bewezen formats." },
  { title: "Meten & optimaliseren", desc: "Continu verbeteren op basis van resultaten." },
] } = Astro.props;
---

<ol class="lst-num">
  {items.map((item, i) => (
    <li class="lst-num__item">
      <span class="lst-num__n">{String(i + 1).padStart(2, '0')}</span>
      <div class="lst-num__body">
        <strong class="lst-num__title">{item.title}</strong>
        {item.desc && <p class="lst-num__desc">{item.desc}</p>}
      </div>
    </li>
  ))}
</ol>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-num {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .lst-num__item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #efefef;
  }
  .lst-num__item:last-child { border-bottom: none; }
  .lst-num__n {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    padding-top: 0.15rem;
    letter-spacing: 0.04em;
  }
  .lst-num__title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.2rem;
  }
  .lst-num__desc {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
  }
</style>