.phonebook-mockup-wrapper{perspective:1500px;aspect-ratio:455/786;justify-content:center;align-items:center;width:250px;margin:3rem auto;display:flex;position:relative}@media (min-width:768px){.phonebook-mockup-wrapper{width:350px}}.phonebook-mockup{width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;transition:transform .6s;position:relative;transform:rotateX(15deg)rotateY(-20deg)}.phonebook-mockup:hover{transform:rotateX(5deg)rotateY(-5deg)translateZ(30px)}.book-face{position:absolute}.book-front{z-index:10;background:#fff;border-radius:2px 6px 6px 2px;width:calc(100% + 6px);height:calc(100% + 6px);top:-3px;left:-3px;transform:translateZ(75px);box-shadow:2px 0 10px #0000001a}.book-front img{object-fit:cover;border-radius:inherit;width:100%;height:100%;display:block}.book-back{background:#e0e0e0;border-radius:6px 2px 2px 6px;width:calc(100% + 6px);height:calc(100% + 6px);top:-3px;left:-3px;transform:rotateY(180deg)translateZ(26px);box-shadow:inset -2px 0 10px #0000001a}.book-left{transform-origin:0;background:#f5f5f5;width:50px;height:100%;left:0;transform:translateZ(25px)rotateY(-90deg)}.book-right{transform-origin:100%;background:linear-gradient(90deg,#ccc,#fff 20%,#ccc 40%,#fff 60%,#ccc 80%,#fff) 0 0/5px 100%;width:50px;height:100%;right:0;transform:translateZ(25px)rotateY(90deg)}.book-top{transform-origin:top;background:linear-gradient(#ccc,#fff 20%,#ccc 40%,#fff 60%,#ccc 80%,#fff) 0 0/100% 5px;width:100%;height:50px;top:0;transform:translateZ(25px)rotateX(90deg)}.book-bottom{transform-origin:bottom;background:linear-gradient(#ccc,#fff 20%,#ccc 40%,#fff 60%,#ccc 80%,#fff) 0 0/100% 5px;width:100%;height:50px;bottom:0;transform:translateZ(25px)rotateX(-90deg)}.mockup-glow{z-index:-1;filter:blur(20px);pointer-events:none;background:radial-gradient(circle,#0000001a 0%,#0000 70%);width:120%;height:120%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)translateZ(-50px)}