.scrolling-text-section:hover .scrolling-text-group {animation-play-state: paused;}
.scrolling-text-wrapper {display:flex; white-space: nowrap; overflow: hidden; position: relative; bottom: 0;}
.scrolling-text-group {display:flex; flex-shrink: 0; align-items: center; animation-name: scrolling-text; white-space: nowrap; animation-iteration-count: infinite; animation-timing-function: linear; }
.scrolling-text-group.animate-reverse {animation-direction: reverse; }
.scrolling-text-group .item {flex-shrink: 0;}
@keyframes scrolling-text {0% { transform: translate3d(0, 0, 0);} 100% {transform: translate3d(-100%, 0, 0);}}

.scrolling-text-section { background: var(--third-color); color: var(--main-color); --items-spacing: 1em; position: relative; text-align: center; line-height: 1.2; margin: 0; }
.scrolling-text-group {animation-duration: 10s;}
.scrolling-text-group .separator {padding: 0 1em;}
.scrolling-text-group .text,
.scrolling-text-group .item {display: flex; align-items: center; gap: 1em;}
.scrolling-text-group .text { font-size: 1.5rem; }
  
@media (min-width: 66em) {
  .scrolling-text-section {padding: 1em 0; }
}
@media (max-width: 66em) {
  .scrolling-text-section {--items-spacing: 1em; padding: 1em 0;}
  .scrolling-text-group {animation-duration: 10s;}
}
@media (prefers-reduced-motion: reduce) {
  .scrolling-text-group {animation: none;}
}