.xn-timeline{
clip-path: inset(0 0 0 0); 
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: black; 
height: auto; 
--progress-start: 50vh; 
--sticky-top: 50vh; 
}
.xn-timeline--progress{
position: absolute;
left: auto; 
width: var(--progress-bar);
height: 100%; 
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% 
);
}
.xn-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);
}
.xn-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-tp-columns: 1fr 1fr 1fr;
grid-tp-rows: minmax(auto, 1fr);
}
.xn-timeline--sticky-wrapper{
position: sticky;
top: var(--sticky-top);
display: flex;
align-items: center;
flex-direction: column;
}
.xn-timeline[data-left-fade="true"] .xn-timeline--left-section .xn-timeline--sticky-wrapper > *{
opacity: var(--from-opacity);
will-change: opacity;
}
.xn-timeline[data-center-fade="true"] .xn-timeline--center-section .xn-timeline--sticky-wrapper > *{
opacity: var(--from-opacity);
will-change: opacity;
}
.xn-timeline[data-right-fade="true"] .xn-timeline--right-section .xn-timeline--sticky-wrapper > *{
opacity: var(--from-opacity);
will-change: opacity;
}
.xn-timeline--left-section{
display: flex;
align-items: center;
flex-direction: column;
height: 100%; 
.xn-timeline--center-section{
display: flex;
align-items: center;
flex-direction: column;
height: 100%; 
--sticky-wrapper-outline-width: 8px; 
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; 
.xn-timeline--right-section{
display: flex;
align-items: center;
flex-direction: column;
height: 100%; /**/
}