@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: 10px 0 0 !important;
  color: #777 !important;
  font-size: clamp(1rem, 1.45vw, 1.35rem) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}