.timeline {
  padding-left: 7px;
}

.timeline-section {
  border-left: 6px solid $grey-3;
  padding: 0 0 ($gutter / 2) $gutter;
  position: relative;

  h5 {
    margin-top: 0;
  }
}

.timeline-section-node {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  position: absolute;
  top: 0;
  left: -13px;
}

.timeline-section-first {
  margin-top: $gutter;
  padding: 0 0 ($gutter / 2) $gutter;

  &.timeline-section-heading {
    h6 {
      padding: 0 0 $gutter 0;
    }
    .timeline-section-node {
      top: 0;
    }
  }

  .timeline-section-node {
    top: 0;
  }
}

.timeline-section-last {
  border-left-color: transparent;
}

.timeline-section-heading {
  padding: 0 0 $gutter $gutter;

  .timeline-section-node {
    top: 21px;
  }

  h6 {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: $grey-1;
    padding: $gutter 0;
    margin: 0;
  }
}