.milestone-section {
    padding: var(--section-padding-desktop);
}

.milestone-section--dark {
    background-color: var(--black);
    color: var(--white);
}

.milestone-section--dark .milestone-section__title.heading-section-lg {
    color: var(--white);
}

.milestone-section--dark .milestone-section__year {
    color: var(--color-gray-400);
}

.milestone-section--dark .milestone-section__heading {
    color: var(--white);
}

.milestone-section--dark .milestone-section__text {
    color: var(--color-gray-400);
}

.milestone-section__header {
    margin-bottom: 56px;
}

.milestone-section__header.section-header--center {
    text-align: center;
}

.milestone-section__label {
    display: inline-block;
    margin-bottom: 12px;
}

.milestone-section__title {
    margin-bottom: 0;
}

.milestone-section__timeline {
    position: relative;
    padding-left: 100px;
}

.milestone-section__timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 39px;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, var(--black) 0%, var(--color-gray-200) 100%);
    border-radius: 1px;
}

.milestone-section--dark .milestone-section__timeline::before {
    background: linear-gradient(180deg, var(--white) 0%, var(--color-gray-700) 100%);
}

.milestone-section__item {
    position: relative;
    padding-bottom: 48px;
}

.milestone-section__item:last-child {
    padding-bottom: 0;
}

.milestone-section__item::before {
    content: '';
    position: absolute;
    top: 4px;
    left: -69px;
    width: 18px;
    height: 18px;
    background-color: var(--black);
    border: 3px solid var(--white);
    box-shadow: 0 0 0 2px var(--black);
    border-radius: 50%;
    z-index: 1;
}

.milestone-section--dark .milestone-section__item::before {
    background-color: var(--white);
    border-color: var(--black);
    box-shadow: 0 0 0 2px var(--white);
}

@media (max-width: 992px) {
    .milestone-section {
        padding: var(--section-padding-mobile);
    }
}

@media (max-width: 768px) {
    .milestone-section__item::before {
        left: -45px;
        width: 14px;
        height: 14px;
    }

    .milestone-section__timeline {
        padding-left: 56px;
    }

    .milestone-section__timeline::before {
        left: 19px;
    }
}

.milestone-section__year {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--color-gray-300);
    margin-bottom: 12px;
}

.milestone-section__heading {
    margin-bottom: 8px;
}

.milestone-section__text {
    margin-bottom: 0;
}