.timeline--eyebrow {
  margin-top: 20px;
}
.timeline--events-container {
  position: relative;
}
@media screen and (width < 48rem) {
  .timeline--events-container {
    grid-column: full-width !important;
  }
}
@media screen and (width >= 48rem) {
  .timeline--events-container {
    max-width: 1190px;
    padding-inline: 1.25rem;
    margin-inline: auto;
  }
}
.timeline--events {
  padding-top: 45px;
}
@media screen and (width >= 48rem) {
  .timeline--events {
    margin-bottom: 80px;
  }
  .timeline--events::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background-color: var(--Indigo);
    border-radius: 50%;
    z-index: 1;
  }
}
.timeline--event {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
@media screen and (width < 48rem) {
  .timeline--event {
    flex-basis: 100%;
    flex-shrink: 0;
    gap: 80px;
  }
}
@media screen and (width >= 48rem) {
  .timeline--event {
    flex-direction: row;
    gap: 13%;
    padding-top: 120px;
    padding-bottom: 120px;
  }
}
@media screen and (width >= 48rem) {
  .timeline--event::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--Indigo);
    border-radius: 50%;
    z-index: 1;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (width >= 48rem) {
  .timeline--event::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    border-right: 1px dashed var(--Medium-Periwinkle);
  }
}
@media screen and (width >= 48rem) {
  .timeline--event > * {
    flex: 1;
  }
}
.timeline--content {
  position: relative;
}
@media screen and (width < 48rem) {
  .timeline--content {
    padding-inline: 20px;
  }
  .timeline--content::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--Indigo);
    border-radius: 50%;
    z-index: 1;
    top: -40px;
    left: 20px;
  }
  .timeline--content::after {
    content: "";
    position: absolute;
    top: -35px;
    left: 32px;
    width: 100%;
    height: 1px;
    border-top: 1px dashed var(--Medium-Periwinkle);
  }
}
@media screen and (width < 48rem) {
  .timeline--event:last-child .timeline--content::after {
    content: none;
  }
}
@media screen and (width < 48rem) {
  .timeline--image {
    padding-inline: 35px;
  }
}
.timeline--text {
  margin-top: 10px;
}