Bento Feature Grid

<!-- Bento Feature Grid · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="bfg">
  <div class="bfg__inner">
    <header class="bfg__head"><span class="bfg__eyebrow">/ alles op zijn plek</span><h2 class="bfg__h2">Een platform dat past.</h2></header>
    <div class="bfg__grid">
      <article class="bfg__cell bfg__cell--big bfg__dark">
        <span class="bfg__tag">/ core</span>
        <h3>Snelheid is geen feature.<br>Het is de basis.</h3>
        <p>Edge-rendering, geoptimaliseerde assets, sub-seconde laadtijd. Standaard.</p>
        <span class="bfg__metric">0.4s <small>LCP</small></span>
      </article>
      <article class="bfg__cell bfg__beton"><span class="bfg__tag">/ design</span><h4>Maatwerk UI</h4><p>Geen sjablonen.</p></article>
      <article class="bfg__cell bfg__accent"><span class="bfg__tag">/ seo</span><h4>Vindbaar</h4><p>Top-3 gericht.</p></article>
      <article class="bfg__cell bfg__beton bfg__wide"><span class="bfg__tag">/ infra</span><h4>Geharde hosting & 24/7 monitoring</h4><p>Hetzner + Cloudflare, security-stack en alerts op elk project.</p></article>
    </div>
  </div>
</section>
</div>

/* Bento Feature Grid · NedDev · eigen werk. */
.bfg{width:100%;box-sizing:border-box;background:#fff;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12)}
.bfg__inner{max-width:900px;margin:0 auto;padding:48px 28px;box-sizing:border-box}
.bfg__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#F5480F}
.bfg__h2{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;margin:12px 0 28px;line-height:1}
.bfg__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:128px;gap:14px}
.bfg__cell{border-radius:6px;padding:22px;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(10,10,10,.12);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.bfg__cell:hover{transform:translateY(-4px)}
.bfg__cell--big{grid-column:span 2;grid-row:span 2;justify-content:flex-end}
.bfg__wide{grid-column:span 1;grid-row:span 1}
.bfg__tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;opacity:.7}
.bfg__cell h3{font-family:'Boldonse',sans-serif;font-weight:400;font-size:clamp(20px,2.6vw,30px);line-height:1.02;margin:0 0 10px;letter-spacing:-.01em}
.bfg__cell h4{font-family:'Switzer',sans-serif;font-weight:600;font-size:16px;margin:auto 0 6px}
.bfg__cell p{font-family:'Switzer',sans-serif;font-size:13px;line-height:1.45;margin:0;opacity:.8}
.bfg__dark{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.bfg__dark .bfg__tag{color:#F5480F;opacity:1}
.bfg__metric{font-family:'Boldonse',sans-serif;font-size:30px;color:#F5480F;margin-top:14px}
.bfg__metric small{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.5)}
.bfg__beton{background:#f4f3f1}
.bfg__accent{background:#F5480F;color:#0a0a0a;border-color:#F5480F}
.bfg__accent .bfg__tag{opacity:.8}
@media(max-width:720px){.bfg__grid{grid-template-columns:1fr 1fr;grid-auto-rows:120px}.bfg__cell--big{grid-column:span 2}}