User-generated content (UGC)

<div class="s-demo"><div class="ugc"><div class="ugc-card"><small>CUSTOMER POST</small><b>MY SETUP</b><i></i></div><div class="ugc-arrow">→</div><div class="ugc-gate">PERMISSION<br><strong>CHECKED</strong></div><div class="ugc-arrow">→</div><div class="ugc-card final"><small>CAMPAIGN</small><b>REAL USE</b><i></i></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)}}.ugc{display:flex;align-items:center;gap:clamp(3px,1.3vmin,13px);max-width:94vw}.ugc-card{position:relative;width:clamp(65px,19vmin,130px);height:clamp(95px,28vmin,190px);padding:clamp(5px,1.5vmin,10px);background:var(--surface);border:2px solid var(--fg);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.ugc-card small{font-size:clamp(10px,max(1.4vmin,1vw),12px);color:var(--muted)}.ugc-card b{font-size:clamp(10px,max(2.8vmin,1vw),20px);z-index:1}.ugc-card i{position:absolute;width:70%;height:40%;left:15%;top:25%;background:linear-gradient(45deg,var(--accent-2),var(--accent));transform:rotate(-10deg)}.ugc-card.final{border-color:var(--accent);animation:ugcshow 4s infinite}.ugc-gate{text-align:center;background:#211b19;color:#fff6ed;padding:clamp(5px,1.5vmin,12px);font-size:clamp(10px,max(1.8vmin,1vw),12px);animation:ugcpulse 5s infinite}.ugc-gate strong{color:var(--accent-2)}.ugc-arrow{font-size:clamp(12px,4vmin,28px);color:var(--accent)}@keyframes ugcpulse{0%,20%{opacity:.4}40%,100%{opacity:1}}@keyframes ugcshow{0%,12%{opacity:.3;transform:translateX(-8px)}30%,88%{opacity:1;transform:none}100%{opacity:.3}}