Alternerende feature-rijen

<!-- Alternerende feature-rijen · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="afr">
  <div class="afr__inner">
    <div class="afr__row" data-afr>
      <div class="afr__media"><div class="afr__ph"><span>01</span></div></div>
      <div class="afr__text"><span class="afr__eyebrow">/ ontdekken</span><h3>We beginnen bij jouw cijfers, niet bij een mood-board.</h3><p>Marktonderzoek, concurrentie-analyse en echte zoekdata bepalen de richting. Design volgt de strategie.</p><a href="#" class="afr__link">Hoe we werken →</a></div>
    </div>
    <div class="afr__row afr__row--rev" data-afr>
      <div class="afr__media"><div class="afr__ph afr__ph--dark"><span>02</span></div></div>
      <div class="afr__text"><span class="afr__eyebrow">/ bouwen</span><h3>Eén keer goed, gebouwd om te blijven.</h3><p>Schone code, geharde infra en metingen op alles. Je site is snel op dag één en blijft snel.</p><a href="#" class="afr__link">Bekijk de stack →</a></div>
    </div>
  </div>
</section>
</div>

/* Alternerende feature-rijen · NedDev · eigen werk. */
.afr{width:100%;box-sizing:border-box;background:#fff;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12)}
.afr__inner{max-width:900px;margin:0 auto;padding:46px 28px;box-sizing:border-box}
.afr__row{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding:24px 0}
.afr__row+.afr__row{border-top:1px solid rgba(10,10,10,.12)}
.afr__row--rev .afr__media{order:2}
.afr__media{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.afr__text{opacity:0;transform:translateY(24px);transition:opacity .7s ease .12s,transform .7s cubic-bezier(.16,1,.3,1) .12s}
.afr__row.is-in .afr__media,.afr__row.is-in .afr__text{opacity:1;transform:none}
.afr__ph{aspect-ratio:4/3;border-radius:6px;background:#f4f3f1;border:1px solid rgba(10,10,10,.12);display:flex;align-items:center;justify-content:center}
.afr__ph span{font-family:'Boldonse',sans-serif;font-size:64px;color:rgba(10,10,10,.1)}
.afr__ph--dark{background:#0a0a0a;border-color:#0a0a0a}.afr__ph--dark span{color:rgba(255,255,255,.12)}
.afr__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#F5480F}
.afr__text h3{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(22px,3vw,32px);line-height:1.04;letter-spacing:-.01em;margin:12px 0 12px}
.afr__text p{font-family:'Switzer',sans-serif;font-size:15px;line-height:1.55;color:#555;margin:0 0 16px}
.afr__link{font-family:'JetBrains Mono',monospace;font-size:12px;color:#0a0a0a;text-decoration:none;border-bottom:1px solid #F5480F;padding-bottom:2px}
.afr__link:hover{color:#F5480F}
@media(max-width:720px){.afr__row,.afr__row--rev .afr__media{grid-template-columns:1fr;order:0}.afr__row{gap:18px}}

// Alternerende feature-rijen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.afr')||root;
var rows=[].slice.call(root.querySelectorAll('[data-afr]'));
if(matchMedia('(prefers-reduced-motion: reduce)').matches){rows.forEach(function(r){r.classList.add('is-in');});}
else{var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('is-in');io.unobserve(e.target);}});},{threshold:.25});rows.forEach(function(r){io.observe(r);});}
}
init(document.querySelector('.jouw-container'));