.timeline {
    position: relative;
    --content-offset: 1.25rem;
    --line-size: 2px;
    --blob-size: 12px;
}
  
.timeline-content {
    position: relative;
    padding-left: var(--content-offset);
    padding-bottom: 0.8rem;
}

/* The line */
.timeline::after {
    content: "";
    position: absolute;
    top: calc(var(--blob-size));
    left: calc((var(--blob-size) * 0.5) - (var(--line-size) * 0.5)); /* This stays the same */
    bottom: 0;
    width: var(--line-size);
    background-color: var(--color-accent);
    z-index: 0;
}

/* The stopper */
.timeline::before {
    content: "";
    position: absolute;
    background-color: var(--color-accent);
    bottom: 0;
    left: 0;
    height: var(--line-size);
    width: var(--blob-size);
}

/* The blobs */
.timeline-content::after {
    content: "";
    background-color: white;
    position: absolute;
    top: calc(var(--blob-size) / 2);
    left: 0;
    width: var(--blob-size);
    height: var(--blob-size);

    z-index: 1;

    border-radius: 50%;
    border-width: 2px;
    border-color: var(--color-accent);
    border-style: solid;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color: var(--color-accent);
}

.wexp-header {
    display: grid;
    grid-template-areas:
      "title date"
      "employer employer";
    padding-bottom: 4px;
}
  
.wexp-header > h3.wexp-title {
    grid-area: title;
    margin-top: 0;
    padding-top: 0;
}

.wexp-header > p.wexp-employer {
    grid-area: employer;
    margin-top: auto;
    margin-bottom: 0.25rem;
    color: var(--color-text);
    font-style: italic;
}

.wexp-header > p.wexp-date {
    text-align: right;
    grid-area: date;
    margin-top: auto;
    margin-bottom: 0;
    font-style: italic;
}