#journey[data-playback="steps"] .j-chapter-rail {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

#j-playback {
  flex: none;
}

#journey[data-playback="steps"] #j-invitation {
  opacity: var(--invitation-in, 1);
  transform: translateY(calc((1 - var(--invitation-in, 1)) * 6px));
}

@media (max-width: 959px) {
  #journey[data-playback="steps"] .j-chapter-rail {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  #journey[data-playback="steps"] #j-chapters {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  #journey[data-playback="steps"] .j-chapter-rail {
    flex-wrap: wrap;
    gap: 4px;
  }

  #journey[data-playback="steps"] #j-chapters {
    flex-basis: 100%;
  }

  #j-playback {
    margin-left: auto;
  }
}