/* SLIDING LAYOUT */
.banner.carousel {
    position: relative;
    overflow: hidden;
}

.banner.carousel .slides {
    display: flex; /* lay slides horizontally */
    width: 100%;
    transition: transform 450ms ease; /* slide animation */
    will-change: transform;
}

.banner.carousel .slide {
    flex: 0 0 100%; /* each slide is full width */
    width: 100%;
}

/* remove any previous "display:none" on non-active slides */
.banner.carousel .slide {
    display: block;
}

/* DOTS with horizontal fill in active dot */
.carousel-dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 50;
}

.carousel-dots .dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.25);
    border: 0;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: width 180ms ease, height 180ms ease, background 180ms ease, transform 180ms ease;
}

.carousel-dots .dot.is-active {
    width: 36px;
    height: 10px;
    background: rgba(0,0,0,.15);
}

.carousel-dots .dot .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: #999;/* rgba(0,0,0,.65);*/
    border-radius: inherit;
    transition: width 0ms linear;
    opacity: 0;
    pointer-events: none;
}

.carousel-dots .dot.is-active .fill {
    opacity: 1;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .carousel-dots .dot {
        background: rgba(255,255,255,.25);
    }

    .carousel-dots .dot.is-active {
        background: rgba(255,255,255,.15);
    }

    .carousel-dots .dot .fill {
        background: rgba(255,255,255,.9);
    }
}