.timeline {position:relative;font-size:13.5px}
.timeline::before {content:""; background:#ccc; width:3px; height:95%; position:absolute; left:50%; transform:translateX(-50%)}

.timeline-item {width:100%}
.timeline-item:not(:first-of-type){margin-top:-20px}
.timeline-item::after{content:""; display:block; clear:both}

.timeline-content {position:relative; width:45%; padding:20px; border-radius:6px; background:#EBF8FF; box-shadow:0 20px 20px -25px rgba(0, 0, 0, 0.1)}
.timeline-content ul{padding-left:13px}
.timeline-content::after {content:""; position:absolute; border-style:solid; width:0; height:0; top:10px; right:-15px; border-width:10px 0 10px 15px; border-color:transparent transparent transparent #333}

.timeline-item:nth-child(even) .timeline-content::after {content:""; position:absolute; border-style:solid; width:0; height:0; top:10px; left:-15px; border-width:10px 15px 10px 0; border-color:transparent #333 transparent transparent}
.timeline-item:nth-child(even) .timeline-content {float:right}

.timeline-img {width:60px; height:60px; border-radius:50%; position:absolute; left:50%; margin-left:-30px; margin-top:-10px; background:url("https://medias.giga-concept.fr/uploads/images/timeline-icon.webp"); background-size:cover; border:5px solid #efefef; box-shadow:0 0 9px #555}

.timeline-img-header {margin:-20px -20px 20px -20px; height:140px;padding:20px}
.timeline-img-header h2 {font-size:20px;color:rgba(255,255,255,.9); text-transform:uppercase; text-shadow:1px 1px 4px #000}

.timeline-item .date{width:100%; background:linear-gradient(90deg, #fff 0%, #3067a1 100%); font-size:22px; text-shadow:1px 1px 4px #000; font-family:'Patua One',cursive; color:#fff; padding:10px; position:absolute; top:0; margin:-52px 0 0 0; right:auto; left:0; text-align:right; border-radius:6px 6px 0 0}
.timeline-item:nth-child(even) .date {background:linear-gradient(90deg, #3067a1 0%, #fff 100%); text-align:left}

 @media screen and (max-width:1024px) {
..timeline-item:not(:first-of-type) {margin-top:0}
.timeline-item {margin-bottom:80px}
.timeline::before {left:30px}
.timeline .timeline-img {left:28px}
.timeline .timeline-content {max-width:100%; width:auto; margin-left:80px}
.timeline .timeline-item:nth-child(even) .timeline-content {float:none}
.timeline-item:nth-child(even) .date {background:linear-gradient(90deg, #fff 50%, #3067a1 100%); text-align:right}
.timeline .timeline-item:nth-child(odd) .timeline-content::after {content:""; position:absolute; border-style:solid; width:0; height:0; top:12px; left:-15px; border-width:10px 15px 10px 0; border-color:transparent #EBF8FF transparent transparent}
.timeline-img-header {height:100px}
}