.course-timeline {
    --pink-ct: #F946AC;
    --orange-ct: #FF9100;
    --blue-ct: #5871FF;


    display: flex;flex-direction: row;min-height: 320px; width: 100%; position: relative;
    &::after {content: "";display: block; width: calc(100% - 230px); height: 1px; background: #939393; position: absolute; top: 50%; left: 30px; z-index: -1;}
    
    .course-timeline-item{display: flex;flex-direction: column; position: relative; flex-grow: 1;}
    .cti-time-point{display: flex; flex-direction: column;align-items: center; flex-shrink: 0; min-height: 46px; width: 58px; margin-bottom: 12px;}
    .cti-time-point .cti-dot{display: flex;width: 17px;height: 17px;border-radius: 50%;background-color: #ddd;flex-shrink: 0;}
    .cti-time-point .cti-line{display: flex;width: 1px;height: 100%;background-color: #939393;}
    .cti-content{display: flex;flex-direction: column; gap: 5px;}
    .cti-content .cti-date{font-size: 1.375rem; line-height: normal; text-transform: uppercase;}
    .cti-content .cti-day{font-size: 1.25rem; line-height: normal; text-transform: uppercase;}
    .cti-content .cti-info{font-size: 1.125rem; line-height: normal; margin-bottom: 0; margin-top: 20px; color: #939393;}
    
    /* Color timeline */
    .course-timeline-item:nth-child(3n+1) {
        .cti-dot {background-color: var(--pink-ct);}
        .cti-content .cti-day{color: var(--pink-ct);}
    }
    .course-timeline-item:nth-child(3n+2) {
        .cti-dot {background-color: var(--orange-ct);}
        .cti-content .cti-day{color: var(--orange-ct);}
    }
    .course-timeline-item:nth-child(3n+3) {
        .cti-dot {background-color: var(--blue-ct);}
        .cti-content .cti-day{color: var(--blue-ct);}
    }


    @media (min-width: 768px) {
        .course-timeline-item:nth-child(odd){justify-content: end;}
        .course-timeline-item:nth-child(even){
            justify-content: start;
        
            &, .cti-time-point, .cti-content{flex-direction: column-reverse;}
            .cti-time-point {margin-bottom: 0; margin-top: 12px;}
            .cti-content .cti-info {margin-top: 0; margin-bottom: 20px;}
        }
    }


    @media (min-width: 1200px) and (max-width: 1399px) {
        &::after {width: calc(100% - 200px);}
    }


    @media (min-width: 992px) and (max-width: 1199px) {
        min-height: 290px;
        &::after {width: calc(100% - 170px);}
        .cti-content {min-height: 94px;}
    }
    @media (min-width: 768px) and (max-width: 991px) {
        min-height: 255px;
        &::after {width: calc(100% - 130px);}
        .cti-time-point {min-height: 37px;}
        .course-timeline-item:nth-child(even){
            .cti-content .cti-info {margin-top: 0; margin-bottom: 12px;}
        }
    }


    


    @media (max-width: 1199px) {
        .cti-content .cti-date{font-size: 1.125rem;}
        .cti-content .cti-day{font-size: 1rem;}
        .cti-content .cti-info{font-size: 0.875rem;}
        .cti-content .cti-info{margin-top: 12px;}
    }
    @media (max-width: 991px) {
        .cti-time-point .cti-dot{width: 15px; height: 15px;}                
    }
    @media (max-width: 767px) {
        flex-direction: column;
        &::after {display: none;}


        .course-timeline-item {flex-direction: row; gap: 12px;}
        .cti-time-point {margin-bottom: 0; min-height: auto; width: 15px;}
        .cti-content{margin-bottom: 40px;}
        .course-timeline-item:last-child .cti-time-point .cti-line{display: none;}
    }
}