src/components/video/VideoShort.astro
---
// VideoShort, recovered from blurr-components.pages.dev
---
<div class="vsr"> <div class="vsr__player"> <div class="vsr__placeholder" aria-label="Short video"> <span class="vsr__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.9)"></circle> <polygon points="17,11 37,22 17,33" fill="#fff"></polygon> </svg> </span> </div> <span class="vsr__duration">0:58</span> </div> <div class="vsr__meta"> <p class="vsr__title">60 seconden over waarom BLURR anders is</p> <p class="vsr__caption">#marketing #groei #resultaat</p> </div> </div>
<style>
.vsr{display:inline-flex;flex-direction:column;max-width:320px;gap:.75rem}
.vsr__player{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#111}
.vsr__video{width:100%;height:100%;object-fit:cover}
.vsr__placeholder{width:100%;height:100%;background:linear-gradient(180deg,#0a0a20,#1a1a40);display:flex;align-items:center;justify-content:center;cursor:pointer}
.vsr__duration{position:absolute;bottom:.75rem;right:.75rem;background:#000000b3;color:#fff;font-size:.75rem;font-weight:700;padding:.2rem .5rem;border-radius:4px}
.vsr__title{font-size:.9rem;font-weight:600;color:var(--color-primary, #0a0a0a);margin:0 0 .2rem;line-height:1.4}
.vsr__caption{font-size:.8rem;color:var(--color-accent, #6366f1);margin:0;font-weight:500}
</style>