open-consul/website/source/assets/stylesheets/consul-connect/components/_timeline.scss

// TODO - handle situations where title or sub-heading are breaking to next line

.g-timeline {
  align-content: space-between;
  display: flex;
  justify-content: center;
  margin: 0 (-$site-gutter-padding);
  text-align: center;

  &.no-intro {
    margin-top: -90px;
  }

  & > div {
    padding: 40px $site-gutter-padding 0;
    position: relative;
    width: 50%;

    &:last-child .dot {
      border-color: #ca2171;
    }

    .line {
      background-image: linear-gradient(
        90deg,
        rgba(229, 230, 235, 0) 5%,
        #dadce3 26%,
        #d2d4dc 43%,
        #c82070 100%
      );
      height: 2px;
      position: absolute;
      right: calc(50% + 34px);
      top: 8px;
      width: 1038px;

      svg {
        position: absolute;
        right: -10px;
        top: -6px;
      }
    }

    h3 {
      margin: 0 0 8px;
    }

    .sub-heading {
      display: block;
      font-size: 1.8rem;
      margin-bottom: 40px;
    }

    .dot {
      background: #f7f8fa;
      border: 2px solid #d2d4dc;
      border-radius: 50%;
      display: inline-block;
      height: 18px;
      left: 50%;
      margin: 0 0 0 -9px;
      position: absolute;
      top: 0;
      width: 18px;
      z-index: 1;
    }

    img {
      max-width: 100%;
    }

    p {
      font-size: 1.6rem;
      margin-top: 40px;
    }
  }
}