src/components/icon/IconColumns.astro
---
// IconColumns, recovered from blurr-components.pages.dev
---
<section class="icol-section"> <h2 class="icol-headline">Wat BLURR voor jou doet</h2> <div class="icol-grid"> <div class="icol-col"> <div class="icol-icon">→</div> <h3 class="icol-title">Gerichte strategie</h3> <p class="icol-desc">Geen losse acties maar een samenhangende aanpak die aansluit op jouw groeifase en budget.</p> </div><div class="icol-col"> <div class="icol-icon">→</div> <h3 class="icol-title">Snelle uitvoering</h3> <p class="icol-desc">Van idee naar live campagne in twee weken. Wij bewegen snel zonder in te leveren op kwaliteit.</p> </div><div class="icol-col"> <div class="icol-icon">→</div> <h3 class="icol-title">Meetbare groei</h3> <p class="icol-desc">Transparante rapportages die aantonen wat de investering oplevert, elke maand opnieuw.</p> </div> </div> </section>
<style>
.icol-section{--color-accent: #6366f1;--color-primary: #0a0a0a;padding:56px 24px;font-family:system-ui,sans-serif;max-width:960px;margin:0 auto}
.icol-headline{text-align:center;font-size:1.75rem;font-weight:800;color:var(--color-primary);margin:0 0 40px}
.icol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.icol-grid{grid-template-columns:1fr}
.icol-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.icol-icon{font-size:2.2rem;line-height:1}
.icol-title{margin:0;font-size:1.05rem;font-weight:700;color:var(--color-primary)}
.icol-desc{margin:0;font-size:.9rem;line-height:1.65;color:#4b5563}
</style>