/*!************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/timeline/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************/
main {
  --gap: 0;
}
main section:last-of-type {
  margin-bottom: 0;
}
#at-a-glance {
  padding: 0 10vw;
  --gap: 0;
}
#at-a-glance img {
  width: 100%;
  height: auto;
  border: 2px solid rgb(var(--action-0));
}
#at-a-glance h3 {
  font-size: var(--txt-x-small);
}
#at-a-glance .before img {
  border-left-width: 1px;
  border-right: 0;
  border-top: 0;
}
#at-a-glance .after img {
  border-right-width: 1px;
  border-left: 0;
  border-bottom: 0;
}
.timeline-point.timeline-point {
  --lineWidth: 1px;
  --gap: 2rem;
  padding: 0;
  margin: 0;
  background-color: rgb(var(--base));
  max-width: 100vw;
  position: relative;
  overflow: hidden;
}
.timeline-point.timeline-point img {
  width: 40%;
  border-radius: 4px;
  position: sticky;
  padding: 0.5rem;
}
.timeline-point.timeline-point .info {
  padding: 1rem 0.5rem 0.5rem;
  width: 60%;
  position: relative;
}
.timeline-point.timeline-point .info h2 {
  margin: 0 0 0.5rem;
  font-size: var(--txt-medium);
  position: relative;
}
.timeline-point.timeline-point .info h2 .icon {
  --w: 2.5rem;
  transform: rotate(90deg);
  position: absolute;
  right: -2.5rem;
  top: 0.25rem;
  background-color: rgb(var(--action-100));
}
.timeline-point.timeline-point::before, .timeline-point.timeline-point::after {
  content: "";
  display: block;
  position: absolute;
  right: 45%;
  height: 100%;
  width: var(--lineWidth);
  background-color: rgb(var(--action-0));
}
.timeline-point.timeline-point::before {
  height: 1rem;
}
.timeline-point.timeline-point::after {
  top: 4rem;
}
.timeline-point.timeline-point#before-treatment::before, .timeline-point.timeline-point:last-of-type::after {
  display: none;
}
@media (min-width: 768px) {
  #at-a-glance h3 {
    font-size: var(--txt-x-large);
  }
  .timeline-point.timeline-point {
    --gap: 4rem;
  }
  .timeline-point.timeline-point img {
    width: 50%;
  }
  .timeline-point.timeline-point .info {
    width: 50%;
    padding: 25vh 1rem 1rem;
  }
  .timeline-point.timeline-point .info h2 .icon {
    --w: 4rem;
    right: -6.15rem;
    top: 0;
  }
  .timeline-point.timeline-point .info a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .timeline-point.timeline-point .info time {
    text-transform: uppercase;
    font-size: var(--txt-x-small);
  }
  .timeline-point.timeline-point::before, .timeline-point.timeline-point::after {
    right: calc(50% + 2rem);
  }
  .timeline-point.timeline-point::before {
    height: calc(25vh - 2rem);
  }
  .timeline-point.timeline-point::after {
    top: calc(25vh + 6rem);
  }
}