IconTeam icon

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

<section class="itm"> <h2 class="itm__title">Ons team</h2> <div class="itm__grid"> <div class="itm__card"> <div class="itm__avatar" aria-hidden="true"> Lv </div> <div class="itm__info"> <p class="itm__name">Lotte van den Berg</p> <p class="itm__role">Strategy Director</p> <div class="itm__skills"> <span class="itm__skill">→ Strategie</span><span class="itm__skill">→ Analytics</span><span class="itm__skill"> B2B</span> </div> </div> </div><div class="itm__card"> <div class="itm__avatar" aria-hidden="true"> DV </div> <div class="itm__info"> <p class="itm__name">Daan Visser</p> <p class="itm__role">Creative Director</p> <div class="itm__skills"> <span class="itm__skill"> Design</span><span class="itm__skill">→ Branding</span><span class="itm__skill"> Video</span> </div> </div> </div><div class="itm__card"> <div class="itm__avatar" aria-hidden="true"> Ed </div> <div class="itm__info"> <p class="itm__name">Emma de Vries</p> <p class="itm__role">Performance Lead</p> <div class="itm__skills"> <span class="itm__skill">→ Google Ads</span><span class="itm__skill"> Meta</span><span class="itm__skill">→ E-commerce</span> </div> </div> </div><div class="itm__card"> <div class="itm__avatar" aria-hidden="true"> NS </div> <div class="itm__info"> <p class="itm__name">Noah Smit</p> <p class="itm__role">Tech Lead</p> <div class="itm__skills"> <span class="itm__skill">→ Web</span><span class="itm__skill">→ Astro</span><span class="itm__skill"> SEO</span> </div> </div> </div> </div> </section>

<style>
.itm{padding:2rem 0}
.itm__title{font-size:2rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 2rem;text-align:center}
.itm__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.itm__card{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;background:#fff;border:1px solid #eee;border-radius:12px;transition:box-shadow .2s}
.itm__card:hover{box-shadow:0 4px 16px #00000012}
.itm__avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent, #6366f1) 0%,#818cf8 100%);color:#fff;font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.itm__info{flex:1;min-width:0}
.itm__name{font-size:.95rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .15rem}
.itm__role{font-size:.8rem;color:var(--color-accent, #6366f1);margin:0 0 .75rem;font-weight:600}
.itm__skills{display:flex;flex-wrap:wrap;gap:.4rem}
.itm__skill{font-size:.72rem;background:#f0f0ff;color:#555;padding:.2rem .5rem;border-radius:4px;font-weight:500}
.itm__grid{grid-template-columns:1fr}
</style>