Бегущие ленты

<!-- текстовая лента -->
<div class="marquee"><div class="track">
  <b>Один</b><b>Два</b><b>Три</b>
  <b>Один</b><b>Два</b><b>Три</b>  <!-- дубль для бесшовности -->
</div></div>

<!-- фотолента (в обратную сторону) -->
<div class="marquee"><div class="track photos">
  <img src="a.jpg"><img src="b.jpg"><img src="c.jpg">
  <img src="a.jpg"><img src="b.jpg"><img src="c.jpg">
</div></div>

<style>
.marquee { overflow: hidden; white-space: nowrap; }
.track { display: inline-flex; gap: 44px; padding-right: 44px;
  animation: mq 18s linear infinite; }
.track.photos { animation-direction: reverse; animation-duration: 30s; }
.track b:nth-child(even) {          /* контурные буквы */
  color: transparent; -webkit-text-stroke: 1.4px #E84B16; }
@keyframes mq { to { transform: translateX(-50%); } }
.marquee:hover .track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .track { animation: none; } }
</style>

Сделай две бегущие ленты: текстовую (слова, каждое чётное — контурное через color:transparent + -webkit-text-stroke) и фотоленту из карточек, едущую в обратную сторону (animation-direction:reverse, медленнее). Механика: контейнер overflow:hidden + white-space:nowrap, контент продублирован ровно дважды (плюс padding-right = gap), анимация translateX(-50%) linear infinite — стык невидим. Пауза по наведению, отключение при prefers-reduced-motion.