.cs-lofi-location-headline {
  display: block;
}

.cs-lofi-location-roll {
  display: inline-block;
  position: relative;
  height: 1.5em;
  overflow: hidden;
  vertical-align: bottom;
}

.cs-lofi-location-roll-text {
  display: block;
  position: relative;
  white-space: nowrap;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  will-change: transform;
}

.cs-lofi-location-roll-text.is-leaving {
  animation: cs-lofi-roll-out 0.45s ease-in forwards;
}

.cs-lofi-location-roll-text.is-entering {
  animation: cs-lofi-roll-in 0.55s ease-out forwards;
}

@keyframes cs-lofi-roll-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-110%);
    opacity: 0;
  }
}

@keyframes cs-lofi-roll-in {
  from {
    transform: translateY(110%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .cs-lofi-location-headline > span:first-child {
    display: block;
  }

  .cs-lofi-location-roll {
    display: block;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-lofi-location-roll-text {
    animation: none !important;
  }
}


/*
.cs-lofi-location-headline {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.3em;
}

.cs-lofi-location-roll {
  display: block;
  flex: 0 0 auto;
  height: 1.5em;
  overflow: hidden;
}

.cs-lofi-location-roll-text {
  display: block;
  white-space: nowrap;
  transform: translateY(0);
}

@media (max-width: 767px) {
  .cs-lofi-location-roll {
    flex-basis: 100%;
    width: 100%;
  }
}

.cs-lofi-location-roll-text.is-leaving {
  animation: cs-lofi-roll-out 0.45s ease-in forwards;
}

.cs-lofi-location-roll-text.is-entering {
  animation: cs-lofi-roll-in 0.55s ease-out forwards;
}

@keyframes cs-lofi-roll-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-110%);
    opacity: 0;
  }
}

@keyframes cs-lofi-roll-in {
  from {
    transform: translateY(110%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-lofi-location-roll-text {
    animation: none !important;
  }
}
*/


.cs-lofi-location-subline {
  padding-bottom: 1.5rem;
}
