.timeline {
  --nexo-timeline-dot-size: 0.75rem;
  --nexo-timeline-dot-spacing: 0.5rem;
  --nexo-timeline-dot-margin: 0.5rem;
  --nexo-timeline-dot-margin: calc(
    0.5 * var(--nexo-timeline-heading-font-size, 1.25rem) *
      var(--nexo-heading-line-height) - 0.5 * var(--nexo-timeline-dot-size)
  );

  --nexo-timeline-line-size: 3px;
  --nexo-timeline-line-spacing: 3rem;

  grid-template-columns: repeat(2, auto);
}

.timeline-line {
  grid-row: span 2;
  grid-column: 1;

  position: relative;
  padding-right: var(--nexo-timeline-line-spacing);
}
.timeline-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--nexo-timeline-dot-margin);
  width: var(--nexo-timeline-dot-size);
  height: var(--nexo-timeline-dot-size);
  border-radius: 100%;
  background-color: currentColor;
}
.timeline-line:after {
  content: '';
  position: absolute;
  left: calc(0.5 * var(--nexo-timeline-dot-size));
  top: calc(
    var(--nexo-timeline-dot-margin) + var(--nexo-timeline-dot-size) +
      var(--nexo-timeline-dot-spacing)
  );
  width: var(--nexo-timeline-line-size);
  height: calc(
    100% - var(--nexo-timeline-dot-size) - 2 * var(--nexo-timeline-dot-spacing)
  );
  border-radius: var(--nexo-timeline-line-size);
  background-color: currentColor;
  opacity: 0.1;
  transform: translateX(-50%);
}
.timeline-line:nth-last-child(3):after {
  display: none;
}

.timeline-year {
  grid-column: 2;
}

@media screen and (min-width: 768px) {
  .timeline {
    grid-template-columns: repeat(3, auto);
  }
  .timeline-line {
    grid-column: 2;

    padding-left: var(--nexo-timeline-line-spacing);
  }
  .timeline-line::before {
    left: 50%;
    transform: translateX(-50%);
  }
  .timeline-line:after {
    left: 50%;
  }
  .timeline-year {
    grid-column: 1;
  }
}