.xd-dual-slider {
    --xd-ds-logo-width: 260px;
    --xd-ds-logo-height: 140px;
    --xd-ds-gap: 24px;
    --xd-ds-radius: 28px;
    --xd-ds-rate: 40;
    --xd-ds-bg: rgba(0, 0, 0, 0);
    --xd-ds-bg-image: none;
    --xd-ds-bg-size: cover;
    --xd-ds-bg-position: center center;
    --xd-ds-bg-repeat: no-repeat;
    --xd-ds-bg-attachment: scroll;
    background-color: var(--xd-ds-bg);
    background-image: var(--xd-ds-bg-image);
    background-size: var(--xd-ds-bg-size);
    background-position: var(--xd-ds-bg-position);
    background-repeat: var(--xd-ds-bg-repeat);
    background-attachment: var(--xd-ds-bg-attachment);
    padding: 10px 0;
    overflow: hidden;
}

.xd-dual-slider__row {
    overflow: hidden;
    width: 100%;
}

.xd-dual-slider__track {
    display: flex;
    gap: var(--xd-ds-gap);
    width: max-content;
    will-change: transform;
}

.xd-dual-slider__card {
    width: var(--xd-ds-logo-width);
    min-width: var(--xd-ds-logo-width);
    height: var(--xd-ds-logo-height);
    border-radius: var(--xd-ds-radius);
    overflow: hidden;
    position: relative;
    background: transparent;
}

.xd-dual-slider__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .xd-dual-slider {
        --xd-ds-logo-width: min(52vw, 290px);
        --xd-ds-logo-height: min(28vw, 120px);
        --xd-ds-gap: 16px;
    }
}

@media (max-width: 768px) {
    .xd-dual-slider {
        --xd-ds-logo-width: min(60vw, 240px);
        --xd-ds-logo-height: min(28vw, 100px);
        --xd-ds-gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xd-dual-slider__track {
        transition: none !important;
    }
}