.timeline article {
    position: relative
}

@media screen and (min-width: 992px) {
    .timeline article {
        display: grid;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template-rows: auto;
        grid-template-columns: 1fr 24px clamp(0px, 61.81vw, 890px);
        grid-auto-columns: 1fr
    }
}

.timeline article:last-child .timeline--content {
    padding-bottom: 0
}

.timeline article:last-child .timeline--indicator {
    margin-bottom: 52px
}

@media screen and (min-width: 992px) {
    .timeline article:last-child .timeline--date {
        margin-bottom: 0
    }
}

.timeline--container {
    padding-left: 40px;
    position: relative
}

@media screen and (min-width: 992px) {
    .timeline--container {
        padding-left: 0
    }
}

.timeline--date {
    font-family: var(--title);
    color: var(--light-green);
    font-size: 3rem;
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -1.44px;
    display: block;
    margin-bottom: 16px;
    opacity: .4;
    transition: all .4s ease
}

.timeline--date.active {
    opacity: 1
}

@media screen and (min-width: 992px) {
    .timeline--date {
        position: -webkit-sticky;
        position: sticky;
        top: 50vh;
        font-size: 6.5rem;
        margin-bottom: 80px
    }
}

.timeline--inner {
    opacity: .4;
    transition: all .4s ease
}

.timeline--inner.active {
    opacity: 1
}

.timeline--content {
    display: flex;
    flex-direction: column;
    padding-bottom: 56px
}

@media screen and (min-width: 992px) {
    .timeline--content {
        padding-left: 120px;
        border-left: 4px solid var(--gold);
        padding-bottom: 80px
    }
}

@media screen and (min-width: 1280px) {

    .timeline--content p,
    .timeline--content h5 {
        padding-right: 172px
    }
}

.timeline--content p+p {
    margin-top: 16px
}

.timeline--content h5 {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 16px;
    letter-spacing: unset
}

.timeline--content img {
    margin-top: 32px;
    width: 100%;
    height: 250px;
    -o-object-fit: cover;
    object-fit: cover
}

@media screen and (min-width: 992px) {
    .timeline--content img {
        margin-top: 40px;
        height: 350px
    }
}

.timeline--bar-container {
    position: absolute;
    height: calc(100% - 7px);
    width: 2px;
    left: 7px;
    top: 7px;
    background: var(--gold)
}

@media screen and (min-width: 992px) {
    .timeline--bar-container {
        display: none
    }
}

.timeline--indicator {
    position: absolute;
    left: -18px;
    top: 24px;
    height: 28px;
    width: 28px;
    border: 6px solid var(--white);
    border-radius: 50%;
    background: var(--gold);
    transform: translateX(-100%)
}

@media screen and (min-width: 992px) {
    .timeline--indicator {
        position: -webkit-sticky;
        position: sticky;
        height: 24px;
        width: 24px;
        transform: none;
        left: auto;
        top: calc(50vh + 48px);
        margin-top: 48px;
        margin-bottom: 132px;
        transform: translateX(14px)
    }
}