.marquee-container {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.marquee-content {
display: flex;
    white-space: nowrap;
    width: max-content;
    animation-name: marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    gap: var(--row-gap-20);
}
.marquee-separator {
    margin: 0 15px;
    color: #ccc;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%); /* Сдвигаем ровно на половину общей длины */
    }
}