@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);
@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-1rem)}}.scroll-timeline .title{text-align:center}.scroll-timeline .scroller{margin-top:7rem;gap:5rem;align-items:start}.scroll-timeline .scroller .start{--gap:20dvh;--number:6rem;display:flex;flex-direction:column;align-items:center;gap:var(--gap);padding:var(--gap) 0;counter-reset:timeline}.scroll-timeline .scroller .start .item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;counter-increment:timeline}.scroll-timeline .scroller .start .item:not(:last-child):after{content:"";position:absolute;top:calc(100% + 1rem);left:calc(50% - 1px);width:2px;height:calc(var(--gap) - var(--number));background:var(--grey-color)}.scroll-timeline .scroller .start .item .title{padding:5rem 3rem 3rem;border-radius:var(--radius);background:var(--grey-color)}.scroll-timeline .scroller .start .item .title:before{content:counter(timeline);position:absolute;top:calc(var(--number)/-2);left:calc(50% - var(--number)/2);width:var(--number);height:var(--number);border:2px solid var(--white-color);border-radius:var(--radius);line-height:var(--number);font-size:var(--md-font);background:var(--accent-color)}.scroll-timeline .scroller .start .item .text{max-width:30rem;margin-top:3rem}.scroll-timeline .scroller .end{position:sticky;top:20dvh;width:100%;aspect-ratio:1/.9}.scroll-timeline .scroller .end .item{position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity .5s ease-in-out}.scroll-timeline .scroller .end .item:not(:first-child){opacity:0}@media only screen and (max-width:768px){.scroll-timeline .scroller .start{order:2}.scroll-timeline .scroller .start .item .text{margin-top:0;padding:1em;border-radius:0 0 var(--radius) var(--radius);background:var(--white-color)}.scroll-timeline .scroller .end{order:1;top:10dvh;height:80dvh;aspect-ratio:auto}}