.book-section2 {
        display: flex;
        /* border: .3px solid red; */
        width: 100%;
        /* height: 70vh; */
        max-height: 100vh;
        margin-top: 100px;
        padding: 16px var(--marges-horizontales);
    }



    button#right,
    button#left {
        position: absolute;
        top: 50%;
        color: black;
        border: none;
        padding: 10px;
        cursor: pointer;
        z-index: 10;
        font-size: 9cqw;
    }

    * {
        box-sizing: border-box;
    }

    .book-grid {
        min-height: 70vh;
        height: fit-content;
        width: 100%;
        font-weight: 400;
        padding-inline: var(--marges-horizontales);
        column-fill: balance;
    }

    .book-grid .object-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 16px;
    }

    .book-grid .object-wrapper .button-wrapper {
        position: relative;
        display: flex;
        gap: 12px 24px;
        width: -moz-fit-content;
        width: fit-content;

        flex-wrap: wrap;
    }

    .book-grid .object-wrapper .button-wrapper .boutton {

        z-index: 3;
        transition: font-weight .3s ease;
        color: var(--gris);


    }

    .book-grid .object-wrapper .button-wrapper .boutton.actuel {
        color: var(--noir);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
    }

    .book-grid .object-wrapper .button-wrapper .boutton:hover {
        color: var(--noir);

    }


    .book-grid .object-wrapper .button-wrapper>*:hover {
        cursor: pointer;
    }

    .book-grid .object-wrapper .grid-wrapper {
        columns: var(--grid-column-num);
        width: 100%;

        column-gap: var(--grid-column-gap);
    }

    .book-grid .grid-wrapper .cell-wrapper.showreel {
        display: flex;
        columns: unset;
        justify-content: center;
        margin-block: 52px calc(52px*3);
    }

    .book-grid .grid-wrapper .cell-wrapper.showreel video {
        -o-object-fit: cover;
        object-fit: cover;
        position: relative;
        display: flex;
        width: 50%;
    }



    .book-grid .object-wrapper .grid-wrapper .cell-wrapper:not(.showreel) {
        position: relative;
        display: flex;
        margin-bottom: var(--grid-column-gap);

        width: 100%;
        height: fit-content;
        border-radius: var(--border-radius);
        overflow: hidden;
    }


    .book-grid .object-wrapper .grid-wrapper .cell-wrapper:not(.showreel) video {
        width: 102%;
        height: 102%;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
        transition: transform .3s ease;
    }

    .book-grid .object-wrapper .grid-wrapper .cell-wrapper img {
        width: 100%;
        transition: transform .3s ease;
    }

    .object-wrapper .grid-wrapper .cell-wrapper:not(.showreel):hover img,
    .object-wrapper .grid-wrapper .cell-wrapper:not(.showreel):hover video {
        transition: transform .3s ease;
        cursor: pointer;
        opacity: 1;
        transform: scale(1.05);
    }


    .book-grid .object-wrapper .grid-wrapper .cell-wrapper p {
        margin: auto;
    }

    .cell-wrapper .full-link,
    .cell-wrapper .full-link {
        position: absolute;
        inset: 0;
        z-index: 3;
        cursor: pointer;
        text-indent: -9999px;
    }

    @media (max-width:767px) {

        .book-grid .grid-wrapper .cell-wrapper.showreel video {
            width: 100%;
            border: 2px solid var(--gris-clair);
        }

        .book-grid .grid-wrapper .cell-wrapper.showreel {
            padding: 0;
        }

        .book-grid .object-wrapper .grid-wrapper .cell-wrapper {
            max-height: unset;
            aspect-ratio: unset;
        }

        .book-grid .object-wrapper .grid-wrapper .cell-wrapper img {
            width: 100%;
            height: auto;
            -o-object-fit: cover;
            object-fit: cover;
            max-height: unset;
        }

        #book-slider {
            border-radius: var(--border-radius);
        }

        #right {
            color: black;
            background-color: transparent;
            right: 0;
            transform: translateX(-100%) translateY(180%);
        }

        #left {
            color: black;
            background-color: transparent;
            transform: translateX(100%) translateY(180%);
        }

        button#right,
        button#left {
            font-size: 15cqw;
        }

        .book-grid .object-wrapper .grid-wrapper {
            width: 100%;
            columns: 1;
        }

        .book-grid .object-wrapper .grid-wrapper .cell-wrapper {
            max-height: unset;
            height: 100%;

            z-index: 3;
        }
    }


    #book .cell-wrapper.skeleton,
    #book .book-wrapper.skeleton {
        background-color: #e7e7e7ff;
        animation: skeleton .8s infinite alternate;
    }

    @keyframes skeleton {
        to {
            opacity: .6;
        }
    }