main {
    margin: 0;
    width: 100vw;
}

nav:not(.top) {
    top: calc(2rem);

}

.swiper {
    width: 100%;
    margin: auto;
    height: 100dvh;

    top: 0;
    background-color: rgb(255, 255, 255);
    -webkit-box-shadow: 0px 19px 19px 5px #FFFFFF;
    box-shadow: 0px 19px 19px 5px #FFFFFF;
    z-index: 2 !important;
}

img::selection {
    background-color: transparent
}

.swiper-wrapper {

    padding-block: 3rem;
    box-sizing: border-box !important;
    /* standard moderne */
}

.swiper-slide {

    width: 100%;
    height: auto;
}

.swiper-pagination {
    font-size: 1rem;
    font-weight: 600;
    font-family: "Univers";
}


picture {
    display: flex;
    width: 90%;
    height: 100%;
    align-content: center;
    align-items: center;
    margin: auto;

    img {
        width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
    }
}



section.informations {
    position: sticky;
    bottom: 0;
    font-size: var(--font-size-body);
    padding-bottom: 2rem;
    height: fit-content;
    height: 100dvh;
    display: flex;

    flex-direction: column;
    justify-content: space-between;

}

section.related {

    margin: 2rem auto;

}

.swiper,
section.description,
section.related {
    transition: opacity 0.3s ease-in-out;
}

section.description {

    width: clamp(0px, 90%, 1200px);
    margin: 0 2rem;
    font-weight: 600 !important;

    line-height: 1;
    letter-spacing: normal;
    word-spacing: -3px;
    /* position: fixed; */
    bottom: 0;



    /* margin: 2rem auto; */
    h1.book_title {
        width: fit-content;
        text-align: left;

        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 0.3rem;
        text-decoration-thickness: 0.1rem;

        .date {
            font-weight: 300
        }
    }

    sup {
        font-size: 1rem;
        font-weight: bold;
        font-family: 'Univers';
        text-transform: uppercase;
        vertical-align: super;
    }

    section.more {
        margin-top: 2rem;
        opacity: .5;
        display: flex;
        gap: 2rem;
        width: 100%;
        justify-content: space-between;

        a.outside {
            text-decoration: underline;
            text-underline-offset: 0.3rem;
            text-decoration-thickness: 0.1rem;
            color: black;

            transition: all 0.2s cubic-bezier(0.281, 1.735, 0.435, 0.768);


        }

        a:hover {
            color: var(--theme-1);
            transform: scale(1.05);
        }
    }

}

section.description {
    font-weight: normal;
}





.swiper {

    img {
        cursor: e-resize;
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: black;
        --outline: var(--theme-1);
        background: transparent;
    }

    .swiper-button-prev:after,
    .swiper-rtl .swiper-button-next:after {
        content: '‹';
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-family: "Univers ";





    }

    .swiper-button-next:after,
    .swiper-rtl .swiper-button-next:after {
        content: '›';
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        color: var(--outline);
    }
}

.hidden {
    opacity: 0 !important;
    pointer-events: none !important;

}

@media (width <=968px) {
    .swiper .swiper-pagination {
        top: calc(0px + var(--margin-body)) !important;
        padding: 0.4em;
        bottom: auto;
    }


    main section.description {
        font-size: 5vw !important;
        width: auto;
        text-align: left !important;
    }

    section.related {
        justify-content: center;
    }

    section.description,
    section.related {
        sup {
            font-size: 1.5vw;
        }
    }

    main section.description {

        padding-bottom: 5em;
        word-spacing: -1px;

        h1.book_title {
            text-decoration: underline;
            text-underline-offset: 0.1rem;
            text-decoration-thickness: 0.05rem;
        }

        p {
            margin-top: 1rem;
        }
    }

    section.related img {
        display: none !important;
    }
}