.timeline{--line-width:4px;--dot-size:18px;--col-gap:clamp(16px, 4vw, 40px);--speed:500ms;--easing:cubic-bezier(.2, .7, .2, 1);position:relative}.timeline-line{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:var(--line-width);background:var(--black-alpha-1);z-index:0;pointer-events:none}.timeline-line-progress{position:absolute;left:0;top:0;width:100%;height:0;background:var(--color-1);color:var(--color-2);transition:height var(--speed) var(--easing)}.timeline-item{display:grid;grid-template-columns:1fr var(--dot-size) 1fr;align-items:center;gap:var(--col-gap);position:relative;z-index:1}.timeline-item+.timeline-item{margin-top:clamp(24px, 8vh, 80px)}.timeline-item-content{font-size:var(--font-size-small);justify-self:end;text-align:right;opacity:.25;transition:opacity var(--speed) var(--easing),filter var(--speed) var(--easing);filter:saturate(.7)}.timeline-item-image{justify-self:start;opacity:.25;transition:opacity var(--speed) var(--easing),filter var(--speed) var(--easing);filter:saturate(.7)}.timeline-item-image img{display:block}.timeline-item:nth-child(odd) .timeline-item-content{order:2;justify-self:start;text-align:left}.timeline-item:nth-child(odd) .timeline-item-dot{order:1}.timeline-item:nth-child(odd) .timeline-item-image{order:0;justify-self:end}.timeline-item-dot{justify-self:center;position:relative;width:var(--dot-size);height:var(--dot-size)}.timeline-item-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--light);box-shadow:0 0 0 4px var(--white);transform:scale(.6);transition:background var(--speed) var(--easing),transform var(--speed) var(--easing)}.timeline-item.is-visible .timeline-item-content,.timeline-item.is-visible .timeline-item-image{opacity:1;filter:saturate(1);transform:none}.timeline-item.is-visible .timeline-item-dot::after{background:var(--color-1);transform:scale(1)}@media (max-width:820px){.timeline-item{grid-template-columns:var(--dot-size) 1fr;grid-template-areas:"dot left" "dot right";align-items:start}.timeline-item-content{grid-area:left;text-align:left;justify-self:start}.timeline-item-title{margin-top:-.35ch!important;margin-bottom:.5rem}.timeline-item-image{grid-area:right}.timeline-item:nth-child(odd) .timeline-item-image{justify-self:start}.timeline-line{left:calc(0% + var(--dot-size) / 2)}}