.timeline {
  position: relative;
}

.timeline_date {
  position: relative;
  display: inline-block;
  background-color: var(--bs-danger);
  font-weight: bold;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  transform: skew(-22.5deg);
}

.timeline_date span {
  display: block;
  transform: skew(22.5deg);
}

@media (max-width: 991px) {
  .timeline_date:before {
    position: absolute;
    content: '';
    display: block;
    left: calc(50% - 2px);
    top: -75%;
    border: 2px dashed var(--bs-danger);
    width: 2px;
    height: 250%;
    transform: skew(22.5deg);
  }
}

@media (min-width: 992px) {
  .timeline:before {
    position: absolute;
    left: calc(50% - 1px);
    top: 0;
    display: block;
    content: '';
    border: 2px dashed var(--bs-danger);
    height: 100%;
  }

  .timeline_left {
    position: relative;
  }

  .timeline_left:after {
    position: absolute;
    right: -15%;
    top: calc(50% - 2px);
    content: '';
    display: block;
    border: 2px dashed var(--bs-danger);
    transform: skew(-22.5deg);
    width: 10%;
  }

  .timeline_right {
    position: relative;
  }

  .timeline_right:after {
    position: absolute;
    left: -15%;
    top: calc(50% - 2px);
    content: '';
    display: block;
    border: 2px dashed var(--bs-danger);
    transform: skew(-22.5deg);
    width: 10%;
  }
}