.marquee-container-d3ce0913 {
    display: flex;
    overflow: hidden;
    user-select: none;
    width: 100%;
    /* Gradient edge fade based on CSS variables */
    --mq-mask-x: linear-gradient(to right, transparent, black var(--marquee-gradient-size-x, 5%), black calc(100% - var(--marquee-gradient-size-x, 5%)), transparent);
    --mq-mask-y: linear-gradient(to bottom, transparent, black var(--marquee-gradient-size-y, 0%), black calc(100% - var(--marquee-gradient-size-y, 0%)), transparent);
    
    mask-image: var(--mq-mask-x), var(--mq-mask-y);
    mask-composite: intersect;
    -webkit-mask-image: var(--mq-mask-x), var(--mq-mask-y);
    -webkit-mask-composite: source-in;
}

.marquee-container-d3ce0913.has-color-gradient {
    mask-image: none;
    -webkit-mask-image: none;
    position: relative;
}

/* Horizontal Colors */
.marquee-container-d3ce0913.has-color-gradient::before,
.marquee-container-d3ce0913.has-color-gradient::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--marquee-gradient-size-x, 5%);
    z-index: 2;
    pointer-events: none;
}

.marquee-container-d3ce0913.has-color-gradient::before {
    left: 0;
    background: linear-gradient(to right, var(--marquee-gradient-color, transparent), transparent);
}

.marquee-container-d3ce0913.has-color-gradient::after {
    right: 0;
    background: linear-gradient(to left, var(--marquee-gradient-color, transparent), transparent);
}

/* Vertical Colors */
.marquee-container-d3ce0913.has-color-gradient > .marquee-track-d3ce0913 {
    position: relative;
}

.marquee-container-d3ce0913.has-color-gradient::part(top-bottom) {
    /* Since ::part isn't universally easy, we use pseudo elements on the container for vertical too, 
       but overlapping pseudo elements can be tricky. We'll add two more layers via shadow dom or additional divs if needed, 
       but for pure CSS, box-shadow inset is often easier for 4-way overlays */
}

/* A better approach for 4-way color gradient is an inset box-shadow or an overlay div, but since we can't easily add divs without JS, we can use a hack with multiple background gradients on a pseudo element */
.marquee-container-d3ce0913.has-color-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: 
        linear-gradient(to right, var(--marquee-gradient-color, #fff) 0%, transparent var(--marquee-gradient-size-x, 5%)),
        linear-gradient(to left, var(--marquee-gradient-color, #fff) 0%, transparent var(--marquee-gradient-size-x, 5%)),
        linear-gradient(to bottom, var(--marquee-gradient-color, #fff) 0%, transparent var(--marquee-gradient-size-y, 0%)),
        linear-gradient(to top, var(--marquee-gradient-color, #fff) 0%, transparent var(--marquee-gradient-size-y, 0%));
}

.marquee-container-d3ce0913.has-color-gradient::after {
    display: none; /* Disable the old ::after since ::before handles all 4 sides now */
}


.marquee-track-d3ce0913 {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-around;
    min-width: 100%;
    animation: scrollX-d3ce0913 var(--marquee-speed, 20s) linear infinite;
    gap: var(--marquee-spacing, 30px);
    padding-right: var(--marquee-spacing, 30px); /* Seamless looping */
}

.marquee-container-d3ce0913[data-direction="right"] .marquee-track-d3ce0913 {
    animation-direction: reverse;
}

.marquee-container-d3ce0913:hover .marquee-track-d3ce0913 {
    animation-play-state: paused;
}

.marquee-item-d3ce0913 {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marquee-item-d3ce0913 img {
    object-fit: contain;
    max-width: var(--marquee-img-width, 150px);
    height: auto;
    transition: filter 0.3s ease;
}

@keyframes scrollX-d3ce0913 {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}