Media Between Text Nieuw

<!-- Media Between Text · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="mbt"><span class="mbt__kick">Timmerbedrijf de Wit · Gouda</span><h3 class="mbt__h"><span>Wij</span><span class="mbt__m" aria-hidden="true"><span class="mbt__img"><i></i><i></i><i></i></span></span><span>bouwen</span><br><span>op maat.</span></h3><p class="mbt__sub">Keukens, kasten en trappen uit eigen werkplaats.</p></div>
</div>

/* Media Between Text · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.mbt{position:absolute;inset:0;background:#f4f3f1;padding:18px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;container-type:size;cursor:pointer}
.mbt__kick{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#F5480F}
.mbt__h{margin:10px 0 10px;font:800 min(8.4cqw,15cqh)/1.3 'Boldonse','Switzer',system-ui,sans-serif;font-synthesis:none;color:#0a0a0a}
.mbt__m{display:inline-block;vertical-align:middle;width:0;height:.95em;margin:0 .14em;overflow:hidden;border-radius:4px;transition:width .9s cubic-bezier(.65,0,.2,1),margin .9s;position:relative;top:-.08em}
.mbt.is-open .mbt__m{width:3.6em;margin:0 .28em}
.mbt__img{position:absolute;inset:0;width:3.6em;background:linear-gradient(180deg,#F5480F 0%,#f98a5f 55%,#e9e3da 55%);overflow:hidden}
.mbt__img i{position:absolute;bottom:0;background:#0a0a0a;border-radius:1px 1px 0 0}
.mbt__img i:nth-child(1){left:8%;width:22%;height:62%;background:repeating-linear-gradient(0deg,#0a0a0a 0 4px,#3a3a3a 4px 5px)}
.mbt__img i:nth-child(2){left:36%;width:30%;height:44%;background:#2b2b2b}
.mbt__img i:nth-child(3){left:72%;width:18%;height:78%;background:repeating-linear-gradient(90deg,#0a0a0a 0 3px,#454545 3px 5px)}
.mbt__sub{margin:0;font-size:13px;color:rgba(10,10,10,.7)}
@media(prefers-reduced-motion:reduce){.mbt__m{transition:none}}

// Media Between Text · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.mbt')||root;root.addEventListener('click',function(){root.classList.toggle('is-open');});
if('IntersectionObserver' in window){var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){setTimeout(function(){root.classList.add('is-open');},250);io.disconnect();}},{threshold:.4});io.observe(root);}else root.classList.add('is-open');
}
init(document.querySelector('.jouw-container'));