div.timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(60em, 90vw);
  margin-left: auto;
  margin-right: auto;
  gap: 3em;
}

div.timeline h2{
        line-height: 1.2em;
}

div.timeline-entry {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2em;
  width: 100%;
}

div.timeline-entry > img {
        border: 0px solid black;
        border-radius: 100%;
        height: 6em;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);;
}

div.timeline-entry .date {
  text-align: right;
  min-width: 8em;
}
div.timeline-entry .date > h2 {
  white-space: pre;
}

div.timeline-entry .description {
        padding: 1.5em;
  background-color: white;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   border-left: 0.5em solid #06b1e4;
}

div.timeline-entry .description > h2 {
   padding-top: 0em;
}

@media (max-width: 849px) {
  div.timeline {
    gap: 5em;
  }
  div.timeline-entry {
    flex-direction: column;
    gap: 0.5em;
  }
  div.timeline-entry > img {
    display: none;
  }
  div.timeline-entry > .date {
    width: 100%;
  }
  div.timeline-entry > .date > h2 {
    font-size: 1.5em;
    white-space: unset;
  }
  div.description {
    width: 90%;
  }
}