.timeline-container {
  position: relative;
  padding: 0 15px;
}

.timeline {
  display: none;
  border-left: 1px solid;
      border-color: #F87565;
    position: absolute;
    height: 85%;
    top: 50%;
    transform: translateY(-50%);
}

.timeline-card {
  max-width: 554px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 40px;
  padding: 40px;
  text-align: left;
  margin-bottom: 10px;
}

.timeline-card--left {
  
}

.timeline-card--right {
  left: 0;
}


[class^="triangle"] {
    width: 52px;
    height: 52px;
    border: 2px solid #F87565;
    position: absolute;
    border-right: none;
    border-bottom: none;
    left: 50%;
  }

  [class^="triangle"]:before {
    position: absolute;
    content: "";
    border-top: 2px solid #F87565;
    width: calc(1.41 * (50px + 2px));
    transform: rotate(-45deg);
    left: -12px;
    top: 24px;
  }


  .triangle--first {
    top: calc(-1.41 * (42px + 2px));
    transform: translate(-50%, 0) rotate(225deg);
  }

  .triangle--second {
    top: 29%;
    transform: translate(calc(-50% + 1px), 0) rotate(135deg);
  }

  .triangle--third {
    top: 62%;
    transform: translate(calc(-50% - 1px), 0) rotate(-45deg);
  }

  .triangle--fourth {
    top: 100%;
    transform: translate(calc(-50% + 1px), 0) rotate(135deg);
  }

@media (min-width: 768px) {
  .timeline-container {
    position: relative;
    padding: 0;
    {#padding: 25px 0;#}
  }
  
  .timeline {
    display: block;
  }
  
  .timeline-card--right {
    left: 54%;
  }
}