.timeline {
    display: grid;
    grid-template-columns: .25rem 1fr;
    grid-auto-columns: -webkit-max-content;
    grid-auto-columns: max-content;
    -webkit-column-gap: 2rem;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    list-style: none
}

.timeline::before {
    content: "";
    grid-column: 1;
    grid-row: 1/span 20;
    background: #f8f7fa;
    /* margin-top: 20px;
    margin-bottom: -20px; */
}

@media (max-width: 767px) {
    .timeline::before {
        margin-top: 20px;
        margin-bottom: -20px;
    }
}

.timeline li {
    position: relative;
    grid-column: 2;
    margin-inline:1.5rem;
    grid-row: span 2;
    display: grid;
    grid-template-rows: -webkit-min-content -webkit-min-content -webkit-min-content;
    grid-template-rows: min-content min-content min-content
}

.timeline li:not(:last-child) {
    margin-bottom: 2rem
}

.timeline li .date {
    height: 2.925rem;
    margin-inline:-1.5rem;
    text-align: center;
    color: #fff;
    display: grid;
    place-content: center;
    position: relative;
    /* border-radius: 1.5rem 0 0 1.5rem */
}



.timeline li .date::after {
    content: "";
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    background: #ed0000;
    border-radius: 15px;
    z-index: 1;
    top: 50%;
    -webkit-transform: translate(50%,-50%);
    transform: translate(50%,-50%);
    right: calc(100% + 2rem + .125rem)
}

.timeline li .title {
    position: relative;
    padding-inline:1.5rem;overflow: hidden;
    -webkit-padding-before: 1.5rem;
    padding-block-start:1.5rem;-webkit-padding-after: 1rem;
    padding-block-end:1rem;font-weight: 500
}

.timeline li .title::before {
    bottom: calc(100% + .125rem)
}

.timeline li .descr {
    position: relative;
    padding-inline:1.5rem;-webkit-padding-after: 1.5rem;
    padding-block-end:1.5rem;font-weight: 300
}

.timeline li .descr::before {
    z-index: -1;
    bottom: .25rem
}

@media (min-width: 40rem) {
    .timeline {
        grid-template-columns:1fr .25rem 1fr
    }

    .timeline::before {
        grid-column: 2
    }

    .timeline li:nth-child(odd) {
        grid-column: 1
    }

    .timeline li:nth-child(odd) .date {
        /* border-radius: 0 1.5rem 1.5rem 0 */
    }

    /* .timeline li:nth-child(odd) .date::before {
        -webkit-clip-path: polygon(0 0,100% 0,100% 100%);
        clip-path: polygon(0 0,100% 0,100% 100%);
        left: 0
    } */

    .timeline li:nth-child(odd) .date::after {
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        left: calc(100% + 2rem + .125rem)
    }

    .timeline li:nth-child(even) {
        grid-column: 3
    }

    .timeline li:nth-child(2) {
        grid-row: 2/4
    }
}

@media (min-width: 1028px) {
    .timeline li:nth-child(odd)::before {
        content: "";
        position: absolute;
        width: 40px;
        border-left: 24px solid #ed0000;
        border-top: 24px solid transparent;
        border-bottom: 23px solid transparent;
        left: 389px;
    }

    .timeline li:nth-child(even)::before {
        content: "";
        position: absolute;
        width: 40px;
        left: -64px;
        border-right: 23px solid #ed0000;
        border-top: 23px solid transparent;
        border-bottom: 24px solid transparent;
    }
}

@media (min-width: 1021px) and (max-width: 1027px) {
    .timeline li:nth-child(odd)::before {
        content: "";
        position: absolute;
        top: -.25px;
        width: 40px;
        border-left: 23px solid #ed0000;
        border-top: 23px solid transparent;
        border-bottom: 24px solid transparent;
        left: 391px;
    }

    .timeline li:nth-child(even)::before {
        content: "";
        position: absolute;
        width: 40px;
        left: -63px;
        border-right: 23px solid #ed0000;
        border-top: 23px solid transparent;
        border-bottom: 24px solid transparent;
    }
}

@media (min-width: 768px) and (max-width: 1020px) {
    /* .timeline li .date {
        height: 2.875rem;
    } */

    .timeline li:nth-child(odd)::before {
        content: "";
        position: absolute;
        width: 40px;
        border-left: 20px solid #ed0000;
        border-top: 20px solid transparent;
        border-bottom: 21px solid transparent;
        left: 279px;
    }

    .timeline li:nth-child(even)::before {
        content: "";
        position: absolute;
        width: 40px;
        left: -61px;
        border-right: 20px solid #ed0000;
        border-top: 20px solid transparent;
        border-bottom: 21px solid transparent;
    }
}

@media (min-width: 700px) and (max-width: 767px) {
    .timeline li .date {
        height: 2.925rem;
    }

    .timeline li:nth-child(odd)::before {
        content: "";
        position: absolute;
        width: 40px;
        border-left: 20px solid #ed0000;
        border-top: 20px solid transparent;
        border-bottom: 21px solid transparent;
        left: 188px;
    }

    .timeline li:nth-child(even)::before {
        content: "";
        position: absolute;
        width: 40px;
        left: -60px;
        border-right: 20px solid #ed0000;
        border-top: 20px solid transparent;
        border-bottom: 21px solid transparent;
    }
}

@media (max-width: 698px) {
    .timeline li .date {
        height: 2.75rem !important;
    }

    .timeline li::before {
        content: "";
        position: absolute;
        width: 40px;
        left: -61px;
        border-right: 15px solid #ed0000;
        border-top: 19px solid transparent;
        border-bottom: 20px solid transparent;
    }

    .timeline::before {
        grid-row: 1 / span 22 !important;
    }
}

.timeline .timeline-date {
    width: 54px;
    height: 85px;
    display: inline-block;
    padding: 8px;
    -webkit-clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);
    clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);
    z-index: 1
}

.timeline-img {
    height: 220px;
}

@media (min-width: 700px) and (max-width: 729px) {
    .timeline-img {
        height: 120px !important;
    }
}

@media (min-width: 730px) and (max-width: 821px) {
    .timeline-img {
        height: 160px !important;
    }
}

@media (max-width: 698px) {
    .timeline-img {
        height: 145px !important;
    }
}

@media (max-width: 1020px) {
    .font-milestone {
        font-size: 12px !important;
    }
}

.font-milestone {
    font-size: 15.5px;
}