

.ticker {
  
  background: var(--color-hero-ticker);

  
  overflow: hidden;
}

.ticker__line {
  
  display: flex;

  
  padding-block: var(--spacing-inset-md);

  
  padding-inline: var(--spacing-inset-md);

  
  justify-content: center;
}

.ticker__line_running {
  
  width: max-content;
  padding-inline: 0;

  
  --ticker-separator: '\00A0\00A0\00A0•\00A0\00A0\00A0';

  
  animation: ticker-run var(--ticker-duration) linear infinite;
}


.ticker__line_running:hover,
.ticker__line_running:focus-within {
  animation-play-state: paused;
}

.ticker__text {
  font: var(--type-heading-h4);

  
  margin-block-start: 0;

  
  color: var(--color-text-heading-on-strong);

  
  text-align: center;
}



.ticker__text::after {
  
  content: var(--ticker-separator, '');
}

@keyframes ticker-run {
  
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--ticker-shift))); }
}
