/* ── Wrapper ── */
.vm-wrapper-ecf580f3 {
    display: flex;
    overflow: hidden;
    position: relative;
    --vm-gap: 20px;
    --vm-items-visible: 3;
    --vm-speed: 20s;
    --vm-fade-size: 15%;
}

/* ── Vertical ── */
.vm-wrapper-ecf580f3[data-dir="vertical"] {
    flex-direction: row;
}
.vm-wrapper-ecf580f3[data-dir="vertical"] .vm-line-wrapper-ecf580f3 {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}
.vm-wrapper-ecf580f3[data-dir="vertical"] .vm-track-ecf580f3 {
    flex-direction: column;
    animation: vm-scroll-v-ecf580f3 var(--vm-speed) linear infinite;
}
.vm-wrapper-ecf580f3[data-dir="vertical"] .vm-items-ecf580f3 {
    flex-direction: column;
}
.vm-wrapper-ecf580f3[data-dir="vertical"] .vm-item-ecf580f3 {
    width: 100%;
    height: calc( (100% / var(--vm-items-visible)) - (var(--vm-gap) * (var(--vm-items-visible) - 1) / var(--vm-items-visible)) );
    flex-shrink: 0;
}

/* ── Horizontal ── */
.vm-wrapper-ecf580f3[data-dir="horizontal"] {
    flex-direction: column;
}
.vm-wrapper-ecf580f3[data-dir="horizontal"] .vm-line-wrapper-ecf580f3 {
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}
.vm-wrapper-ecf580f3[data-dir="horizontal"] .vm-track-ecf580f3 {
    flex-direction: row;
    animation: vm-scroll-h-ecf580f3 var(--vm-speed) linear infinite;
}
.vm-wrapper-ecf580f3[data-dir="horizontal"] .vm-items-ecf580f3 {
    flex-direction: row;
}
.vm-wrapper-ecf580f3[data-dir="horizontal"] .vm-item-ecf580f3 {
    height: 100%;
    width: calc( (100% / var(--vm-items-visible)) - (var(--vm-gap) * (var(--vm-items-visible) - 1) / var(--vm-items-visible)) );
    flex-shrink: 0;
}

/* ── Common ── */
.vm-line-wrapper-ecf580f3 {
    display: flex;
    overflow: hidden;
}
.vm-track-ecf580f3 {
    display: flex;
    gap: var(--vm-gap);
    will-change: transform;
}
.vm-items-ecf580f3 {
    display: flex;
    gap: var(--vm-gap);
    flex-shrink: 0;
}
.vm-item-ecf580f3 {
    position: relative;
    overflow: hidden;
}
.vm-item-ecf580f3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.vm-item-ecf580f3 a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Reverse direction */
.vm-wrapper-ecf580f3 .vm-line-wrapper-ecf580f3.vm-reverse-ecf580f3 .vm-track-ecf580f3 {
    animation-direction: reverse;
}

/* ── Keyframes ──
   Translate exactly -50% so the duplicated set loops seamlessly.
   The gap is already included inside each .vm-items-ecf580f3 set,
   so -50% lands perfectly at the start of the second copy.
*/
@keyframes vm-scroll-v-ecf580f3 {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
@keyframes vm-scroll-h-ecf580f3 {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}