.logoScroller {
position: relative;
height: 8rem;
overflow: hidden;
white-space: nowrap;
}
.logoScroller::before,
.logoScroller::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 8rem;
z-index: 1;
pointer-events: none;
}
.logoScroller::before {
left: 0;
background: linear-gradient(to right, #fff, transparent);
}
.logoScroller::after {
right: 0;
background: linear-gradient(to left, #fff, transparent);
}
[data-theme='dark'] .logoScroller::before {
background: linear-gradient(to right, #1B1B1D, transparent);
}
[data-theme='dark'] .logoScroller::after {
background: linear-gradient(to left, #1B1B1D, transparent);
}
.images {
display: flex;
align-items: center;
width: max-content;
animation: bannermove 20s linear infinite;
}
.images img {
display: inline-block;
margin: 2rem;
flex-shrink: 0;
}
[data-theme='dark'] .images img {
filter: grayscale(1) invert(1);
}
@keyframes bannermove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
