.book-container{perspective:1300px;justify-content:center;align-items:flex-end;display:flex}.book{width:var(--book-w,225px);height:var(--book-h,350px);transform-style:preserve-3d;transition:transform .5s;position:relative;transform:rotateY(0)}.book-container:hover .book,.book-container:focus-visible .book{transform:rotateY(-24deg)}.book-cover{width:var(--book-w,225px);height:var(--book-h,350px);background-color:var(--book-color,#01060f);transform:translateZ(calc(var(--book-depth,100px) / 2));position:absolute;top:0;left:0;overflow:hidden}.book-cover-img{object-fit:cover;width:calc(100% + 4px);height:calc(100% + 4px);position:absolute;inset:-2px}.book:before{content:"";width:calc(var(--book-depth,100px) - 2px);height:calc(var(--book-h,350px) - 6px);transform:translateX(calc(var(--book-w,225px) - (var(--book-depth,100px) / 2) - 3px)) rotateY(90deg);background:repeating-linear-gradient(90deg,#fff 0,#f9f9f9 2px,#fff 4px);position:absolute;top:3px;left:0}.book:after{content:"";width:var(--book-w,225px);height:var(--book-h,350px);background-color:var(--book-color,#01060f);transform:translateZ(calc(var(--book-depth,100px) / -2));position:absolute;top:0;left:0}