.cmp-timeline {
  margin: auto;
  font-family: 'Amadeus Neue', serif;
  padding: 72px 0;
  background-color: var(--background-color);
}
@media (max-width: 992px) and (min-width: 768px) {
  .cmp-timeline {
    padding: 64px 0;
  }
}
@media (max-width: 767px) {
  .cmp-timeline {
    padding: 48px 0;
  }
}
.cmp-timeline-title {
  color: var(--font-color);
  margin: 0 auto 16px;
  font-size: 32px;
  font-weight: 500;
  text-align: center;
}
.cmp-timeline-description {
  color: var(--font-color);
  text-align: center;
  max-width: 770px;
  font-size: 18px;
  margin: 0 auto 40px;
}
@media (max-width: 992px) {
  .cmp-timeline-description {
    margin: 0 auto 32px;
  }
}
@media (max-width: 768px) {
  .cmp-timeline-description {
    max-width: 90%;
  }
}
.cmp-timeline .cmp-carousel__content {
  max-width: 1170px;
  margin: auto;
}

.cmp-timeline .cmp-carousel__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;
  gap: 48px;
}
@media (max-width: 992px) and (min-width: 768px) {
  .cmp-timeline .cmp-carousel__actions {
    gap: 24px;
  }
}
@media (max-width: 767px) {
  .cmp-timeline .cmp-carousel__actions {
    margin-bottom: 24px;
  }
}
.cmp-timeline .cmp-carousel__actions .cmp-carousel__indicators {
  display: flex;
  align-items: center;
  pointer-events: none;
  gap: 32px;
}
@media (max-width: 992px) and (min-width: 768px) {
  .cmp-timeline .cmp-carousel__actions .cmp-carousel__indicators {
    gap: 24px;
  }
}
.cmp-timeline .cmp-carousel__actions .cmp-carousel__indicators li.cmp-carousel__indicator {
  background-color: #cccccc;
  margin: 0;
  height: 8px;
  width: 8px;
}
.cmp-timeline .cmp-carousel__actions .cmp-carousel__indicators li.cmp-carousel__indicator-small {
  width: 4px;
  height: 4px;
}
@media (max-width: 767px) {
  .cmp-timeline .cmp-carousel__actions .cmp-carousel__indicators li.cmp-carousel__indicator:not(.cmp-carousel__indicator--active) {
    display: none;
  }
}
.cmp-timeline .cmp-carousel__actions .cmp-carousel__indicators li.cmp-carousel__indicator--active {
  all: initial;
  font-weight: bolder;
  font-family: sans-serif;
  font-size: 22px;
  padding: 8px 16px;
  border-radius: 4px;
  color: var(--active-item-color);
  border: 4px solid var(--active-item-border-color);
}
.cmp-timeline .cmp-carousel__actions button.cmp-carousel__action {
  border: none;
  color: var(--font-color);
  font-size: 32px;
  background-color: var(--background-color);
  width: 48px;
  height: 48px;
}
.cmp-timeline .cmp-carousel__actions button.cmp-carousel__action:hover {
  background-color: var(--action-button-hover-bg-color);
  border: 1px solid var(--action-button-hover-bg-color);
  border-radius: 26px;
  color: #1a1a1a;
}
.cmp-timeline .cmp-carousel__actions button.cmp-carousel__action:focus {
  border: 2px solid var(--action-button-focus-border-color);
  border-radius: 26px;
  background-color: var(--action-button-hover-bg-color);
  color: #1a1a1a;
}

.cmp-timeline {
  --background-color: #ffffff;
  --font-color: #1a1a1a;
  --active-item-color: #0c66e1;
  --active-item-border-color: #0c66e1;
  --action-button-hover-bg-color: #f2f2f2;
  --action-button-focus-border-color: #0c66e1;
}
.cmp-timeline.color-sky {
  --background-color: #000835;
  --font-color: #ffffff;
  --active-item-color: #ffffff;
  --active-item-border-color: #3a8bff;
  --action-button-hover-bg-color: #c5d5f9;
  --action-button-focus-border-color: #61a2ff;
}