.lm-marquee-text {
  interpolate-size: allow-keywords;
  margin-left: 5px;
  display: inline-grid;
  width: auto;
  transition: width 1s ease;
}

.lm-marquee-text > span {
  interpolate-size: allow-keywords;
  margin: 0;
  grid-column: 1;
  grid-row: 1;
  white-space: nowrap;
  place-self: start;
  animation: var(--marquee-animation);
}

.lm-marquee-text > span:nth-child(2) { animation-delay: 3s; }
.lm-marquee-text > span:nth-child(3) { animation-delay: 6s; }
.lm-marquee-text > span:nth-child(4) { animation-delay: 9s; }
.lm-marquee-text > span:nth-child(5) { animation-delay: 12s; }
.lm-marquee-text > span:nth-child(6) { animation-delay: 15s; }

.lm-marquee-animation-2 { --marquee-animation: fadeInOut2Words 6s infinite both; }
.lm-marquee-animation-3 { --marquee-animation: fadeInOut3Words 9s infinite both; }
.lm-marquee-animation-4 { --marquee-animation: fadeInOut4Words 12s infinite both; }
.lm-marquee-animation-5 { --marquee-animation: fadeInOut5Words 15s infinite both; }
.lm-marquee-animation-6 { --marquee-animation: fadeInOut6Words 18s infinite both; }

@keyframes fadeInOut2Words {
  0% { opacity: 0; max-width: 0; visibility: hidden; transform: translateY(-50%); }
  2%, 48% { opacity: 1; max-width: fit-content; visibility: visible; transform: translateY(0); }
  50%, 100% { opacity: 0; max-width: 0; visibility: hidden; transform: translateY(50%); }
}

@keyframes fadeInOut3Words {
  0% { opacity: 0; max-width: 0; visibility: hidden; transform: translateY(-50%); }
  2%, 31% { opacity: 1; max-width: fit-content; visibility: visible; transform: translateY(0); }
  33%, 100% { opacity: 0; max-width: 0; visibility: hidden; transform: translateY(50%); }
}

@keyframes fadeInOut4Words {
  0% { opacity: 0; max-width: 0; visibility: hidden; transform: translateY(-50%); }
  2%, 23% { opacity: 1; max-width: fit-content; visibility: visible; transform: translateY(0); }
  25%, 100% { opacity: 0; max-width: 0; visibility: hidden; transform: translateY(50%); }
}

@keyframes fadeInOut5Words {
  0% { opacity: 0; max-width: 0; visibility: hidden; transform: translateY(-50%); }
  2%, 18% { opacity: 1; max-width: fit-content; visibility: visible; transform: translateY(0); }
  20%, 100% { opacity: 0; max-width: 0; visibility: hidden; transform: translateY(50%); }
}

@keyframes fadeInOut6Words {
  0% { opacity: 0; max-width: 0; visibility: hidden; transform: translateY(-50%); }
  2%, 14% { opacity: 1; max-width: fit-content; visibility: visible; transform: translateY(0); }
  16%, 100% { opacity: 0; max-width: 0; visibility: hidden; transform: translateY(50%); }
}