.banners-carousel {
    padding: 16px 0 0;
    overflow: hidden;
}

.banners-carousel__track {
    display: flex;
    gap: 12px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    padding-left: calc((100% - 920px) / 2);
}

/* On smaller screens, use 16px side padding */
@media screen and (max-width: 951px) {
    .banners-carousel__track {
        padding-left: 16px;
    }
}

.banners-carousel__slide {
    flex: 0 0 min(920px, calc(100vw - 32px));
    border-radius: var(--radius, 20px);
    overflow: hidden;
    display: block;
    text-decoration: none;
    filter: grayscale(100%);
    opacity: 0.4;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.banners-carousel__slide--active {
    filter: grayscale(0%);
    opacity: 1;
}

.banners-carousel__img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    aspect-ratio: 600 / 250;
    object-fit: cover;
}

/* Dots */
.banners-carousel__dots {
    display: flex;
    gap: 6px;
    padding: 12px 0 4px;
    width: 240px;
    margin: 0 auto;
}

.banners-carousel__dot {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--color-primary, #332F2A);
    opacity: 0.2;
    cursor: pointer;
    transition: opacity 0.3s;
}

.banners-carousel__dot--active {
    opacity: 1;
}