.booklet-container{cursor:pointer;perspective:1000px}.booklet{height:280px;margin:0 40px 40px;position:relative;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.25,.46,.45,.94);width:200px}.booklet:hover{transform:rotateX(5deg)}.book-spine{background:linear-gradient(90deg,#2c1810 0,#5d4037 20%,#6d4c41 80%,#3e2723);border-radius:2px 0 0 2px;box-shadow:inset 2px 0 4px rgba(0,0,0,.3),0 0 10px rgba(0,0,0,.2);left:-8px;top:0;transform:rotateY(-90deg);transform-origin:right center;width:16px}.book-front,.book-spine{height:280px;position:absolute}.book-front{background-position:50%;background-repeat:no-repeat;background-size:cover;border:2px solid #fff;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.3),0 5px 15px rgba(0,0,0,.2);overflow:hidden;position:relative;transform-origin:left center;transition:transform .3s cubic-bezier(.25,.46,.45,.94);width:200px}.book-front:before{background:linear-gradient(135deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.05) 30%,rgba(0,0,0,.05) 70%,rgba(0,0,0,.1));bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.booklet:hover .book-front{transform:rotateY(-25deg)}.book-pages{background:#fefefe;border-radius:0 4px 4px 0;box-shadow:inset -2px 0 4px rgba(0,0,0,.1),0 5px 15px rgba(0,0,0,.1);height:276px;position:absolute;right:-2px;top:2px;transform:translateZ(-1px);width:196px}.book-pages:before{border-radius:2px;bottom:4px;content:"";left:4px;position:absolute;right:4px;top:4px}.demo-grid{align-items:center;display:flex;flex-wrap:wrap;gap:40px;justify-content:center}.demo-title{color:#fff;font-size:28px;font-weight:300;margin-bottom:20px;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.3);width:100%}.booklet-1 .book-front{background-image:url(https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=600&fit=crop)}.booklet-2 .book-front{background-image:url(https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=400&h=600&fit=crop)}.booklet-3 .book-front{background-image:url(https://images.unsplash.com/photo-1544947950-fa07a98d237f?w=400&h=600&fit=crop)}@media (max-width:996px){.booklet-container{display:flex;justify-content:center}.booklet{margin:30px}.book-pages{top:68px}}@media (max-width:768px){.demo-grid{flex-direction:column;gap:30px}.book-back,.book-front,.book-pages,.booklet{height:260px;width:220px}.book-pages{width:216px}.book-pages,.book-spine{height:260px}}