.tl-sps-widget {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.tl-sps-inner {
    width: 100%;
    overflow: visible;
}

.tl-sps-widget {
    --tl-sps-fade-direction: to right;
    --tl-sps-fade-start: transparent;
    --tl-sps-fade-mid: #000;
    --tl-sps-fade-end: transparent;
    --tl-sps-fade-stop: 20%;
}

.tl-sps-widget.tl-sps-has-fade .tl-sps-inner {
    -webkit-mask-image: linear-gradient(
        var(--tl-sps-fade-direction),
        var(--tl-sps-fade-start) 0,
        var(--tl-sps-fade-mid) var(--tl-sps-fade-stop),
        var(--tl-sps-fade-mid) calc(100% - var(--tl-sps-fade-stop)),
        var(--tl-sps-fade-end) 100%
    );
    mask-image: linear-gradient(
        var(--tl-sps-fade-direction),
        var(--tl-sps-fade-start) 0,
        var(--tl-sps-fade-mid) var(--tl-sps-fade-stop),
        var(--tl-sps-fade-mid) calc(100% - var(--tl-sps-fade-stop)),
        var(--tl-sps-fade-end) 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.tl-sps-track {
    display: flex;
    align-items: center;
    gap: 24px;
    will-change: transform;
    transition: transform 0.2s ease-out;
}

.tl-sps-item {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.tl-sps-item img {
    display: block;
    width: auto;
    height: auto;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .tl-sps-track {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .tl-sps-track {
        gap: 16px;
    }
}