.book
{
    transform-style: preserve-3d;
    perspective: 2000px;
    margin-right: 22px;

    .inner-book {
        height: inherit;
        width: inherit;
        transform: rotateY(-20deg);

        &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 0px;
            bottom: 0px;
            box-shadow: 12px 0 18px 10px rgba(0, 0, 0, 0.3);
        }

        & > *:not(.front) {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }    

        .front {
            position: relative;
            z-index: 10;
            height: inherit;
            width: inherit;

            img {
                position: relative;
                height: inherit;
                width: inherit;
            }

            span {
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                box-sizing: border-box;
                border: 2px solid rgba(0, 0, 0, 0.2);
                border-left: 5px solid rgba(0, 0, 0, 0.3);
                z-index: 11;
            }
        }

        .page {
            width: 40px;
            background: #fff;
            border-radius: 2px;
            border: 1px solid rgb(209 213 219);
            
            &.one {height: calc(100% - 4px); right: -3px; z-index: 9}
            &.two {height: calc(100% - 6px); right: -6px; z-index: 8}
            &.three {height: calc(100% - 8px); right: -9px; z-index: 7}
            &.four {height: calc(100% - 10px); right: -12px; z-index: 6}
            &.five {height: calc(100% - 12px); right: -15px; z-index: 5}
        }
    
        .back {
            z-index: 1;
            right: -17px;
            border: 1px solid rgb(209 213 219);
            height: calc(100% - 11px);
            border: 1px solid rgb(194, 197, 202);
        }
    }
}