.swiper {
    width: 100dvw;
    height: 100svh;
}


video {
    object-fit: contain;
    width: 100%;
    height: 100%;

    &.landscape {
        width: auto;
        height: 100%;
        object-fit: cover;
    }

    &.portrait {
        object-fit: contain;
        height: 100%;

    }
}

picture {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;

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

    &.landscape.dfs img {
        width: 100vw;
        object-fit: cover;

    }

    &.portrait img {
        height: 100%;
        width: auto;

    }

    &.landscape img {
        width: auto;
        height: 100%;
        object-fit: cover;
    }
}

.htmx-swapping {

    opacity: 0;
    transition: opacity .5s ease;
}

.htmx-request,
.htmx-settling {
    transition: opacity .5s ease;
    opacity: 1;

    visibility: visible;
}


@media (width <=968px) {

    picture {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;

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

        &.portrait img {


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

        &.landscape img {
            height: 100%;
            width: 100%;
            object-fit: contain;


        }

        &.landscape.fs img {
            height: 100%;
            width: 100%;
            object-fit: cover;

        }



        &.landscape.nsf img {
            object-fit: contain !important;
            object-position: center center !important;

        }


    }

    video {
        &.landscape {
            height: 100%;
            width: 100%;
            object-fit: contain;
        }

        &.portrait {
            width: auto;
            height: 100%;
            object-fit: cover;

        }
    }

}