FeaturesHorizontal Sections

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

<section class="fh" data-component="features-horizontal"> <div class="fh__header"> <p class="fh__eyebrow">Waarom BLURR</p> <h2 class="fh__title">Eén bureau, <em>alle kanalen</em></h2> </div> <div class="fh__rows"> <div class="fh__row"> <div class="fh__row-img"> <img data-allow-img src="/img/ext/photo-1460925895917-afdab827c52f-w800-646ccd.jpg" alt="" loading="lazy" decoding="async" > </div> <div class="fh__row-text"> <span class="fh__label">Google Ads</span> <h3 class="fh__row-headline">Betaal alleen voor <em>resultaat</em></h3> <p class="fh__row-body">Onze Google Ads specialisten bouwen campagnes op basis van echte data. We focussen op ROAS en CPA, niet op vertoningen.</p> <a href="#" class="fh__row-cta"> Meer over Google Ads →
</a> </div> </div><div class="fh__row fh__row--reversed"> <div class="fh__row-img"> <img data-allow-img src="/img/ext/photo-1504868584819-f8e8b4b6d7e3-w800-777316.jpg" alt="" loading="lazy" decoding="async" > </div> <div class="fh__row-text"> <span class="fh__label">SEO</span> <h3 class="fh__row-headline">Gevonden worden door de <em>juiste</em> mensen</h3> <p class="fh__row-body">Van technische audit tot content strategie. Wij zorgen dat je op pagina 1 staat voor zoekwoorden die converteren.</p> <a href="#" class="fh__row-cta"> Gratis SEO audit →
</a> </div> </div><div class="fh__row"> <div class="fh__row-img"> <img data-allow-img src="/img/ext/photo-1547658719-da2b51169166-w800-cf9a9d.jpg" alt="" loading="lazy" decoding="async" > </div> <div class="fh__row-text"> <span class="fh__label">Webdesign</span> <h3 class="fh__row-headline">Websites die <em>converteren</em></h3> <p class="fh__row-body">Wij bouwen razendsnel ladende Astro websites die zijn geoptimaliseerd voor conversie en SEO.</p> <a href="#" class="fh__row-cta"> Bekijk portfolio →
</a> </div> </div> </div> </section>

<style>
.fh{background:var(--color-bg, #fff);padding:5rem 1.5rem}
.fh__header{max-width:640px;margin:0 auto 4rem;text-align:center}
.fh__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:.75rem}
.fh__title{font-size:clamp(1.875rem,3vw,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-primary, #0a0a0a)}
.fh__title em{font-style:normal;color:var(--color-accent, #6366f1)}
.fh__rows{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:5rem}
.fh__row{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.fh__row--reversed{direction:rtl}
.fh__row--reversed>{direction:ltr}
.fh__row-img img{width:100%;height:400px;object-fit:cover;border-radius:calc(var(--radius, .5rem) * 2)}
.fh__label{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent, #6366f1);background:color-mix(in srgb,var(--color-accent, #6366f1) 10%,transparent);padding:.3rem .75rem;border-radius:100px;margin-bottom:1rem}
.fh__row-headline{font-size:clamp(1.5rem,2.5vw,2.125rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--color-primary, #0a0a0a);margin-bottom:1rem}
.fh__row-headline em{font-style:normal;color:var(--color-accent, #6366f1)}
.fh__row-body{font-size:1rem;line-height:1.7;color:var(--color-muted, #6b7280);margin-bottom:1.5rem}
.fh__row-cta{display:inline-block;font-weight:700;font-size:.9375rem;color:var(--color-accent, #6366f1);text-decoration:none;transition:gap .15s}
.fh__row-cta:hover{opacity:.8}
.fh__row{grid-template-columns:1fr;gap:2rem}
.fh__row--reversed{direction:ltr}
.fh__row-img img{height:260px}
</style>