.timeline { position: relative; max-width: 1200px; margin: 0 auto 30px auto; padding: 40px 0; width: 720px; height: fit-content; display: flex; flex-direction: column; gap: 60px; }
.timeline .line { position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: #1c2d46; z-index: 999; }

.timeline .event { width: 320px; z-index: 9999; }

.timeline .event:nth-child(even) { align-self: flex-start; margin-right: 60px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; transition: box-shadow 0.2s linear; }
.timeline .event:nth-child(even) .header::before { content: ""; position: absolute; right: -25px; top: calc(50% - 20px); width: 40px; height: 40px; background: url(/assets/2024/images/icons/icon_triangle_right.svg); background-size: contain; background-position: center; background-repeat: no-repeat; }
.timeline .event:nth-child(even) .header::after { content: ""; position: absolute; top: calc((85px / 2) - 15px); right: -55px; width: 10px; height: 10px; background: #57b2b8; border-radius: 50%; display: flex; align-items: center; border: 10px solid #fff; justify-content: center; transition: background 0.4s linear; }
.timeline .event:nth-child(even):hover { background: #1c2d46; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; transition: 0.2s linear; }
.timeline .event:nth-child(even):hover .header::after { background: #F04D2A; transition: background 0.2s linear; }

.timeline .event:nth-child(odd) { align-self: flex-end; margin-left: 60px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; transition: box-shadow 0.2s linear; }
.timeline .event:nth-child(odd) .header::before { content: ""; position: absolute; left: -25px; top: calc(50% - 20px); width: 40px; height: 40px; background: url(/assets/2024/images/icons/icon_triangle_left.svg); background-size: contain; background-position: center; background-repeat: no-repeat; }
.timeline .event:nth-child(odd) .header::after { content: ""; position: absolute; top: calc((85px / 2) - 15px); left: -55px; width: 10px; height: 10px; background: #57b2b8; border-radius: 50%; display: flex; align-items: center; border: 10px solid #fff; justify-content: center; transition: background 0.4s linear; }
.timeline .event:nth-child(odd):hover { background: #1c2d46; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; transition: 0.2s linear; }
.timeline .event:nth-child(odd):hover .header::after { background: #F04D2A; transition: background 0.2s linear; }

.timeline .event .header { position: relative; box-sizing: border-box; width: 100%; height: 85px; display: flex; flex-direction: row; align-items: center; gap: 15px; padding: 15px; background-color: #57b2b8; }
.timeline .event .header .year { font-weight: 600; font-size: 35px; color: #fff; border-right: 1px solid #fff; padding-right: 10px; }
.timeline .event .header .title { font-weight: 600; font-size: 18px; color: #fff; text-transform: uppercase; }
.timeline .event .content { box-sizing: border-box; background: #fff; width: 100%; padding: 15px; }
.timeline .event .content .description { font-weight: 400; font-size: 14px; color: #1c2d46; }
.timeline .event .content .description p { margin: 0; }
.timeline .event .content .image { width: 100%; height: 100px; margin-top: 15px; }
.timeline .event .content .image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }


/* 800px --------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .timeline { padding: 0; margin: 30px auto 50px auto; width: fit-content; }
  .timeline .event { width: fit-content; max-width: 320px; }
  .timeline .event:nth-child(odd) { align-self: center; margin-right: 0; margin-left: 0; }
  .timeline .event:nth-child(even) { align-self: center; margin-right: 0; margin-left: 0; }

  .timeline .event:nth-child(odd) .header::before { display: none; }
  .timeline .event:nth-child(odd) .header::after { display: none;}
  .timeline .event:nth-child(even) .header::before { display: none; }
  .timeline .event:nth-child(even) .header::after { display: none;}
}