html,
body,
section,
article {
  display: grid;
}


.timeline {
  place-self: center;
  max-width: 50em;
}

.timeline article {
  --size: 0.625em;
  --highlight: var(--bs-primary) !important;
  --marker: radial-gradient(circle closest-side,
      var(--highlight) calc(100% - 1px),
      transparent) 0 0 / 100% var(--size);

  grid-gap: 2em;
  grid-template-columns: 1fr 1fr;
  margin-top: -1px;

  background:
    var(--marker),
    linear-gradient(var(--highlight) 0 0) 50% / 2px;

  background-repeat: no-repeat;
}

.timeline article:first-child {
  --marker: linear-gradient(var(--highlight) 0 0) 50% 0 / var(--size) calc(0.5 * var(--size));
}

.timeline article:nth-child(odd) img {
  grid-area: 1 / 1;
  justify-self: end;
}

.timeline article:not(:last-child) {
  padding-bottom: 1em;
}

.timeline article>* {
  border-radius: var(--size);
}

.timeline__content {
  padding: 1em;
  background: rgba(var(--bs-body-bg-rgb), 0.75);
  backdrop-filter: blur(10px);
}

.timeline h1 {
  margin: 0 0 var(--size);
  color: var(--bs-secondary) !important;
  font: italic 1.375em/1 rosario, sans-serif;
  text-transform: capitalize;
}

.timeline time {
  font: 700 2.5em/1.25 roboto mono, monospace;
}

.timeline hr {
  opacity: 0.3;
}

.timeline p {
  margin: 0;
  padding-top: 0.5em;
  font: 1em proza libre, sans-serif;
}

.timeline img {
  box-sizing: border-box;
  width: min(100%, 13em);
  aspect-ratio: 1.3;
  object-fit: cover;
}

@media screen and (max-width:500px) {
  .timeline {
    max-width: 100%;
    margin: 0 1em;
  }

  .timeline article:nth-child(odd) img {
    justify-self: start;
  }

  .timeline article:nth-child(even) img {
    justify-self: start;
  }

  .timeline article:nth-child(odd) .timeline__content,
  .timeline article:nth-child(even) .timeline__content {
    justify-self: start;
  }

  .timeline article {
    --size: 0.625em;
    --highlight: var(--bs-primary) !important;

    --marker: none;
    background: none;

    display: grid;
    grid-template-columns: 1fr;
    gap: 2em;

    position: relative;
    padding-left: 1.5rem;
  }

  .timeline article img {
    order: 1;
  }

  .timeline article .timeline__content {
    order: 2;
  }

  /* Vertical line */
  .timeline article::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--highlight);
  }

  /* Marker */
  .timeline article::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1.5rem;

    width: var(--size);
    height: var(--size);

    border-radius: 50%;
    background: var(--highlight);
  }
}