.timeline {
    margin: 0 auto;
    max-width: 34.15rem;
    align-content: center;
    h1 {
        text-align: center;
        margin: 5vw auto;
        font-size: 4.3vw;
        font-weight: 700;

    .p {
        font-size: 1.5vw;
        font-weight: 400; 
    }
    }
}

.checkpoint {
    max-width: 34rem;
    padding-top: 2em;
    padding-bottom: 2em;
    position: relative;
}

.checkpoint div {
    border-radius: 1em;
    padding: 1.5em;
    background-color: #33658A;
    h2 , p {
        color: beige;
    }

}

.checkpoint .div > p {
    line-height: 27px;
}

.checkpoint:nth-child(odd) {
    border-left: 3px solid #874000 ;
    padding-left: 3em;
    transform: translateX(17em);
}

.checkpoint:nth-child(even) {
    border-right: 3px solid #874000 ;
    padding-right: 3em;
    transform: translateX(-17em);
}

.checkpoint:nth-child(even)::before , .checkpoint:nth-child(odd)::before {
    content: '';
    background: #874000 ;
    width: 3em;
    height: 3px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.checkpoint:nth-child(odd)::before {
    left: 0;
}

.checkpoint:nth-child(even)::before {
    right: 0;
}

.checkpoint:nth-child(odd) div::before , 
.checkpoint:nth-child(even) div::before {
    content: '';
    background-color:#874000 ;
    width: 0.8em;
    height: 0.8em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
}

.checkpoint:nth-child(odd) div::before {
    left: -0.5em;
}

.checkpoint:nth-child(even) div::before {
    right: -0.5em;
}

@media screen and (max-width: 1150px) {
.timeline {
    width: 80vw;
    h1 {
        text-align: center;
        margin: 5vw auto;
        font-size: 12vw;
        font-weight: 700;

    .p {
        font-size: 4vw;
        font-weight: 400; 
    }
    }
}

.timeline {
    margin: 0 auto;
    max-width: 34.15rem;
    align-content: center;
}
.timeline .checkpoint {
    width: 100%;
    transform: none;
    padding-left: 0;
    padding-right: 0;
    border: none;
}

.timeline .checkpoint::before {
    width: 3px;
    height: 4em;
    top: -2em;
    left: 50%;
    transform: translateX(-50%);
}

.timeline .checkpoint div::before {
    top: -0.5em;
    left: 50%;
    transform: translateX(-50%);
}
}