.marquee-wrapper {
overflow: hidden;
white-space: nowrap;
position: relative;
width: 100%;
display: flex;
} .marquee-type-image {
position: relative;
}
.marquee-type-image::before,
.marquee-type-image::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 17%;
z-index: 10;
pointer-events: none;
}
.marquee-type-image::before {
left: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.marquee-type-image::after {
right: 0;
background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.marquee-content {
display: flex;
position: relative;
z-index: 2;
}
.marquee-group {
display: flex;
gap: var(--marquee-gap, 50px);
flex-shrink: 0;
justify-content: center;
min-width: 100%;
animation: marquee-scroll var(--marquee-speed, 20s) linear infinite;
}
.marquee-item {
flex-shrink: 0;
display: flex;
align-items: center;
}
.marquee-group .marquee-item:last-of-type {
margin-right: var(--marquee-gap, 50px);
}
.marquee-item img {
max-height: 100px; width: auto;
display: block;
} .marquee-left .marquee-group {
animation-name: marquee-scroll-left;
}
@keyframes marquee-scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%); }
} .marquee-right .marquee-group {
animation-name: marquee-scroll-right;
}
@keyframes marquee-scroll-right {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}   .marquee-grayscale .marquee-item img {
filter: grayscale(100%);
}