@import url("/span-about-hero.css?v=1");

.js-carousel-container .span-timeline-middle-year {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 180ms ease, visibility 180ms ease !important;
}

.js-carousel-container .group:hover .span-timeline-middle-year,
.js-carousel-container .group:focus-within .span-timeline-middle-year {
  visibility: visible !important;
  opacity: 1 !important;
}

.js-carousel-container .span-timeline-detail-panel {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(24px) !important;
  transition: opacity 220ms ease, transform 220ms ease !important;
}

.js-carousel-container .group:hover .span-timeline-detail-panel,
.js-carousel-container .group:focus-within .span-timeline-detail-panel {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

#span-timeline-subtitle {
  margin: 0 !important;
  color: #777 !important;
  font-size: clamp(1rem, 1.45vw, 1.35rem) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

.span-timeline-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: clamp(12px, 1.6vw, 24px) !important;
}

.js-carousel-container .span-timeline-detail-panel > p {
  font-size: 18px !important;
  line-height: 1.55 !important;
}

@media (min-width: 640px) {
  .js-carousel-container .span-timeline-detail-panel > p {
    font-size: 24px !important;
  }
}