.swiper {
    --swiper-theme-color: black;
    --swiper-pagination-color: black;
    --max-sw-width: calc(100% - var(--bm) * 2);
    max-height: 60vh;

    /* max-width: var(--max-width); */
    border-radius: var(--border-radius);
    width: calc(100vw - var(--bm) * 4 - var(--article-margin) * 1);

}




.swiper-wrapper {
    /* background-color: orange; */
    transition-timing-function: var(--animation-easing);


}



.swiper-slide {

    /* display: flex; */
    /* justify-content: center;
    align-items: center; */
    /* background-color: blue; */
    width: auto;
    object-position: center center;
    border-radius: var(--border-radius);


    picture {

        /* display: flex;
        height: 100%;
        width: auto;
        align-items: center; */
        /* justify-content: center; */
        /* background-color: rgb(0, 255, 76); */

        img {
            object-fit: cover;
            width: auto !important;
            max-width: 100%;
            height: 60vh;
        }
    }


}

.swiper-button-prev {
    order: 1;
}

.swiper-button-next {
    order: 3;
}


.swiper-button-prev,
.swiper-button-next {
    width: auto;
    color: inherit;
    position: relative;
    top: 0 !important;
    margin-top: 0 !important;
    height: auto;
    font-size: var(--font-size);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: none;
}

.swiper-button-disabled {
    opacity: 0 !important;
}




section.buttons {
    justify-content: center;
    position: absolute;

    inset: auto 0 auto 0;
    z-index: 1000;
    /* mix-blend-mode: difference; */


    opacity: 0;
    transition: opacity var(--animation-duration) ease-in-out;
    align-items: center;
    justify-content: center;
    display: flex;
    gap: calc(var(--bm) / 2);
    margin-block: 1lh;
    margin-top: .5rem;

    bac>.button {

        backdrop-filter: blur(5px) !important;
        font-family: "Futura Stencil";
    }


}


section.buttons:has(+ .swiper:hover),
section.buttons:hover {
    opacity: 1;
}


.swiper-pagination-bullets.swiper-pagination-horizontal {
    width: auto;
}

.swiper-pagination {
    width: fit-content;

    span {
        border-radius: 0;
    }

}

.swiper-pagination,
.swiper-pagination-fraction {

    position: relative;
    order: 2;
    width: auto;

    top: 0 !important;


}

.caption {
    min-height: 1lh;
}

.caption.hidden {
    min-height: 1lh;
}




.swiper-slide.cursor-left {
    cursor: w-resize;

}

.swiper-slide.cursor-right {
    cursor: e-resize;

}

.swiper-slide:last-child {
    /* padding-right: 50vw; */


}



@media (width < 968px) {

    .buttons {
        display: none !important;
    }


    .caption {
        margin-block: 1rem;
    }

    .swiper {
        --swiper-height: 50vh;
        width: 100vw;
        left: calc(var(--bm) * -1);
        height: auto;
        max-height: 100%;


        .swiper-wrapper {
            /* background-color: orange; */



        }




        .swiper-slide {
            display: flex;
            justify-content: left;
            object-position: left left;


        }




        picture {
            display: flex;
            height: auto;
            width: auto;

            object-position: left left;

            img {
                max-width: calc(100vw - var(--bm) * 2);
                object-fit: contain;
                border-radius: var(--border-radius);
                height: auto;
                width: calc(100vw - var(--bm) * 4 - var(--article-margin) * 1) !important;
                min-height: auto !important;
            }


        }
    }

}