.next-timeline{
clip-path: inset(0 0 0 0); position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: black; color: white;
width: 100%; height: auto; --progress-bar: 3px; --progress-start: 50vh; --progress-fade-edges-height: 50px; --sticky-top: 50vh; --from-opacity: 0.25; } .next-timeline--progress{
position: absolute;
left: auto; right: auto; width: var(--progress-bar);
height: 100%; background-color: #414141; mask-image: linear-gradient(
to bottom, 
rgba(0, 0, 0, 0) 0px,
rgba(0, 0, 0) var(--progress-fade-edges-height),
rgba(0, 0, 0) calc(100% - var(--progress-fade-edges-height)),
rgba(0, 0, 0, 0) 100% 
);
}
.next-timeline--progress-bar{
position: fixed;
left: auto;
top: 0px;
right: auto;
bottom: var(--progress-start);
width: var(--progress-bar);
height: var(--progress-start);
background-image: var(--gradient);
} .next-timeline--item{
position: relative;
z-index: 2;
width: auto;
height: auto;
padding: 40px 0;
display: grid;
grid-auto-columns: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: minmax(auto, 1fr);
}
.next-timeline--sticky-wrapper{
position: sticky;
top: var(--sticky-top);
display: flex;
align-items: center;
flex-direction: column;
}
.next-timeline[data-left-fade="true"] .next-timeline--left-section .next-timeline--sticky-wrapper > *{
opacity: var(--from-opacity);
will-change: opacity;
}
.next-timeline[data-center-fade="true"] .next-timeline--center-section .next-timeline--sticky-wrapper > *{
opacity: var(--from-opacity);
will-change: opacity;
}
.next-timeline[data-right-fade="true"] .next-timeline--right-section .next-timeline--sticky-wrapper > *{
opacity: var(--from-opacity);
will-change: opacity;
} .next-timeline--left-section{
display: flex;
align-items: center;
flex-direction: column;
height: 100%; } .next-timeline--center-section{
display: flex;
align-items: center;
flex-direction: column;
height: 100%; }
.next-timeline--center-section > .next-timeline--sticky-wrapper{
--sticky-wrapper-outline-color: black; --sticky-wrapper-outline-width: 8px; width: fit-content;
background: var(--sticky-wrapper-outline-color);
box-shadow: 0 0 0 var(--sticky-wrapper-outline-width) var(--sticky-wrapper-outline-color);
}
.next-timeline--circle{
--dimensions: 15px; width: var(--dimensions);
height: var(--dimensions);
max-height: var(--dimensions);
max-width: var(--dimensions);
min-height: var(--dimensions);
min-width: var(--dimensions);
border-radius: 100%;
background-color: white; } .next-timeline--right-section{
display: flex;
align-items: center;
flex-direction: column;
height: 100%; }