@media (max-width: 768px) {
    .card {
        margin: 1em 0;
    }
}

@media (min-width: 769px) {
    #timeLine {
        margin: 0 2em 2em;
    }
    
    #timeLineList::after {
        background-color: var(--bar);
        bottom: 0;
        content: '';
        left: calc(7.5em - 1px);
        position: absolute;
        top: 0;
        width: 2px;
    }

    .event {
        grid-template-columns: 5em 5em 1fr;
    }

    .date {
        position: sticky;
    }

    .marker {
        background-color: var(--accent);
        border-radius: 50%;
        height: 1em;
        justify-self: center;
        margin-top: 0.4em; /* Line up marker with date */
        position: sticky;
        top: 2.8em; /* Line up marker with date */
        width: 1em;
        z-index: 1;
    }

    .card {
        margin: 2em;
    }
}

#timeLine h2 {
    font-size: 2em;
    margin: 0.5em 0;
    text-align: center;
}

#timeLineList {
    list-style: none;
    position: relative;
}

.event {
    align-items: start;
    display: grid;
    position: relative;
}

.date {
    font-size: 1.2em;
    text-align: center;
    top: 2em;
}

.card h4 {
    font-size: 1.2em;
    margin-bottom: 0.25em;
    margin-top: 0.5em;
}

.card ul {
    list-style: disc;
    margin-left: 1.5em;
}