VideoSplitScreen video

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

<section class="vss"> <h2 class="vss__title">Het verschil in één oogopslag</h2> <div class="vss__wrapper"> <div class="vss__panel vss__panel--left"> <div class="vss__media"> <div class="vss__placeholder vss__placeholder--left" aria-label="Optie A"></div> </div> <div class="vss__meta"> <p class="vss__label">Zonder BLURR</p> <p class="vss__desc">Gefragmenteerd, duur en zonder duidelijke richting.</p> </div> </div> <div class="vss__divider" aria-label="VS"> <span class="vss__divider-text">VS</span> </div> <div class="vss__panel vss__panel--right"> <div class="vss__media"> <div class="vss__placeholder vss__placeholder--right" aria-label="Optie B"></div> </div> <div class="vss__meta vss__meta--right"> <p class="vss__label vss__label--accent">Met BLURR</p> <p class="vss__desc">Geïntegreerd, meetbaar en resultaatgericht.</p> </div> </div> </div> </section>

<style>
.vss{padding:3rem 0}
.vss__title{font-size:2rem;font-weight:700;color:var(--color-primary, #0a0a0a);text-align:center;margin:0 0 2.5rem}
.vss__wrapper{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:0}
.vss__media{aspect-ratio:9/16;overflow:hidden}
.vss__img{width:100%;height:100%;object-fit:cover}
.vss__placeholder{width:100%;height:100%}
.vss__placeholder--left{background:linear-gradient(180deg,#2a2a2a,#444)}
.vss__placeholder--right{background:linear-gradient(180deg,#1a1a3a,#3a3a7a)}
.vss__meta{padding:1rem 1.25rem;background:#f9f9f9}
.vss__meta--right{background:#f5f5ff}
.vss__label{font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .3rem}
.vss__label--accent{color:var(--color-accent, #6366f1)}
.vss__desc{font-size:.85rem;color:#666;line-height:1.5;margin:0}
.vss__divider{display:flex;align-items:center;justify-content:center;width:3rem;align-self:stretch;background:#fff;border-left:1px solid #eee;border-right:1px solid #eee}
.vss__divider-text{writing-mode:vertical-rl;font-size:.75rem;font-weight:900;letter-spacing:.15em;color:#ccc;text-transform:uppercase}
.vss__wrapper{grid-template-columns:1fr}
.vss__divider{width:100%;height:3rem;writing-mode:horizontal-tb}
.vss__divider-text{writing-mode:horizontal-tb}
.vss__media{aspect-ratio:16/9}
</style>