.mis-slider {
    position: relative;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    width: var(--mis-width, 100%);
    max-width: var(--mis-max-width, 500px);
    height: var(--mis-height, auto);
}


.mis-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.mis-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-duration: var(--mis-transition-speed, 600ms);
    transition-property: opacity, transform, visibility;
    transition-timing-function: ease;
}

.mis-slide.is-active {
    position: relative;
}

.mis-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.mis-slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
}


.mis-transition-none .mis-slide {
    transition: none !important;
    transform: none !important;
}

.mis-transition-slide-left .mis-slide { transform: translateX(100%); }

.mis-transition-slide-left .mis-slide.is-active { transform: translateX(0); }

.mis-transition-slide-right .mis-slide { transform: translateX(-100%); }
.mis-transition-slide-right .mis-slide.is-active { transform: translateX(0); }

.mis-transition-slide-up .mis-slide { transform: translateY(100%); }
.mis-transition-slide-up .mis-slide.is-active { transform: translateY(0); }

.mis-transition-slide-down .mis-slide { transform: translateY(-100%); }
.mis-transition-slide-down .mis-slide.is-active { transform: translateY(0); }

.mis-transition-zoom .mis-slide { transform: scale(.92); }
.mis-transition-zoom .mis-slide.is-active { transform: scale(1); }

.mis-transition-zoom-fade .mis-slide { transform: scale(1.08); opacity:0; }
.mis-transition-zoom-fade .mis-slide.is-active { transform: scale(1); opacity:1; }

/* Responsive dimensions — aligned with Divi breakpoints. */
@media (max-width: 980px) {
    .mis-slider {
        width: var(--mis-tablet-width, var(--mis-width, 100%));
        max-width: var(--mis-tablet-max-width, var(--mis-max-width, 500px));
        height: var(--mis-tablet-height, var(--mis-height, auto));
    }
}

@media (max-width: 767px) {
    .mis-slider {
        width: var(--mis-mobile-width, var(--mis-tablet-width, var(--mis-width, 100%)));
        max-width: var(--mis-mobile-max-width, var(--mis-tablet-max-width, var(--mis-max-width, 500px)));
        height: var(--mis-mobile-height, var(--mis-tablet-height, var(--mis-height, auto)));
    }
}

/* When the responsive height is auto, let the active image define the slider height. */
.mis-slider { --mis-img-height: 100%; }
.mis-slider[style*="--mis-height:auto"] { --mis-desktop-img-height: auto; }
@media (min-width: 981px) {
    .mis-slider[style*="--mis-height:auto"] .mis-slide img { height: auto; }
}
@media (min-width: 768px) and (max-width: 980px) {
    .mis-slider[style*="--mis-tablet-height:auto"] .mis-slide img { height: auto; }
}
@media (max-width: 767px) {
    .mis-slider[style*="--mis-mobile-height:auto"] .mis-slide img { height: auto; }
}