@media (min-width: 50em) {
  .roadmap-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "info timeline"
      "faq timeline";
  }

  .info {
    grid-area: info;
  }

  .faq {
    grid-area: faq;
  }

  .timeline {
    grid-area: timeline;
  }
}

.timeline {
  position: relative;
  width: fit-content;
  padding-left: 32px;
  padding-right: 1rem;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  width: 4px;
  height: 100%;
  background-image: linear-gradient(180deg, transparent, var(--clr-primary-500), transparent);
}

@media (min-width: 40em) {
  .timeline {
    padding-left: 80px;
  }

  .timeline::before {
    left: 40px;
  }
}

.phase {
  position: relative;
  padding: 1rem;
  margin: 2rem 0;
  border-radius: 16px;
  background-color: var(--clr-neutral-700);
}

.phase::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  width: 20px;
  height: 4px;
  margin: auto 0;
  background-color: var(--clr-primary-500);
}

.phase::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  width: 16px;
  height: 16px;
  margin: auto 0;
  border-radius: 100vw;
  background-color: var(--clr-primary-500);
}

@media (min-width: 40em) {
  .phase::before {
    left: -40px;
    width: 40px;
  }

  .phase::after {
    left: -45px;
  }
}

.phase h3 {
  margin: 0;
  color: var(--clr-neutral-100);
  font-size: 1.25rem;
}

.phase ul {
  color: var(--clr-neutral-300);
}

.faq dt {
  margin-top: 1em;
  color: var(--clr-neutral-600);
  font-size: 1.125rem;
  font-weight: 600;
}