.px-history {
  position: relative;
  container-type: inline-size;
}
.px-history .swiper {
  width: 100%;
}
.px-history .milestones {
  margin: 0;
  padding: 0;
  list-style: none;
}
.px-history .milestones.milestones-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 20px;
}
@container (width <=900px) {
  .px-history .milestones.milestones-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (width <=560px) {
  .px-history .milestones.milestones-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(1) {
  animation-delay: 150ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(2) {
  animation-delay: 300ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(3) {
  animation-delay: 450ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(4) {
  animation-delay: 600ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(5) {
  animation-delay: 750ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(6) {
  animation-delay: 900ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(7) {
  animation-delay: 1050ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(8) {
  animation-delay: 1200ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(9) {
  animation-delay: 1350ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(10) {
  animation-delay: 1500ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(11) {
  animation-delay: 1650ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(12) {
  animation-delay: 1800ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(13) {
  animation-delay: 1950ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(14) {
  animation-delay: 2100ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(15) {
  animation-delay: 2250ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(16) {
  animation-delay: 2400ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(17) {
  animation-delay: 2550ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(18) {
  animation-delay: 2700ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(19) {
  animation-delay: 2850ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(20) {
  animation-delay: 3000ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(21) {
  animation-delay: 3150ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(22) {
  animation-delay: 3300ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(23) {
  animation-delay: 3450ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(24) {
  animation-delay: 3600ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(25) {
  animation-delay: 3750ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(26) {
  animation-delay: 3900ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(27) {
  animation-delay: 4050ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(28) {
  animation-delay: 4200ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(29) {
  animation-delay: 4350ms;
}
.px-history .milestones.milestones-grid.animate-parent > .col:nth-child(30) {
  animation-delay: 4500ms;
}
.px-history .milestone {
  margin: 0;
  padding: 0;
  min-width: 0;
  height: auto;
  box-sizing: border-box;
  color: var(--fontColor);
}
.px-history .milestone::before, .px-history .milestone::marker {
  content: none;
}
.px-history .milestone .milestone-year {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--main-color);
  font-family: var(--headline);
  font-size: clamp(2rem, 1.7635135135rem + 1.1824324324vw, 2.875rem);
  line-height: 1.1;
  color: var(--main-color);
}
.px-history .milestone .milestone-title {
  margin: 22px 0 0;
  font-family: var(--headline);
  font-size: clamp(1.25rem, 1.1824324324rem + 0.3378378378vw, 1.5rem);
  line-height: 1.2;
  color: var(--fontColor);
}
.px-history .milestone .milestone-text {
  margin-top: 8px;
  font-size: var(--miniFontSize);
  line-height: 18px;
}
.px-history .milestone .milestone-text p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.px-history .milestone .milestone-text p + p {
  margin-top: 8px;
}
.px-history .navButton .btn-prev,
.px-history .navButton .btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 24px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  color: var(--formBorderColor);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--baseTransition);
}
.px-history .navButton .btn-prev svg,
.px-history .navButton .btn-next svg {
  width: 16px;
  height: 31px;
  display: block;
}
.px-history .navButton .btn-prev:hover, .px-history .navButton .btn-prev:focus-visible,
.px-history .navButton .btn-next:hover,
.px-history .navButton .btn-next:focus-visible {
  color: var(--main-color);
}
.px-history .navButton .btn-prev.swiper-button-disabled,
.px-history .navButton .btn-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}
.px-history .navButton .btn-prev {
  left: -30px;
}
.px-history .navButton .btn-next {
  right: -30px;
}
.px-history .navButton .btn-next svg {
  transform: scaleX(-1);
}
@container (width <=640px) {
  .px-history .navButton {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
  }
  .px-history .navButton .btn-prev,
  .px-history .navButton .btn-next {
    position: static;
    transform: none;
  }
}
.fl[data-frame=cibgbox] .px-history .milestone-year, .fl[data-frame=blackbgbox] .px-history .milestone-year, .fl[data-background-media=true] .px-history .milestone-year {
  color: var(--contrastColorInverted);
  border-bottom-color: var(--contrastColorInverted);
}
.fl[data-frame=cibgbox] .px-history .milestone-title,
.fl[data-frame=cibgbox] .px-history .milestone-text,
.fl[data-frame=cibgbox] .px-history .milestone-text p, .fl[data-frame=blackbgbox] .px-history .milestone-title,
.fl[data-frame=blackbgbox] .px-history .milestone-text,
.fl[data-frame=blackbgbox] .px-history .milestone-text p, .fl[data-background-media=true] .px-history .milestone-title,
.fl[data-background-media=true] .px-history .milestone-text,
.fl[data-background-media=true] .px-history .milestone-text p {
  color: var(--contrastColorInverted);
}
.fl[data-frame=cibgbox] .px-history .navButton .btn-prev,
.fl[data-frame=cibgbox] .px-history .navButton .btn-next, .fl[data-frame=blackbgbox] .px-history .navButton .btn-prev,
.fl[data-frame=blackbgbox] .px-history .navButton .btn-next, .fl[data-background-media=true] .px-history .navButton .btn-prev,
.fl[data-background-media=true] .px-history .navButton .btn-next {
  color: var(--contrastColorInverted);
}
.px-history .editor-hint {
  margin: 0 0 10px;
  font-size: var(--miniFontSize);
  color: var(--darkGray);
}