/**
 * Company logo wall — replaces the Swiper Loop Carousel f630c83 (section 4782):
 * 5 logos in view (4 ≤1024, 3 ≤767), 30px apart, moving continuously, black and
 * white at 70% opacity and max 50px high (as loop-item 4789). Pauses on
 * hover/focus; with reduced motion it is a static, wrapping grid.
 */

.r4y-template .r4y-logos {
    --r4y-logos-visible: 5;
    --r4y-logos-gap: 30px;
    container-type: inline-size;
    overflow: hidden;
}
.r4y-template .r4y-logos__track {
    display: flex;
    width: max-content;
    animation: r4y-logos-scroll calc(var(--r4y-logos-count, 10) * 3s) linear infinite;
}
.r4y-template .r4y-logos:hover .r4y-logos__track,
.r4y-template .r4y-logos:focus-within .r4y-logos__track {
    animation-play-state: paused;
}
.r4y-template .r4y-logos__list {
    display: flex;
    gap: var(--r4y-logos-gap);
    margin: 0;
    padding: 0 var(--r4y-logos-gap) 0 0;
    list-style: none;
}
.r4y-template .r4y-logos__item {
    display: flex;
    flex: 0 0 calc((100cqw - (var(--r4y-logos-visible) - 1) * var(--r4y-logos-gap)) / var(--r4y-logos-visible));
    align-items: center;
    justify-content: center;
}
.r4y-template .r4y-logos__image {
    display: block;
    max-width: 100%;
    max-height: 50px; /* loop-item 4789 custom CSS (#f1dc65c) */
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
}

@keyframes r4y-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 1024px) {
    .r4y-template .r4y-logos { --r4y-logos-visible: 4; }
}
@media (max-width: 767px) {
    .r4y-template .r4y-logos { --r4y-logos-visible: 3; }
}

@media (prefers-reduced-motion: reduce) {
    .r4y-template .r4y-logos__track { width: auto; animation: none; }
    .r4y-template .r4y-logos__list { flex-wrap: wrap; justify-content: center; padding: 0; row-gap: var(--r4y-logos-gap); }
    .r4y-template .r4y-logos__list--clone { display: none; }
}