.has-bg-slideshow {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
    background-color: #111;
}

.nubio-bg-slideshow,
.nubio-bg-slide {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.nubio-bg-slideshow {
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
}

.nubio-bg-slideshow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--nubio-bg-overlay-color, transparent);
    opacity: var(--nubio-bg-overlay-opacity, 0);
    pointer-events: none;
}

.nubio-bg-slide {
    z-index: 1;
    background-attachment: var(--nubio-bg-attachment, scroll);
    background-position: var(--nubio-bg-position, center center);
    background-repeat: var(--nubio-bg-repeat, no-repeat);
    background-size: var(--nubio-bg-size, cover);
    opacity: 0;
    transition: opacity var(--nubio-bg-transition, 1.5s) ease-in-out;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
}

.nubio-bg-slide.is-active {
    opacity: 1;
}

.has-bg-slideshow > :not(.nubio-bg-slideshow) {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .nubio-bg-slide {
        background-attachment: scroll;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nubio-bg-slide {
        transition: none;
        will-change: auto;
    }
}