/* Убираем отступы у самого блока и у body */
.t598 .container, .t598__container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Главный контейнер бегущей строки */
.marquee-container {
    width: 100vw;          /* Ширина на весь экран */
    max-width: 100%;       /* Ограничиваем, чтобы не было горизонтальной прокрутки */
    overflow: hidden;
    background: #fff;      /* Цвет фона */
    padding: 20px 0;
    margin-left: calc(-50vw + 50%); /* Сдвиг влево на половину экрана */
    margin-right: 0;
    position: relative;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
}

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 20px;   /* Отступ между рядами */
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}

/* Анимация для левого движения */
.marquee-left .marquee-content {
    animation: marqueeLeft 20s linear infinite;
}

/* Анимация для правого движения */
.marquee-right .marquee-content {
    animation: marqueeRight 20s linear infinite;
}

/* Задаем размер картинкам */
.marquee-content img {
    height: 150px;         /* Высота ряда */
    width: auto;
    margin-right: 30px;    /* Отступ между картинками */
    vertical-align: middle;
    border-radius: 10px;   /* Скругление углов */
}

/* Адаптив для мобильных устройств */
@media (max-width: 768px) {
    .marquee-container {
        padding: 10px 0;
    }
    
    .marquee-content img {
        height: 80px;       /* Меньше высота на телефоне */
        margin-right: 15px; /* Меньше отступ на телефоне */
    }
    
    .marquee {
        margin-bottom: 10px;
    }
}

/* Ключевые кадры анимации */
@keyframes marqueeLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes marqueeRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
</style>