src/components/list/ListOrdered.astro
---
// ListOrdered, recovered from blurr-components.pages.dev
---
<ol class="lst-ord"> <li class="lst-ord__item"> <span class="lst-ord__num">1</span> <div class="lst-ord__content"> <strong class="lst-ord__title">Analyseer je concurrenten</strong> <p class="lst-ord__body">Begrijp waar jij de kans hebt om op te vallen in de markt.</p> </div> </li><li class="lst-ord__item"> <span class="lst-ord__num">2</span> <div class="lst-ord__content"> <strong class="lst-ord__title">Definieer je doelgroep</strong> <p class="lst-ord__body">Wie is jouw ideale klant en wat beweegt hem of haar?</p> </div> </li><li class="lst-ord__item"> <span class="lst-ord__num">3</span> <div class="lst-ord__content"> <strong class="lst-ord__title">Kies de juiste kanalen</strong> <p class="lst-ord__body">Niet elk kanaal is geschikt voor elke business.</p> </div> </li> </ol>
<style>
.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:.2;flex-shrink:0;letter-spacing:-.04em;min-width:2.5rem;text-align:right}
.lst-ord__content{padding-top:.35rem}
.lst-ord__title{display:block;font-size:1.05rem;font-weight:700;color:var(--color-primary);margin-bottom:.3rem}
.lst-ord__body{margin:0;font-size:.9rem;color:#666;line-height:1.6}
</style>