gt-block-timeline {
  --accent-color: var(--color__secondary);
  --dot-size: 68px;
  --description-width: 220px;
  display: block;
  padding-block: calc(var(--dot-size)/ 2);
  padding-inline: 10cqw;
  container-type: inline-size
}
@container (min-width:1140px) {
  gt-block-timeline {
    display: flex;
    align-items: center;
    min-height: 650px;
    padding-left: 0;
    padding-right: 0
  }
}
gt-block-timeline ol.timeline-list {
  --gap: 50px;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap)
}
@container (min-width:1140px) {
  gt-block-timeline ol.timeline-list {
    --gap: 0;
    flex-direction: row;
    width: clamp(200px,100%,100vw - (100vw - 1140px) / 2 - var(--description-width));
    height: 1px;
    background-color: #000
  }
}
gt-block-timeline li {
  --animation-delay: calc(var(--index) * 0.15s)!important;
  display: grid;
  gap: 1.4em;
  position: relative;
  padding-left: 80px
}
@container (max-width:1139px) {
  gt-block-timeline li {
    --animation-delay: 0s!important
  }
}
@container (min-width:1140px) {
  gt-block-timeline li {
    padding: 0;
    width: calc(100% / (var(--timeline-items-count) - 1))
  }
}
@container (min-width:1140px) {
  gt-block-timeline li:last-child {
    width: 0
  }
}
gt-block-timeline li:not(:last-child):before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 1px;
  height: calc(100% + var(--gap));
  background-color: #000
}
@container (min-width:1140px) {
  gt-block-timeline li:not(:last-child):before {
    display: none;
    width: calc(100cqw / var(--timeline-items-count));
    height: 1px
  }
}
gt-block-timeline li:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: #fff;
  box-shadow: 0 0 23px rgba(0,0,0,.25);
  border: 5px solid #fff;
  border-radius: 100%;
  transform: translateX(-50%) translateY(-50%);
  transition: background-color .3s ease
}
gt-block-timeline li:has(p.timeline-description:hover):after {
  background-color: var(--accent-color)
}
gt-block-timeline time {
  position: relative;
  font-family: Eurostile,sans-serif;
  font-size: 22px;
  line-height: 0;
  font-weight: 700;
  color: var(--accent-color)
}
@container (min-width:1140px) {
  gt-block-timeline time {
    position: absolute;
    top: calc(var(--dot-size)/ 2 + 40px);
    left: 0;
    transform: translateX(-50%);
    width: fit-content
  }
}
gt-block-timeline time:before {
  display: block;
  position: absolute;
  right: calc(100% + 20px);
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 60px;
  height: 1px;
  background-color: #000
}
@container (min-width:1140px) {
  gt-block-timeline time:before {
    display: none
  }
}
gt-block-timeline p.timeline-description {
  margin: 0;
  font-size: clamp(18px, 2.5cqw, 20px)
}
@container (min-width:1140px) {
  gt-block-timeline p.timeline-description {
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(100px,100cqw / (var(--timeline-items-count) + 1) * 2 - 10px,var(--description-width));
    padding-bottom: 120px
  }
  gt-block-timeline p.timeline-description:before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 1px;
    height: 83px;
    background-color: #000
  }
}
gt-block-timeline li:nth-child(2n) {
  --accent-color: var(--color__primary)
}
@container (min-width:1140px) {
  gt-block-timeline li:nth-child(2n) time {
    top: auto;
    bottom: calc(var(--dot-size)/ 2 + 40px)
  }
  gt-block-timeline li:nth-child(2n) p.timeline-description {
    top: 0;
    bottom: auto;
    padding-bottom: 0;
    padding-top: 120px
  }
  gt-block-timeline li:nth-child(2n) p.timeline-description:before {
    bottom: auto;
    top: 0
  }
}
gt-block-timeline[preview-mode=true] ol.timeline-list {
  width: clamp(200px,100%,100cqw - 180px)
}