div#historic {
    --mark-size: 18px;
    display: flex;
    flex-flow: column;
    position: relative;
    margin-left: 1em;
    gap: 10px
}

.entry {
    display: flex;
    align-items: center;
}

.mark {
    width: var(--mark-size);
    height: var(--mark-size);
    background: black;
    border-radius: 50%;
}

iframe {
    --scale: 0.3;
    zoom: var(--scale);
    width: calc(500px/var(--scale));
    height: calc(300px/var(--scale));
    pointer-events: none;
    border: none;
    display: block;
}

.content {
    border: 1px solid gray;
    border-radius: 10px;
    overflow: hidden;
}

.arrow {
    margin-left: 1em;
    position: relative;
    display: inline-block;
}

.arrow::before {
    --size: 10px;
    content:"";
    position: absolute;
    height: 0px;
    width: 0px;
    top: calc(50% - var(--size));
    left: calc(var(--size)*-2);
    border-width: var(--size);
    border-color: transparent gray transparent transparent;
    border-style: solid;
}

div#historic::before {
    --width: 6px;
    content: "";
    position: absolute;
    background: gray;
    height: 100%;
    width: var(--width);
    top: 0;
    z-index: -1;
    border-radius: 3px;
    left: calc(var(--mark-size)/2 - var(--width)/2);
}