.srtx-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Container queries to calculate children width appropriately */
    container-type: inline-size;
    /* Default fallback vars if not provided by inline style */
    --items-desktop: 5;
    --items-tablet: 3;
    --items-mobile: 2;
    --marquee-speed: 20s;
}

.srtx-marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    /* The animation will translate from 0 to -50% because the content is duplicated */
    animation: srtx-marquee-anim var(--marquee-speed) linear infinite;
}

.srtx-marquee-dir-right .srtx-marquee-track {
    animation-direction: reverse;
}

.srtx-marquee-pause-hover:hover .srtx-marquee-track {
    animation-play-state: paused;
}

/* Calculate width based on viewport and visible items */
.srtx-marquee-item {
    flex-shrink: 0;
    width: calc(100cqi / var(--items-mobile));
    padding: 0 1.5rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.srtx-marquee-item img {
    max-width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    /* Para que se vea un poco más estético si la imagen tiene transparencias o es blanca */
    mix-blend-mode: multiply;
}
.srtx-marquee-item a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
}
.srtx-marquee-item a:hover {
    opacity: 0.8;
}

@media (min-width: 768px) {
    .srtx-marquee-item {
        width: calc(100cqi / var(--items-tablet));
    }
}

@media (min-width: 1024px) {
    .srtx-marquee-item {
        width: calc(100cqi / var(--items-desktop));
    }
}

@keyframes srtx-marquee-anim {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Skeleton and Loader Styles */
.srtx-marquee-wrapper {
    position: relative;
    width: 100%;
}

.srtx-marquee-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    overflow: hidden;
    align-items: center;
    background: transparent;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.srtx-marquee-skeleton-item {
    flex-shrink: 0;
    width: calc(100cqi / var(--items-mobile) - 3rem);
    margin: 0 1.5rem;
    height: 60px;
    background: #e0e0e0;
    border-radius: 8px;
    animation: srtx-skeleton-pulse 1.5s infinite ease-in-out;
}

@media (min-width: 768px) {
    .srtx-marquee-skeleton-item { width: calc(100cqi / var(--items-tablet) - 3rem); }
}

@media (min-width: 1024px) {
    .srtx-marquee-skeleton-item { width: calc(100cqi / var(--items-desktop) - 3rem); }
}

@keyframes srtx-skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Hide track initially until loaded */
.srtx-marquee-container {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.srtx-marquee-loaded .srtx-marquee-container {
    opacity: 1;
}

.srtx-marquee-loaded .srtx-marquee-skeleton {
    opacity: 0;
    pointer-events: none;
}