.timeline{& .years-wrapper{background-color:var(--color-fluent-fog);border-radius:24px;height:100%;max-height:600px;overflow-x:hidden;overflow-y:auto;padding:30px}& .years{padding-bottom:60px;padding-top:60px;position:relative;&:before{background:var(--color-white);border-radius:14px;left:-8px;width:32px}&:after,&:before{content:"";display:block;height:100%;position:absolute;top:0}&:after{background:var(--color-fluent-blue);left:7px;width:1px}}& .year-wrapper{align-items:flex-start;display:flex;gap:20px;margin-bottom:32px;position:relative;&:last-child{margin-bottom:0}}& .timeline-dot{background-color:var(--color-fluent-blue);border-radius:50%;flex-shrink:0;height:5px;left:5px;position:absolute;top:42px;width:5px;z-index:2}& .year{background-color:rgba(#fff,.99);border-radius:12px;box-shadow:0 12px 24px 0 rgba(42,46,172,.12);flex:1;margin-left:50px;padding:20px;transition:transform .3s ease,box-shadow .3s ease;p{margin-bottom:0}& .year-label{color:var(--color-black);font-size:14px;margin-bottom:4px}& .year-headline{color:var(--color-fluent-blue);font-size:20px;font-weight:700}}& .active{& .year{background-color:var(--color-white)}& .timeline-dot{height:14px;left:1px;min-width:14px;width:14px}}}