/* Dynamic brand slider. All rules are intentionally component-scoped. */
.wb-brand-slider {
    --wb-brand-slider-gap: 40px;
    --wb-brand-slider-visible: 5;
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    padding: 40px 0;
    overflow: hidden;
    background: var(--theme-color-bg-color-2, #fef0ea);
}

.wb-brand-slider,
.wb-brand-slider * {
    box-sizing: border-box;
}

.wb-brand-slider__inner {
    position: relative;
    width: min(1290px, calc(100% - 40px));
    margin: 0 auto;
}

.wb-brand-slider__viewport {
    width: 100%;
    overflow: hidden;
    outline: none;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.wb-brand-slider__track {
    display: flex;
    align-items: stretch;
    gap: var(--wb-brand-slider-gap);
    will-change: transform;
    transition: transform 500ms ease;
}

.wb-brand-slider__slide {
    flex: 0 0 auto;
    min-width: 0;
}

.wb-brand-slider__link {
    display: flex;
    width: 100%;
    height: 130px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.wb-brand-slider__logo {
    display: block;
    width: 50%;
    height: 65px;
    object-fit: contain;
    object-position: center;
}

.wb-brand-slider__viewport.is-dragging,
.wb-brand-slider__viewport.is-dragging .wb-brand-slider__link {
    cursor: grabbing;
}

@media (max-width: 1024px) {
    .wb-brand-slider {
        --wb-brand-slider-visible: 2;
        padding-top: 95px;
        padding-bottom: 95px;
    }
}

@media (max-width: 767px) {
    .wb-brand-slider {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .wb-brand-slider__inner {
        width: calc(100% - 30px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wb-brand-slider__track {
        transition-duration: 0ms;
    }
}