/* Timeline */

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 100px auto;

  &::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 100%;
    background: #4f5d73;
    top: 0;
    left: 50%;
    margin-left: -3px;
    z-index: 1;
  }
}

.container {
  padding: 10px 50px;
  position: relative;
  width: 50%;

  .timeline-img {
    width: 100%;
  }

  .timeline-icon {
    position: absolute;
    width: 10%;
    border-radius: 50%;
    top: 61.5%;
    z-index: 10;
  }

  &:nth-child(odd) {
    left: 0;

    .timeline-icon {
      right: -5%;
    }
  }

  &:nth-child(even) {
    left: 50%;

    .timeline-icon {
      left: -5%;
    }
  }
}

.text-box {
  padding: 20px;
  border: #4f5d73 solid 3px;
  position: relative;
  border-radius: 6px;

  h2 {
    font-weight: 600;
    margin-bottom: 0;
  }

  small {
    display: inline-block;
    margin-bottom: 15px;
  }
}

.arrow {
  height: 0;
  width: 0;
  position: absolute;
  top: 28px;
  z-index: 1;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;

  &.left-arrow {
    border-left: 15px solid #4f5d73;
    right: -15px;
  }

  &.right-arrow {
    border-right: 15px solid #4f5d73;
    left: -15px;
  }
}

@include breakpoint("<=small") {
  .timeline {
    margin: 50px auto;

    &::after {
      left: 31px;
    }
  }

  .container {
    width: 100%;
    padding-left: 80px;
    padding-right: 25px;

    &:nth-child(even) {
      left: 0;
    }

    &:nth-child(odd) .timeline-icon,
    &:nth-child(even) .timeline-icon {
      left: 16px;
      top: 51.5%;
    }
  }

  .text-box {
    font-size: 13px;

    small {
      margin-bottom: 10px;
    }

    .arrow {
      &.left-arrow,
      &.right-arrow {
        border-right: 15px solid #4f5d73;
        border-left: 0;
        left: -17px;
      }
    }
  }
}