/* PREVENT FLASH*/
.swiper-slide {
    opacity: 0;
}

/* -------------------------------------------------------------- Swiper */
.swiper.isHome {
    height: calc(100dvh - var(--svgSize));
    position: fixed;
    top: 0;
    /* pointer-events: none;
    user-select: none; */
    z-index: 100;
}

.swiper {
    height: calc(100dvh - var(--menuHeight) - var(--h1) - var(--hGap));
}

.swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* .swiper.isHome img {
    object-position: top left;
} */

/* OVERRIDE DEFAULT SWIPER STYLE */
.swiper.isHome .swiper-button-prev {
    top: 53.5% !important;
}

.swiper.isHome .swiper-button-next {
    top: 53.5% !important;
}

.swiper-button-prev {
    left: calc(var(--g) / 2) !important;

}

.swiper-button-next {
    right: calc(var(--g) / 2) !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--bgColor) !important;
    transition: opacity var(--swiperFadeDuration) var(--animType) !important;
    cursor: pointer !important;
}

.swiper-fade .swiper-slide {
    transition-duration: var(--swiperFadeDuration) !important;
    transition-timing-function: var(--animType) !important;
}

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

.onlyMob {
    opacity: 0 !important;
}

/* -------------------------------------------------------------- Portrait */
@media screen and (orientation: portrait) {
    .swiper.isHome {
        height: calc(100dvh - var(--footerHeight));
    }

    .swiper {
        height: calc(100dvw * 3 / 4);
        /* pointer-events: none;
        user-select: none; */
    }

    /* .swiper-button-next,
    .swiper-button-prev {
        opacity: 1 !important;
    } */

    .onlyMob {
        opacity: 1 !important;
    }


    /* OVERRIDE DEFAULT SWIPER STYLE */
    .swiper-button-prev {
        left: calc(var(--hGap) / 2) !important;
    }

    .swiper-button-next {
        right: calc(var(--hGap) / 2) !important;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-family: swiper-icons !important;
        font-size: 25px !important;
    }
}