Как создать данную дорожную карту?

Рональд Макдональд,

<div class="map" id="map">

         <div class="tittle">
            <h5 class="map_tittle "></h5>
            <h2 class="map_tittle-text w7"></h2>
         </div>
         <div class="content-1">
            <h2 class="map_data"><li>2020</li></h2>
            <ul class="map_ul">
               <li class="map_li"><span></span> </li>
               <li class="map_li"><span></span> </li>
               <li class="map_li"><span> </span></li>
               <li class="map_li"><span></span> </li>
               <li class="map_li"><span></span> </li>
            </ul>
         </div>
         <div class="content-2">
            <ul class="map_ul">
               <li class="map_li"><span></span> </li>
               <li class="map_li"><span></span> </li>
               <li class="map_li"><span></span></li>
               <li class="map_li"><span></span></li>
               <li class="map_li"><span></span></li>
            </ul>
            <h2 class="map_data"><li>2021</li> </h2>
         </div>
         <div class="content-3">
            <h2 class="map_data"><li>2022</li> </h2>
            <ul class="map_ul">
               <li class="map_li"><span></span></li>
               <li class="map_li"><span></span></li>
               <li class="map_li"><span></span></li>
               <li class="map_li"><span></span></li>
            </ul>
         </div>
      </div>

.map{
   width: 1023px;
   height: 941px;
   justify-content:center;
   margin-top: 15rem;
}
.map .container{
   display: flex;
   flex-direction: column;
}

.map .tittle{
   width: 533px;
   height: 146px;
   margin: 0 auto;
   text-align: center;
   
}
.map_tittle {
   text-transform: uppercase;
   color: #02A4FC;
}
.map .container{
   display: flex;
   justify-content: space-around;
}

.map .content-1 {
   display: flex;
   flex-direction: row;
   width: 690px;
   height: 190px;
   align-items: center;
   justify-content: space-between;
   background-position: center;
}
.content-1 li{
   list-style-type: disc;
   color: #02A4FC;
}
.content-2 li{
   list-style-type: disc;
   color: #02A4FC;
}
.content-3 li{
   list-style-type: disc;
   color:rgba(255, 103, 130, 1);
}

.map .content-2 {
   display: flex;
   flex-direction: row;
   width: 690px;
   height: 190px;
   align-items: center;
   justify-content: space-between;
}

.map .content-3 {
   display: flex;
   flex-direction: row;
   width: 690px;
   height: 190px;
   align-items: center;
   justify-content: space-between;
}
.map_data .content-1{
   position:absolute;
   width: 120px;
   height: 59px;
   text-align: left;
   
}
.map_ul {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 440px;
   height: 150px;
   padding-left: 50px;
   background: #0F182B;
   border-radius: 5px;
   padding: 30px;
}
.map_li {
   list-style-type: disc;
   color: #0286FF;
}
.map_li span{
   color: white;
   align-items: center;
   font-size: 16px;
   font-weight: 400;

}