.timeline {
  display: block;
  max-width: 768px;
  margin: 30px auto 40px;
  padding-left: 30px;
  border-left: 3px solid $color-blue-grey-2;

  %before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
    border-color: $color-blue-grey-2;
    border-radius: 50%;
    background: white;
    content: "";
    transition: all .3s ease;
  }

  &-title, &-subtitle, &-item {
    position: relative;
    margin-bottom: 25px;
    line-height: 32px;

    &:hover {
      &::before {
        border-color: $color-deep-orange-6;
      }

      a {
        color: $color-deep-orange-6;
      }
    }
  }

  &-title {
    font-size: 28px;

    &::before {
      @extend %before;
      width: 12px;
      height: 12px;
      border-width: 4px;
      left: -42px;
    }
  }

  &-subtitle {
    font-weight: normal;
    font-size: 22px;

    &::before {
      @extend %before;
      width: 11px;
      height: 11px;
      border-width: 3px;
      left: -40px;
    }
  }

  &-item {
    $time-width: 100px;
    font-family: $content-font;
    position: relative;
    padding-left: $time-width;

    time {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      display: inline-block;
      font-weight: 300;
      color: $color-grey-7;
      width: $time-width;
    }

    a {
      color: $color-grey-9;
      font-weight: normal;
      transition: all .3s ease;
    }

    &::before {
      @extend %before;
      width: 9px;
      height: 9px;
      border-width: 2px;
      left: -38px;
    }
  }
}