ul.timeline-container{--col-gap: 4rem;--row-gap: 4rem;--line-w: 2px;display:grid;grid-template-columns:var(--line-w) 1fr;grid-auto-columns:max-content;-moz-column-gap:var(--col-gap);column-gap:var(--col-gap);list-style:none;width:min(60rem,90%);margin-inline:auto}ul.timeline-container:before{content:"";grid-column:1;grid-row:1 / span 25;background:#D0D5DD;border-radius:calc(var(--line-w) / 2)}ul.timeline-container li:not(:last-child){margin-bottom:var(--row-gap)}ul.timeline-container li{grid-column:2;--inlineP: 1.5rem;margin-inline:var(--inlineP);grid-row:span 2;display:grid;grid-template-rows:min-content min-content min-content}ul.timeline-container li .date{--dateH: 3rem;height:var(--dateH);margin-inline:calc(var(--inlineP) * -1);text-align:center;background-color:var(--accent-color);color:#fff;font-size:1.25rem;font-weight:700;display:grid;place-content:center;position:relative;border-radius:calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2)}ul.timeline-container li .date:before{content:"";width:var(--inlineP);aspect-ratio:1;background:var(--accent-color);background-image:linear-gradient(rgba(0,0,0,.2) 100%,transparent);position:absolute;top:100%;-webkit-clip-path:polygon(0 0,100% 0,0 100%);clip-path:polygon(0 0,100% 0,0 100%);right:0}ul.timeline-container li .date:after{content:"●";position:absolute;width:2rem;height:2rem;aspect-ratio:1;background:white;color:#e2e4e7;box-shadow:0 0 0 5px #fff;border:2px solid #e2e4e7;border-radius:50%;top:50%;font-size:30px;display:flex;justify-content:center;align-items:center;padding-bottom:3px;transform:translate(50%,-50%);right:calc(100% + var(--col-gap) + var(--line-w) / 2)}ul.timeline-container li .title,ul.timeline-container li .descr{background:white;position:relative;padding-inline:1.5rem}ul.timeline-container li .title{overflow:hidden;padding-block-start:1.5rem;padding-block-end:1rem;font-weight:500}ul.timeline-container li .descr{padding-block-end:1.5rem;font-weight:300}ul.timeline-container li .title:before{bottom:calc(100% + .125rem)}ul.timeline-container li .descr:before{z-index:-1;bottom:.25rem}ul.timeline-container li .date.is-passed:after{background:#001148;color:#fff;content:"●";border-color:#001148;box-shadow:0 0 0 5px #fff}ul.timeline-container li .date.is-on:after{background:white;color:#001148;content:"●";box-shadow:0 0 0 5px #d9e0f4,0 0 0 10px #fff;border-color:#001148}@media (min-width: 1025px){ul.timeline-container{grid-template-columns:1fr var(--line-w) 1fr}ul.timeline-container:before{grid-column:2}ul.timeline-container li:nth-child(odd){grid-column:1}ul.timeline-container li:nth-child(2n){grid-column:3}ul.timeline-container li:nth-child(2){grid-row:2/4}ul.timeline-container 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}ul.timeline-container li:nth-child(odd) .date:after{transform:translate(-50%,-50%);left:calc(100% + var(--col-gap) + var(--line-w) / 2)}ul.timeline-container li:nth-child(odd) .date{border-radius:0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0}}@media screen and (max-width: 1024px){ul.timeline-container{padding-left:2rem;--col-gap: 2rem;--row-gap: 2rem}}.custom-timeline-shadow{box-shadow:0 2px 11px #1312421a}.follow_progress{--height-line: 0px;height:100%;width:2px}.follow_progress.dynamic{transition:height .5s ease-out;height:var(--height-line);width:2px;background-color:#001148;opacity:1}
