*{box-sizing:border-box}body{font-family:Inter,sans-serif}main{margin:8rem auto;height:45rem;width:30rem;background:#f1f1f1;border:1px solid rgba(0,0,0,.1);border-radius:.5rem;overflow:hidden;display:flex;flex-direction:column}main .slides{display:flex;transition:.2s ease;transform:translate(calc((var(--slide) - 1) * -100%))}main .slides section{width:30rem;height:40rem;padding:2rem;flex-shrink:0;transition:1s ease}main .slides section img{max-width:100%;border-radius:2px;border:1px solid rgba(0,0,0,.1)}main .slides section p{line-height:1.5}main .slides section:nth-of-type(1){opacity:0}main .slides section:nth-of-type(1).active{opacity:1}main .slides section:nth-of-type(2){transform:scale(0)}main .slides section:nth-of-type(2).active{transform:scale(1)}main .slides section:nth-of-type(3){transform:translateY(5rem)}main .slides section:nth-of-type(3).active{transform:translateY(0)}main .slides section:nth-of-type(4){transform:rotate(10deg)}main .slides section:nth-of-type(4).active{transform:rotate(0)}main button{flex-grow:1;margin:0 2rem 2rem;font:inherit;font-size:1rem;background:#000;padding:1rem;color:#fff;border:none;border-radius:.25rem;transition:.2s ease}main button:hover{cursor:pointer;opacity:.8}main button:active{transform:scale(.975)}