src/components/video/VideoMagazine.astro
---
// VideoMagazine, recovered from blurr-components.pages.dev
---
<article class="vmag"> <div class="vmag__media"> <div class="vmag__placeholder" aria-label="TechFlow: van 0 naar 280% meer leads"> <span class="vmag__play" aria-hidden="true"> <svg width="44" height="44" viewBox="0 0 44 44"> <circle cx="22" cy="22" r="22" fill="rgba(99,102,241,0.85)"></circle> <polygon points="17,11 37,22 17,33" fill="#fff"></polygon> </svg> </span> </div> <span class="vmag__category">Case Study</span> </div> <div class="vmag__content"> <h2 class="vmag__title"> <a class="vmag__title-link" href="#">TechFlow: van 0 naar 280% meer leads</a> </h2> <p class="vmag__teaser">Hoe BLURR de digitale strategie van TechFlow transformeerde.</p> <footer class="vmag__footer"> <span class="vmag__author">BLURR Team</span> <span class="vmag__meta">April 2024 · 8 min lezen</span> </footer> </div> </article>
<style>
.vmag{display:grid;grid-template-columns:2fr 3fr;border-radius:12px;overflow:hidden;border:1px solid #eee;background:#fff}
.vmag__media{position:relative;aspect-ratio:auto;min-height:240px}
.vmag__poster{width:100%;height:100%;object-fit:cover}
.vmag__placeholder{width:100%;height:100%;background:linear-gradient(160deg,#0a0a1a,#1a1a3a);display:flex;align-items:center;justify-content:center;cursor:pointer}
.vmag__category{position:absolute;top:1rem;left:1rem;background:var(--color-accent, #6366f1);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:4px}
.vmag__content{padding:2rem;display:flex;flex-direction:column;justify-content:space-between}
.vmag__title{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:700;line-height:1.3;margin:0 0 1rem}
.vmag__title-link{color:var(--color-primary, #0a0a0a);text-decoration:none}
.vmag__title-link:hover{color:var(--color-accent, #6366f1)}
.vmag__teaser{font-size:.9rem;color:#666;line-height:1.65;margin:0 0 1.5rem;flex:1}
.vmag__footer{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:#999;border-top:1px solid #eee;padding-top:.75rem;gap:.5rem;flex-wrap:wrap}
.vmag__author{font-weight:600;color:var(--color-primary, #0a0a0a)}
.vmag{grid-template-columns:1fr}
.vmag__media{min-height:180px}
</style>