.ggms-wrap {
    --ggms-height: 80px;
    --ggms-gap: 24px;
    --ggms-duration: 35s;
    --ggms-card-radius: 8px;
    --ggms-edge-radius: 8px;
    --ggms-drag-offset: 0px;
    --ggms-cycle-span: 0px;
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--ggms-edge-radius);
}

.ggms-viewport {
    height: var(--ggms-height);
    overflow: hidden;
    border-radius: var(--ggms-edge-radius);
    touch-action: pan-y;
}

.ggms-drag-layer {
    height: 100%;
    transform: translate3d(var(--ggms-drag-offset), 0, 0);
    cursor: grab;
    touch-action: pan-y;
}

.ggms-track {
    display: flex;
    align-items: center;
    gap: var(--ggms-gap);
    width: max-content;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--ggms-duration);
    will-change: transform;
}

.ggms-track--ltr {
    animation-name: ggms-marquee-ltr;
}

.ggms-track--rtl {
    animation-name: ggms-marquee-rtl;
}

@keyframes ggms-marquee-ltr {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(var(--ggms-cycle-span), 0, 0);
    }
}

@keyframes ggms-marquee-rtl {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(calc(var(--ggms-cycle-span) * -1), 0, 0);
    }
}

.ggms-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.ggms-img,
.ggms-item img {
    display: block;
    height: var(--ggms-height);
    width: auto;
    object-fit: contain;
    border-radius: var(--ggms-card-radius);
    -webkit-user-drag: none;
    user-select: none;
}

.ggms-wrap--pause:hover .ggms-track {
    animation-play-state: paused;
}

.ggms-wrap--dragging .ggms-drag-layer {
    cursor: grabbing;
}

.ggms-wrap--dragging .ggms-track {
    animation-play-state: paused;
}