/* ====== mini slider (scopé) ====== */
#mini-slider-6a6a14f30983a .ms {
    --ms-gap: 1rem;
    --ms-per-page: 6;
    position: relative;
    overflow: hidden;
}

#mini-slider-6a6a14f30983a .ms__track {
    display: flex;
    gap: var(--ms-gap);
    transform: translateX(0);
    transition: transform 0.35s ease;
    will-change: transform;
}

#mini-slider-6a6a14f30983a .ms__slide {
    flex: 0 0 calc((100% - (var(--ms-per-page) - 1) * var(--ms-gap)) / var(--ms-per-page));
    min-width: 0;
    height: auto;
}

#mini-slider-6a6a14f30983a .ms__slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px;
}

#mini-slider-6a6a14f30983a .ms__arrow {
    width: 40px;
    height: 40px;
    border: 0;
    cursor: pointer;
}

#mini-slider-6a6a14f30983a .ms__dots {
    width: 80%;
    display: flex;
    gap: 8px;
    z-index: 10;
}

#mini-slider-6a6a14f30983a .ms__dots button {
    width: 30%;
    height: 10px;
    border-radius: 10px;
    border: 0;
    background: #37284757;
    cursor: pointer;
    transition:
        width 0.35s ease,
        background 0.35s ease;
}

#mini-slider-6a6a14f30983a .ms__dots button[aria-selected="true"] {
    width: 130%;
    background: #372847;
}

.ms__prev,
.ms__next {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

@media screen and (width < 1024px) {
    #mini-slider-6a6a14f30983a .ms {
        --ms-per-page: 3;
    }
}

@media screen and (width < 640px) {
    #mini-slider-6a6a14f30983a .ms {
        --ms-per-page: 2;
        --ms-gap: 0.75rem;
    }
}
