Short-video product discovery

<div class="s-demo"><div class="pd"><div class="pd-feed"><small>FOR YOU / 02</small><div class="pd-scene">SMALL DESK?</div><div class="pd-demo">LAMP FOLDS FLAT</div></div><div class="pd-side"><div><b>DISCOVER</b><span>SEE IT USED</span></div><div><b>CONSIDER</b><span>CHECK DETAILS</span></div></div></div></div>

.s-demo{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(8px,3vmin,20px);font:700 clamp(10px,max(2.8vmin,1vw),16px)/1.25 sans-serif;color:var(--fg)}.s-demo *{box-sizing:border-box}@media(min-width:600px){.s-demo>div{transform:scale(1.4)}}.pd{display:flex;gap:clamp(8px,3vmin,22px);align-items:center;width:min(90vw,510px)}.pd-feed{width:45%;height:clamp(120px,39vmin,245px);position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(7px,2vmin,15px);background:linear-gradient(150deg,#211b19 0 50%,#ff4e36 50%);color:white;overflow:hidden}.pd-feed small{font-size:clamp(10px,max(1.7vmin,1vw),12px)}.pd-scene{font-size:clamp(12px,3vmin,20px);font-weight:900;animation:pdscene 5s infinite}.pd-demo{background:var(--accent-2);color:#211b19;padding:clamp(5px,1.4vmin,9px);font-size:clamp(10px,max(1.8vmin,1vw),13px);font-weight:900;animation:pddemo 5s infinite}.pd-side{flex:1;display:grid;gap:clamp(8px,3vmin,20px)}.pd-side div{display:grid;gap:3px;padding:clamp(7px,2vmin,13px);border:2px solid var(--line);background:var(--surface);animation:pdside 5s infinite}.pd-side div+div{animation-delay:1.3s}.pd-side b{font-size:clamp(10px,max(2vmin,1vw),15px)}.pd-side span{font-size:clamp(10px,max(1.7vmin,1vw),12px);color:var(--muted)}@keyframes pdscene{0%,14%{transform:translateY(15px);opacity:.5}30%,100%{transform:none;opacity:1}}@keyframes pddemo{0%,22%{transform:translateY(20px)}38%,88%{transform:none}100%{transform:translateY(20px)}}@keyframes pdside{0%,20%{border-color:var(--line)}35%,72%{border-color:var(--accent)}100%{border-color:var(--line)}}