.bookLstDemo {
    list-style: none;
    overflow-x: scroll;
    display: flex;
    margin: 0 50px;
    padding: 0;

    & .bookLstDemo__el {
        flex-shrink: 0;
        max-width: 300px;
        margin-bottom: 30px;
        padding: 0 15px;
    
        & p {
            /* max-width: 75%; */
            padding: 0 12%;
            min-height: 50px;
            text-align: center;
        }
    }

    @media screen and (max-width: 560px) {
        margin: 0;
        scroll-snap-type: x mandatory;
    }
}

.bookLstDemo::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #ebebeb;
}
.bookLstDemo::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #ebebeb;
}
.bookLstDemo::-webkit-scrollbar{
    height: 2px;
    background-color: #ebebeb;
}
.bookLstDemo::-webkit-scrollbar-thumb{
    background-color: #484848;
    height: 2px;
}

.book-wrp {
    --book-width: 200px;
    --book-height: 300px;
    --book-fat: 50px;
    --book-texture: url(texture4-2.jpg);
    perspective: 650px;
    /* width: var(--book-width); */
    height: var(--book-height);
    margin: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book {
    width: var(--book-width);
    height: var(--book-height);
    transition: transform 1s, ease box-shadow .5s;
    animation: 1s ease 0s 1 bookAnimation;
    transform: rotateY(-30deg);
    position: relative;
    transform-style: preserve-3d;
    box-shadow: 5px 5px 20px #afafaf;
    background-color: #ccc;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;

    &::before {
        content: ' ';
        position: absolute;
        height: calc( var(--book-height) - 2 * 3px);
        width: var(--book-fat);
        top: 3px;
        background: #fff;
        transform: translateX(calc(var(--book-width) - var(--book-fat) / 2 - 3px)) rotateY(90deg) translateX(calc(var(--book-fat) / 2));
        background: #f5f4f4 var(--book-texture) repeat center / cover;
        /* box-shadow: 4px 0px 7px #d3d3d3; */
        /* box-shadow: 4px 0px 7px #d3d3d3, 8px 6px 11px #d3d3d3; */
        box-shadow: inset 0px 11px 8px -10px #CCC,
                    inset 0px -11px 8px -10px #CCC; 
    }
    
    &::after {
        width: var(--book-width);
        height: var(--book-height);
        content: ' ';
        position: absolute;
        left: 0;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        background: #141619;
        transform: translateZ( calc(var(--book-fat) * -1) );
    }
}

.book:hover {
    transform: rotate(0deg);
    cursor: pointer;
    box-shadow: 2px 3px 15px #afafaf;
}

.book__poster {
    width: var(--book-width);
    height: var(--book-height);
    position: absolute;
    background: #575757aa;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    object-fit: cover;
}

.book__seam {
    width: 3px;
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 0;
    /* filter: drop-shadow(2px 4px 6px black);
    background: rgba(0,0,0, 0.05);
    box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1); */

    filter: drop-shadow(2px 4px 6px black);
    /* box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1); */
    border-left: 3px solid rgba(0, 0, 0, .05);
    background-image: linear-gradient(90deg, rgba(255,255,255, 0.05) 0%, rgba(255,255,255,0) 100%);
    width: 50px;
}

/* .book__seam {
    position: absolute;
    width: 20px;
    height: 100%;
    margin-left: 10px;
    border-left: 2px solid #00000010;
    background-image: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
    transition: all .5s ease;
}

.book__seam:after {
    content: '';
    width: calc(var(--book-width) - 10px);
    height: 100%;
    position: absolute;
    border-radius: 3px;
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
    top: 0;
    left: 0;
    opacity: .1;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
} */




@keyframes bookAnimation {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(-30deg);
    }
}

.book--back-visual {
    &::after {
        background: #141619 var(--bg-cover) no-repeat center / cover;
    }
}

.book--back-color {
    &::after {
        background: var(--bg-cover);
    }
}

.book--wide {
    --book-fat: 75px;
}

.book--qube {
    --book-width: 240px;
    --book-height: 240px;
    --book-fat: 40px;
}
.book--soft {
    .book__seam {
        display: none;
    }

    &::before {
        transform: translateX(calc(var(--book-width) - var(--book-fat) / 2)) rotateY(90deg) translateX(calc(var(--book-fat) / 2));
        border-right: 4px solid #141619;
    }

    &::after {
        display: none;
    }
}