.df-book-container{perspective:2000px;width:300px;height:420px;position:relative}.df-book-container-hero{perspective:2000px;width:280px;height:390px;position:relative}.df-book-container-mini{perspective:1000px;width:100%;aspect-ratio:3/4;position:relative}.df-book-cover{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.df-book-container-hero .df-book-cover{transform:rotateY(-18deg)}.df-book-container:hover .df-book-cover{transform:rotateY(-25deg) scale(1.02)}.df-book-container-hero:hover .df-book-cover{transform:rotateY(-28deg) scale(1.05)}.df-book-container-mini:hover .df-book-cover{transform:rotateY(-30deg) scale(1.02)}.df-book-container-hero,.df-book-container-mini:hover,.df-book-container:hover{filter:drop-shadow(40px 30px 60px rgba(0,0,0,.15))}.df-book-cover:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,rgba(0,0,0,.05) 0,transparent 5%,transparent 95%,rgba(0,0,0,.05));pointer-events:none}.df-book-spine,.df-book-spine-mini{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(0,0,0,.15) 0,rgba(255,255,255,.15) 50%,rgba(0,0,0,.15));transform:rotateY(-90deg);transform-origin:left}.df-book-spine{width:20px}.df-book-spine-mini{width:12px}@media (max-width:768px){.df-book-container-hero{width:220px;height:300px}}