@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{--color:#1e1e1e;--bgColor:#f5f5f5;min-height:100vh;color:var(--color);background:var(--bgColor);align-content:center;gap:2rem;font-family:Poppins,sans-serif;display:grid}h1{text-align:center}ul{--col-gap:2rem;--row-gap:2rem;--line-w:.25rem;grid-template-columns:var(--line-w) 1fr;-moz-column-gap:var(--col-gap);column-gap:var(--col-gap);grid-auto-columns:max-content;width:min(60rem,90%);margin-inline:auto;list-style:none;display:grid}ul:before{content:"";border-radius:calc(var(--line-w) / 2);background:#e1e1e1;grid-area:1/1/span 20}ul li:not(:last-child){margin-bottom:var(--row-gap)}ul li{--inlineP:1.5rem;margin-inline:var(--inlineP);grid-area:span 2/2;grid-template-rows:min-content min-content min-content;display:grid}ul li .date{--dateH:3rem;height:var(--dateH);margin-inline:calc(var(--inlineP) * -1);text-align:center;background-color:var(--accent-color);color:#fff;border-radius:calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);place-content:center;font-size:1.25rem;font-weight:700;display:grid;position:relative}ul li .date:before{content:"";width:var(--inlineP);aspect-ratio:1;background:var(--accent-color);clip-path:polygon(0 0,100% 0,0 100%);background-image:linear-gradient(#0003 100%,#0000);position:absolute;top:100%;right:0}ul li .date:after{content:"";aspect-ratio:1;background:var(--bgColor);border:.3rem solid var(--accent-color);width:2rem;top:50%;right:calc(100% + var(--col-gap) + var(--line-w) / 2);border-radius:50%;position:absolute;transform:translate(50%,-50%)}ul li .title,ul li .descr{background:var(--bgColor);padding-inline:1.5rem;position:relative}ul li .title{padding-block:1.5rem 1rem;font-weight:500;overflow:hidden}ul li .descr{padding-block-end:1.5rem;font-weight:300}ul li .title:before,ul li .descr:before{content:"";filter:blur(4px);background:#00000080;border-radius:50%;width:90%;height:.5rem;position:absolute;left:50%;transform:translate(-50%,50%)}ul li .title:before{bottom:calc(100% + .125rem)}ul li .descr:before{z-index:-1;bottom:.25rem}@media (min-width:40rem){ul{grid-template-columns:1fr var(--line-w) 1fr}ul:before{grid-column:2}ul li:nth-child(odd){grid-column:1}ul li:nth-child(2n){grid-column:3}ul li:nth-child(2){grid-row:2/4}ul li:nth-child(odd) .date:before{clip-path:polygon(0 0,100% 0,100% 100%);left:0}ul li:nth-child(odd) .date:after{left:calc(100% + var(--col-gap) + var(--line-w) / 2);transform:translate(-50%,-50%)}ul li:nth-child(odd) .date{border-radius:0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0}}.credits{text-align:right;margin-top:1rem}.credits a{color:var(--color)}