IconMasonry icon

---
// IconMasonry, recovered from blurr-components.pages.dev
---

<div class="imas-grid"> <div class="imas-card imas-card--lg"> <span class="imas-icon">→</span> <h3 class="imas-title">Strategie</h3> <p class="imas-desc">Doelgerichte marketingplannen afgestemd op jouw groeifase.</p> </div><div class="imas-card imas-card--sm"> <span class="imas-icon">→</span> <h3 class="imas-title">SEO</h3> <p class="imas-desc">Organische vindbaarheid.</p> </div><div class="imas-card imas-card--sm"> <span class="imas-icon">→</span> <h3 class="imas-title">Advertenties</h3> <p class="imas-desc">Betaald kanalen die rendabel converteren.</p> </div><div class="imas-card imas-card--lg"> <span class="imas-icon">→</span> <h3 class="imas-title">Design &amp; Branding</h3> <p class="imas-desc">Visuele identiteit die vertrouwen opbouwt bij iedere touchpoint in de customer journey.</p> </div><div class="imas-card imas-card--sm"> <span class="imas-icon">→</span> <h3 class="imas-title">Analytics</h3> <p class="imas-desc">Inzicht.</p> </div><div class="imas-card imas-card--sm"> <span class="imas-icon"></span> <h3 class="imas-title">Samenwerking</h3> <p class="imas-desc">Als verlengstuk van jouw team.</p> </div> </div>

<style>
.imas-grid{--color-accent: #6366f1;--color-primary: #0a0a0a;columns:2;gap:16px;padding:24px;font-family:system-ui,sans-serif}
.imas-grid{columns:1}
.imas-card{break-inside:avoid;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;margin-bottom:16px;display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .2s}
.imas-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #6366f11a}
.imas-card--lg{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-color:#c4b5fd}
.imas-icon{font-size:1.5rem}
.imas-title{margin:0;font-size:.95rem;font-weight:700;color:var(--color-primary)}
.imas-desc{margin:0;font-size:.84rem;line-height:1.6;color:#6b7280}
</style>