.marquee-container {
background: rgba(0, 0, 0, 0.03);
padding: 1.25rem 0;
overflow: hidden;
}
.marquee {
display: flex;
width: max-content;
animation: marquee var(--marquee-duration, 45s) linear infinite;
@media (max-width: 768px) {
--marquee-duration: 35s;
}
}
.marquee-content {
display: flex;
align-items: center;
gap: 3rem;
padding-right: 3rem;
flex-shrink: 0;
@media (max-width: 768px) {
gap: 2rem;
padding-right: 2rem;
}
}
.marquee-item {
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text);
white-space: nowrap;
display: flex;
align-items: center;
gap: 0.75rem;
&::before {
content: '';
width: 5px;
height: 5px;
background: var(--color-primary);
border-radius: 50%;
flex-shrink: 0;
opacity: 0.6;
}
@media (max-width: 768px) {
font-size: 0.7rem;
}
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}