.timeline-block{position:relative;& .timeline-list{display:flex;flex-direction:column;gap:var(--spacing-20);padding-left:0}& .timeline-item{list-style:none;display:flex;flex-direction:row;gap:var(--spacing-10);&:last-of-type{position:relative;&::before{content:"";position:absolute;top:0;left:0;width:48px;height:100%;background-color:oklch(var(--color-base))}& p:last-of-type{margin-bottom:0}}}.timeline-content{width:100%}& .timeline-icon{display:flex;box-sizing:border-box;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;min-width:48px;min-height:48px;padding:.5rem;background-color:oklch(var(--color-base-minus));transition:background-color 0.3s ease;z-index:5;&.active{background-color:oklch(var(--color-contrast))}& img{width:32px;height:32px}}& h2,& h3,& h4{display:flex;align-items:center;margin:0 0 0 -6px;padding:6px;min-height:48px;width:100%;box-sizing:border-box;background:linear-gradient(90deg,oklch(var(--color-base-minus) / 1) 30%,oklch(var(--color-base-minus) / 0) 100%)}& .timeline{position:absolute;top:5px;bottom:5px;left:22px;width:4px;background-color:oklch(var(--color-base-minus));z-index:-1;-webkit-clip-path:border-box;clip-path:border-box;&::before{content:"";position:fixed;top:0;background-color:oklch(var(--color-contrast));height:50vh;width:4px;z-index:0}}}