Social carousel

<div class="s-demo"><div class="sc"><div class="sc-stack"><div class="sc-slide">01<small>THE PROBLEM</small></div><div class="sc-slide">02<small>THE EVIDENCE</small></div><div class="sc-slide">03<small>THE ACTION</small></div><div class="sc-slide">04<small>SAVE THIS</small></div></div><div class="sc-dots"><i></i><i></i><i></i><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)}}.sc{text-align:center}.sc-stack{position:relative;width:clamp(95px,31vmin,200px);height:clamp(105px,34vmin,220px);margin:auto}.sc-slide{position:absolute;inset:0;display:grid;place-content:center;background:var(--accent-2);color:#211b19;border:2px solid var(--fg);font-size:clamp(30px,9vmin,60px);font-weight:900;opacity:0;animation:scpage 8s infinite}.sc-slide small{font-size:clamp(10px,max(2.5vmin,1vw),15px)}.sc-slide:nth-child(2){background:var(--accent);color:white;animation-delay:2s}.sc-slide:nth-child(3){background:var(--surface);color:var(--fg);animation-delay:4s}.sc-slide:nth-child(4){background:var(--fg);color:var(--bg);animation-delay:6s}.sc-dots{display:flex;justify-content:center;gap:5px;margin-top:clamp(6px,2vmin,13px)}.sc-dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}.sc-dots i:first-child{background:var(--accent)}@keyframes scpage{0%,23%{opacity:1;transform:translateX(0) rotate(0)}27%,100%{opacity:0;transform:translateX(-25px) rotate(-8deg)}}