.fl-marquee-image-module {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.fl-marquee-image-track {
    display: flex;
    gap: var(--gap, 40px);
    width: max-content;
    animation: scroll-marquee var(--speed, 20s) linear infinite;
}

.fl-marquee-image-list {
    display: flex;
    gap: var(--gap, 40px);
    flex-shrink: 0;
}

.fl-marquee-image-item {
    flex-shrink: 0;
    width: var(--image-width, 120px);
    height: var(--image-height, 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fl-marquee-image-item img {
    max-height: 80%;
    max-width: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Animasi untuk arah gerakan */
[data-direction="left"] .fl-marquee-image-track {
    animation-direction: normal;
}

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

@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Karena kita menduplikasi list sebanyak 4 kali, 
           untuk looping yang mulus kita cukup menggeser sejauh 1 list (25% dari total track)
           tapi cara yang paling aman adalah menggeser sejauh 1 unit list penuh termasuk gapnya.
           Namun dengan teknik duplikasi CSS, kita gunakan calc agar presisi.
        */
        transform: translateX(calc(-25% - (var(--gap, 40px) / 4)));
    }
}

/* Hover pause */
.fl-marquee-pause-on-hover:hover .fl-marquee-image-track {
    animation-play-state: paused;
}