src/components/list/ListProcess.astro
---
// ListProcess, recovered from blurr-components.pages.dev
---
<div class="lst-proc"> <div class="lst-proc__step"> <div class="lst-proc__left"> <div class="lst-proc__circle">01</div> <div class="lst-proc__line"></div> </div> <div class="lst-proc__content"> <strong class="lst-proc__title">Kennismaking</strong> <p class="lst-proc__desc">Gratis gesprek om jouw doelen te begrijpen.</p> </div> </div><div class="lst-proc__step"> <div class="lst-proc__left"> <div class="lst-proc__circle">02</div> <div class="lst-proc__line"></div> </div> <div class="lst-proc__content"> <strong class="lst-proc__title">Strategie</strong> <p class="lst-proc__desc">Maatwerk plan op basis van jouw markt.</p> </div> </div><div class="lst-proc__step"> <div class="lst-proc__left"> <div class="lst-proc__circle">03</div> <div class="lst-proc__line"></div> </div> <div class="lst-proc__content"> <strong class="lst-proc__title">Executie</strong> <p class="lst-proc__desc">Wij gaan live met campagnes en content.</p> </div> </div><div class="lst-proc__step"> <div class="lst-proc__left"> <div class="lst-proc__circle">04</div> </div> <div class="lst-proc__content"> <strong class="lst-proc__title">Groeien</strong> <p class="lst-proc__desc">Optimaliseren tot de resultaten spreken.</p> </div> </div> </div>
<style>
.lst-proc{display:flex;flex-direction:column}
.lst-proc__step{display:flex;gap:1.25rem}
.lst-proc__left{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.lst-proc__circle{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--color-accent);color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.04em}
.lst-proc__line{width:2px;flex:1;background:#e5e5e5;min-height:1.5rem;margin:.2rem 0}
.lst-proc__content{padding-bottom:1.75rem;padding-top:.25rem}
.lst-proc__title{display:block;font-size:.975rem;font-weight:700;color:var(--color-primary);margin-bottom:.2rem}
.lst-proc__desc{margin:0;font-size:.875rem;color:#666;line-height:1.55}
</style>