.history-section {
    // background-color: rgba(0.5, 0.5, 0.5, 1);
}

.timeline-section {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.timeline {
    position: relative;

    .timeline-list {
        position: sticky;
        z-index: 2;
    }

    .timeline-item {
        display: grid;
        grid-template-columns: 1fr 4fr;
        padding-bottom: 1rem;
    }
    .timeline-item:last-of-type {
        padding-bottom: 0;
    }

    .timeline-item__inner {
        display: grid;

        grid-template-columns: 1fr 1fr;
    }

    .timeline-item__point-container {
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .timeline__point-container > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .timeline-item__dot-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .timeline-item__dot {
        width: 2rem;
        aspect-ratio: 1/1;
        background: white;
        border-radius: 50%;
        border: .5rem solid red;
        box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);

    }

    .timeline-item__summary {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .timeline-item.timeline-back-decoration {
        z-index: 1;
        position: absolute;
        height: 100%;
        width: 100%;
        padding: 0;
    }
    .timeline-trace {
        width: 1px;
        height: 100%;
        background: gray;
    }
}

@media (min-width: $lg-breakpoint) {
}