.timeline-container{display:grid;align-content:center;gap:2rem;padding:2rem}.timeline{--col-gap:2rem;--row-gap:2rem;--line-w:0.25rem;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;position:relative}.timeline:before{content:"";grid-column:1;grid-row:1/span 20;background:rgb(225,225,225);border-radius:calc(var(--line-w) / 2)}.timeline li:not(:last-child){margin-bottom:var(--row-gap)}.timeline 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;position:relative;filter:drop-shadow(.25rem .25rem .5rem rgba(0,0,0,.1))}.timeline li .date{--dateH:3rem;height:var(--dateH);margin-inline:calc(var(--inlineP) * -1);text-align:center;background-color:var(--accent-color);color:white;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);box-shadow:0 .5rem 1rem rgba(0,0,0,.1)}.timeline 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%;clip-path:polygon(0 0,100% 0,0 100%);right:0}.timeline li .date:after{content:"";position:absolute;width:2rem;aspect-ratio:1;background:var(--bg-color,white);border:.3rem solid var(--accent-color);border-radius:50%;top:50%;transform:translate(50%,-50%);right:calc(100% + var(--col-gap) + var(--line-w) / 2);box-shadow:0 .25rem .5rem rgba(0,0,0,.1)}.timeline li .descr,.timeline li .title{background:var(--bg-color,white);position:relative;padding-inline:1.5rem}.timeline li .title{overflow:hidden;padding-block-start:1.5rem;padding-block-end:1rem;font-weight:500;font-size:1.25rem;color:var(--title-color,#1e293b);display:flex;align-items:center;gap:1.5rem}.timeline li .title .icon{font-size:1.5rem;min-width:2rem;text-align:center}.timeline li .descr{padding-block-end:1.5rem;font-weight:300;color:var(--text-color,#64748b)}:root[class~=dark] .timeline li .title{--title-color:#f8fafc;--bg-color:#1e293b}:root[class~=dark] .timeline li .descr{--text-color:#cbd5e1;--bg-color:#1e293b}:root[class~=dark] .timeline:before{background:rgb(51,65,85)}@media (min-width:40rem){.timeline{grid-template-columns:1fr var(--line-w) 1fr}.timeline:before{grid-column:2}.timeline li:nth-child(odd){grid-column:1}.timeline li:nth-child(2n){grid-column:3}.timeline li:nth-child(2){grid-row:2/4}.timeline li:nth-child(odd) .date:before{clip-path:polygon(0 0,100% 0,100% 100%);left:0}.timeline li:nth-child(odd) .date:after{transform:translate(-50%,-50%);left:calc(100% + var(--col-gap) + var(--line-w) / 2)}.timeline li:nth-child(odd) .date{border-radius:0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0}}