.roslg-marquee {
--roslg-speed: 30s;
--roslg-dir: normal;
--roslg-gap: 50px;
width: 100%;
overflow: hidden;
position: relative;
direction: ltr; }
.roslg-viewport {
display: flex;
width: max-content;
will-change: transform;
animation: roslg-scroll var(--roslg-speed) linear infinite;
animation-direction: var(--roslg-dir);
}
.roslg-track {
display: flex;
align-items: center;
gap: var(--roslg-gap);
padding-left: var(--roslg-gap); flex-shrink: 0;
width: max-content; } @keyframes roslg-scroll {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
.roslg-pause-hover:hover .roslg-viewport { animation-play-state: paused; }
.roslg-item {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
text-decoration: none; width: calc((100vw - (var(--roslg-items-d, 5) - 1) * var(--roslg-gap, 50px)) / var(--roslg-items-d, 5));
}
@media (max-width: 1024px) {
.roslg-item {
width: calc((100vw - (var(--roslg-items-t, 3) - 1) * var(--roslg-gap, 50px)) / var(--roslg-items-t, 3));
}
}
@media (max-width: 600px) {
.roslg-item {
width: calc((100vw - (var(--roslg-items-m, 2) - 1) * var(--roslg-gap, 50px)) / var(--roslg-items-m, 2));
}
}
.roslg-item img {
height: 60px;
width: auto;
display: block;
object-fit: contain;
transition: filter 0.3s, opacity 0.3s, transform 0.3s;
} .roslg-grayscale .roslg-item img {
filter: grayscale(100%);
opacity: 0.7;
}
.roslg-grayscale .roslg-item:hover img {
filter: grayscale(0%);
opacity: 1;
}
.roslg-item:hover img {
transform: scale(1.05);
} @media (prefers-reduced-motion: reduce) {
.roslg-viewport { animation: none; overflow-x: auto; }
}