.book-forot {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(-.1deg); /* Safari fix compensation */
}

.book-polka .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.book-slider {
    width: auto;
    max-height: 80svh;
    padding-left: 0;
    padding-right: 0;
    aspect-ratio: 14 / 9;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 991px) {
    .book-slider {
        width: 100%;
        height: 488rem;
        padding: 20px
    }
}

.book_shadow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: linear-gradient(45deg, hsla(0, 0.00%, 0.00%, 0.00), hsla(0, 0.00%, 100.00%, 0.40) 29%, hsla(0, 0.00%, 100.00%, 0.00) 57%);
    opacity: .5;
    transition: opacity .5s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.book-slider__slide--active .book_shadow {
    opacity: 0;
}

.book__back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1b1b1b;
    transform: translateZ(var(--root-width)) rotateY(180.1deg);
    background-position: top;
    background-size: 102%;
    background-position-y: 1%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.book, .book__root {
    background-size: cover;
}

/* При ховере поворачиваем книжку на 2 градуса */
.book:hover {
    transform: rotateY(-2deg);
}

@media screen and (max-width: 495px) {
    .book-polka {
        height: 320rem;
    }

    .book-slider {
        width: 100%;
        height: 280rem !important;
        padding: 0;
    }

    html .book-polka {
        height: auto;
    }
}

.book-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-perspective: 3000px;
    perspective: 3000px
}

.book-slider__slide {
    height: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.book {
    --root-width: 0px;
    height: 100%;
    aspect-ratio: 0.7884615385;
    position: absolute;
    top: 0;
    right: 0;
    background-size: cover;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    rotate: y 40deg;
}

.book__root {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    aspect-ratio: 435 / 6008;
    background-color: #808080;
    background-size: cover;
    background-repeat: no-repeat;
    rotate: y 89.9deg;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.book-el {
    width: 100%;
    aspect-ratio: 1.53;
    -webkit-perspective: 1500px;
    perspective: 1500px;
    position: relative
}

@media screen and (max-width: 767px) {
    .book-el {
        width: 200vw
    }
}

.book-el__page {
    position: absolute;
    top: 0;
    left: 0
}