HeroVideoGrid Hero

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

<section class="hvg" data-component="hero-video-grid"> <div class="hvg__inner"> <!-- Left --> <div class="hvg__left"> <p class="hvg__eyebrow">Digital Marketing Agency</p> <h1 class="hvg__headline">Groei die je <em>ziet</em> in de cijfers</h1> <p class="hvg__sub">Van strategie tot lancering. Wij zijn het bureau dat resultaten levert die er toe doen.</p> <a href="#" class="hvg__cta">Bekijk ons werk →</a> <div class="hvg__stats"> <div class="hvg__stat"> <div class="hvg__stat-value">80+</div> <div class="hvg__stat-label">Klanten</div> </div><div class="hvg__stat"> <div class="hvg__stat-value">4.2×</div> <div class="hvg__stat-label">Gemiddeld ROAS</div> </div><div class="hvg__stat"> <div class="hvg__stat-value">93%</div> <div class="hvg__stat-label">Retentie</div> </div> </div> </div> <!-- Right: mosaic grid --> <div class="hvg__grid"> <div class="hvg__cell hvg__cell--1"> <img data-allow-img src="/img/ext/photo-1460925895917-afdab827c52f-w600-18aff0.jpg" alt="" loading="eager" fetchpriority="high" decoding="async" > </div><div class="hvg__cell hvg__cell--2"> <img data-allow-img src="/img/ext/photo-1551434678-e076c223a692-w400-770994.jpg" alt="" loading="eager" fetchpriority="high" decoding="async" > </div><div class="hvg__cell hvg__cell--3"> <img data-allow-img src="/img/ext/photo-1611532736597-de2d4265fba3-w400-a33fbb.jpg" alt="" loading="eager" fetchpriority="high" decoding="async" > </div><div class="hvg__cell hvg__cell--4"> <img data-allow-img src="/img/ext/photo-1504868584819-f8e8b4b6d7e3-w400-b57f3e.jpg" alt="" loading="eager" fetchpriority="high" decoding="async" > </div> </div> </div> </section>

<style>
.hvg{background:var(--color-primary, #0a0a0a);color:#fff;padding:5rem 1.5rem;overflow:hidden}
.hvg__inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hvg__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:1rem}
.hvg__headline{font-size:clamp(2.5rem,4.5vw,4rem);font-weight:800;line-height:1.05;letter-spacing:-.04em;color:#fff;margin-bottom:1.25rem}
.hvg__headline em{font-style:normal;color:var(--color-accent, #6366f1)}
.hvg__sub{font-size:1.0625rem;line-height:1.65;color:#ffffffa6;margin-bottom:2rem;max-width:40ch}
.hvg__cta{display:inline-block;background:var(--color-accent, #6366f1);color:#fff;text-decoration:none;font-weight:700;font-size:.9375rem;padding:.875rem 1.75rem;border-radius:var(--radius, .5rem);transition:filter .2s,transform .2s;margin-bottom:2.5rem}
.hvg__cta:hover{filter:brightness(1.15);transform:translateY(-1px)}
.hvg__stats{display:flex;gap:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1)}
.hvg__stat-value{font-size:1.875rem;font-weight:800;color:#fff;letter-spacing:-.03em}
.hvg__stat-label{font-size:.8125rem;color:#ffffff80;margin-top:.25rem}
.hvg__grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:240px 240px;gap:.75rem}
.hvg__cell{border-radius:calc(var(--radius, .5rem) * 1.5);overflow:hidden}
.hvg__cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hvg__cell:hover img{transform:scale(1.04)}
.hvg__cell--1{grid-row:1 / 3;grid-column:1}
.hvg{padding:3.5rem 1.25rem}
.hvg__inner{grid-template-columns:1fr;gap:2.5rem}
.hvg__grid{grid-template-rows:180px 180px}
.hvg__cell--1{grid-row:1 / 3}
.hvg__stats{gap:1.5rem}
</style>