.step-timeline {
  width: 100%;
  max-width: 50em;
  margin-left: auto;
  margin-right: auto;
}

.step-timeline__header {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 6em;
  display: flex;
}

.step-timeline__h2 {
  letter-spacing: -.05em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--font);
  font-size: 4em;
  font-weight: 400;
  line-height: 1;
}

.step-timeline__p {
  margin-bottom: 0;
  font-size: 1.125em;
  line-height: 1.4;
}

.step-timeline__eyebrow {
  color: var(--coral);
  text-transform: uppercase;
  font-family: var(--font);
  font-weight: 400;
}

.step-timeline__wrapper {
  position: relative;
}

.step-timeline__list {
  grid-column-gap: 8em;
  grid-row-gap: 8em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

.step-timeline__item {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.step-timeline__line {
  pointer-events: none;
  background-color: #18010224;
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.5em;
}

.step-timeline__fill {
  transform-origin: 50% 0;
  background-color: var(--coral);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.step-timeline__marker {
  color: var(--ink);
  background-color: var(--cream);
  border: 1px solid #0003;
  border-radius: 100em;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  transition: all .4s cubic-bezier(.645, .045, .355, 1);
  display: flex;
  position: relative;
}

/* Marker inside 'active' step item */ 
[data-step-timeline-item][data-status="active"] [data-step-timeline-marker] {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
} 

/* Marker inside 'current' step item */   
[data-step-timeline-item][data-current] [data-step-timeline-marker] {
  box-shadow: 0 0 0 0.5em rgba(241, 107, 70, 0.16);
} 

.step-timeline__content {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 28em;
  padding-top: .4em;
  transition: opacity .25s;
  display: flex;
}

/* Inactive state of the content wrapper */ 
[data-step-timeline-item] .step-timeline__content {
  opacity: 0.25;
}  

/* Make content full opacity in current step */
[data-step-timeline-item][data-status="active"] .step-timeline__content {
  opacity: 0.5;
}  

/* Make content full opacity in current step */
[data-step-timeline-item][data-current] .step-timeline__content {
  opacity: 1;
}  

.step-timeline__content-h {
  letter-spacing: -.04em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--font);
  font-size: 2em;
  font-weight: 400;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .step-timeline {
    max-width: none;
  }

  .step-timeline__list {
    grid-column-gap: 6em;
    grid-row-gap: 6em;
  }

  .step-timeline__item {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }
}