body {
    transition: all 0.3s ease;
}

body:has(header nav>ul.hovered) {

    background-color: white !important;



}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


    height: calc(100vh - var(--bm) * 2);

    .swiper {
        width: calc(100vw - var(--bm) * 2);
        height: 100vh;

        /* transition: all 0.3s ease; */
        .swiper-pagination {
            bottom: var(--swiper-pagination-bottom, 8px);
            left: 0;
            top: var(--swiper-pagination-top, auto);
            height: fit-content;
            width: 70vw;
            margin-top: calc(var(--bm) * 2);
            top: 0;
            font-variant-numeric: oldstyle-nums;
        }




        .swiper-slide {
            width: auto;
            transition-timing-function: cubic-bezier(1, 0, 0, 1);
            max-width: 90vw;

            figure {




                picture {

                    max-width: 90vw;
                    display: flex;
                    height: 100vh;

                    img {

                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
    }


}


header:has(nav>ul.hovered)+.swiper {
    opacity: 0.1;
    scale: .98;


}

.swiper-slide {

    opacity: 1;
}

.swiper-slide-active {
    transition: all 0.3s ease;
}

.swiper-slide:not(.swiper-slide-active) {
    opacity: 1;

    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    main {
        .swiper {
            width: 100vw;


            width: calc(100vw - var(--bm) * 2);
            height: 100svh;

            /* transition: all 0.3s ease; */

            .swiper-slide {
                width: auto;
                height: auto;

                figure {


                    width: 100vw;

                    picture {

                        height: auto;
                        max-width: 100vw;

                        img {

                            width: 100vw;
                            height: auto;
                            object-fit: contain;
                        }
                    }
                }
            }
        }
    }
}