.timeline{--tl-marker: var(--timeline-marker-size, 4.4rem);--tl-line: var(--timeline-thickness, .2rem);--tl-gap: var(--timeline-gap, 4rem);--tl-title: var(--timeline-title-size, 2.2rem);--tl-gutter: 2rem;--tl-track: var(--timeline-track, rgba(var(--color-foreground), .16));--tl-fill: var(--timeline-fill, rgb(var(--color-accent-1)));--tl-on-fill: var(--timeline-marker-color, rgb(var(--color-background)));counter-reset:timeline-step;min-width:0}.timeline__list{display:flex;flex-direction:column;gap:var(--tl-gap);margin:0;padding:0;list-style:none}.timeline-step{--tl-pad: 0rem;--tl-anchor: calc(var(--tl-pad) + var(--tl-title) * .625);position:relative;display:grid;grid-template-columns:var(--tl-marker) minmax(0,1fr);align-items:start;column-gap:var(--tl-gutter);counter-increment:timeline-step}.timeline--card .timeline-step{--tl-pad: 2rem}.timeline-step--label{--tl-anchor: calc(var(--tl-pad) + 1rem)}.timeline--image-top .timeline-step--media:not(.timeline-step--label){--tl-anchor: calc(var(--tl-pad) + var(--tl-marker) / 2)}.timeline-step__marker{position:relative;z-index:1;display:grid;place-items:center;grid-column:1;grid-row:1;width:var(--tl-marker);height:var(--tl-marker);margin-top:calc(var(--tl-anchor) - var(--tl-marker) / 2)}.timeline-step__marker>*{display:none;grid-area:1 / 1}.timeline-step__content{display:flex;flex-direction:column;grid-column:2;grid-row:1;min-width:0}.timeline--card .timeline-step__content{padding:var(--tl-pad);border-radius:var(--content-container-radius, 1.2rem);background:var(--timeline-card, rgb(var(--color-background-secondary)))}.timeline-step__label{order:0;margin:0 0 .8rem;font-size:1.3rem;font-weight:var(--font-body-weight-bold, 600);letter-spacing:.08em;line-height:2rem;text-transform:uppercase;color:var(--tl-fill)}.timeline-step__media{order:1;margin:0 0 1.6rem;overflow:hidden;border-radius:var(--media-container-radius, 0);aspect-ratio:var(--timeline-ratio, auto)}.timeline--image-bottom .timeline-step__media{order:3;margin:1.6rem 0 0}.timeline-step__media img{display:block;width:100%;height:100%;object-fit:cover}.timeline-step__body{order:2;display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;min-width:0}.timeline-step__body>*{max-width:100%}.timeline-step__title{margin:0;font-size:var(--tl-title);line-height:1.25}.timeline-step__text{width:100%}.timeline-step__text>:first-child{margin-top:0}.timeline-step__text>:last-child{margin-bottom:0}.timeline-step:where(:not(:nth-last-child(1 of.timeline-step))):before,.timeline-step:where(:not(:nth-last-child(1 of.timeline-step))):after{content:"";position:absolute;top:var(--tl-anchor);left:calc(var(--tl-marker) / 2 - var(--tl-line) / 2);width:var(--tl-line);height:calc(100% + var(--tl-gap));transform-origin:top}.timeline-step:before{background:var(--tl-track)}.timeline-step:after{display:none;background:var(--tl-fill)}.timeline--fill .timeline-step:after{display:block}.timeline--line-dashed .timeline-step:before,.timeline--line-dashed .timeline-step:after{-webkit-mask:repeating-linear-gradient(to bottom,#000 0 .8rem,transparent .8rem 1.4rem);mask:repeating-linear-gradient(to bottom,#000 0 .8rem,transparent .8rem 1.4rem)}.timeline--line-dotted .timeline-step:before,.timeline--line-dotted .timeline-step:after{-webkit-mask:repeating-linear-gradient(to bottom,#000 0 var(--tl-line),transparent var(--tl-line) calc(var(--tl-line) * 3));mask:repeating-linear-gradient(to bottom,#000 0 var(--tl-line),transparent var(--tl-line) calc(var(--tl-line) * 3))}.timeline--marker-dot .timeline-step__dot,.timeline--marker-icon .timeline-step__marker:not(.timeline-step__marker--icon) .timeline-step__dot,.timeline--marker-image .timeline-step:not(.timeline-step--media) .timeline-step__dot{display:block}.timeline--marker-number .timeline-step__number,.timeline--marker-icon .timeline-step__icon,.timeline--marker-image .timeline-step__thumb{display:grid}.timeline-step__dot{width:max(1.2rem,calc(var(--tl-marker) * .34));aspect-ratio:1;border-radius:50%;background:var(--tl-fill);box-shadow:0 0 0 .5rem rgb(var(--color-background))}.timeline-step__number,.timeline-step__icon,.timeline-step__thumb{place-items:center;width:100%;height:100%;border-radius:50%;background:var(--tl-fill);color:var(--tl-on-fill);box-shadow:0 0 0 .5rem rgb(var(--color-background))}.timeline-step__number:before{content:counter(timeline-step);font-family:var(--font-heading-family);font-weight:var(--font-heading-weight-bold, 700);font-size:max(1.3rem,calc(var(--tl-marker) * .4));line-height:1}.timeline-step__icon :is(svg,img){width:52%;height:52%;object-fit:contain;fill:currentColor}.timeline-step__thumb{overflow:hidden;padding:.3rem}.timeline-step__thumb img{width:100%;height:100%;border-radius:50%;object-fit:cover}@media screen and (min-width:750px){.timeline--alternating{--tl-gutter: 4rem}.timeline--alternating .timeline-step{--tl-pad: 0rem;grid-template-columns:minmax(0,1fr) var(--tl-marker) minmax(0,1fr);grid-template-areas:"aside marker label" "aside marker body" "aside marker .";grid-template-rows:auto auto 1fr}.timeline--alternating .timeline-step:nth-child(2n of.timeline-step){grid-template-areas:"label marker aside" "body marker aside" ". marker aside"}.timeline--alternating .timeline-step__content{display:contents}.timeline--alternating .timeline-step__marker{grid-area:marker}.timeline--alternating .timeline-step__label{grid-area:label}.timeline--alternating .timeline-step__body{grid-area:body}.timeline--alternating .timeline-step__media,.timeline--alternating.timeline--image-bottom .timeline-step__media{grid-area:aside;margin:0}.timeline--alternating .timeline-step:not(.timeline-step--media),.timeline--alternating .timeline-step--media:not(.timeline-step--label){--tl-anchor: calc(var(--tl-title) * .625)}.timeline--alternating.timeline--card .timeline-step:not(.timeline-step--media),.timeline--alternating.timeline--card .timeline-step--media:not(.timeline-step--label){--tl-anchor: calc(2rem + var(--tl-title) * .625)}.timeline--alternating.timeline--card .timeline-step__body{padding:2rem;border-radius:var(--content-container-radius, 1.2rem);background:var(--timeline-card, rgb(var(--color-background-secondary)))}.timeline--alternating .timeline-step:not(.timeline-step--media) .timeline-step__label{grid-area:aside;margin:0;font-family:var(--font-heading-family);font-weight:var(--font-heading-weight-bold, 700);font-size:calc(var(--tl-title) * 1.6);letter-spacing:0;line-height:calc(var(--tl-anchor) * 2);text-transform:none;text-align:end}.timeline--alternating .timeline-step:nth-child(2n of.timeline-step):not(.timeline-step--media) .timeline-step__label{text-align:start}.timeline--alternating .timeline-step:nth-child(2n of.timeline-step) :is(.timeline-step__body,.timeline-step__label){text-align:end}.timeline--alternating .timeline-step:nth-child(2n of.timeline-step) .timeline-step__body{align-items:flex-end}.timeline--alternating .timeline-step:before,.timeline--alternating .timeline-step:after{left:calc(50% - var(--tl-line) / 2)}}@media screen and (min-width:750px){.timeline--horizontal .timeline__list{flex-direction:row;align-items:stretch}.timeline--horizontal .timeline-step{--tl-anchor: calc(var(--tl-marker) / 2);display:flex;flex:1 1 0;flex-direction:column;gap:1.6rem;min-width:0}.timeline--horizontal .timeline-step__marker{margin-top:0}.timeline--horizontal .timeline-step__content{flex:1 1 auto}.timeline--horizontal .timeline-step:before,.timeline--horizontal .timeline-step:after{top:calc(var(--tl-marker) / 2 - var(--tl-line) / 2);left:calc(var(--tl-marker) / 2);width:calc(100% + var(--tl-gap));height:var(--tl-line);transform-origin:left}.timeline--horizontal.timeline--align-center .timeline-step{align-items:center;text-align:center}.timeline--horizontal.timeline--align-center .timeline-step__content{align-self:stretch}.timeline--horizontal.timeline--align-center .timeline-step__body{align-items:center}.timeline--horizontal.timeline--align-center .timeline-step:before,.timeline--horizontal.timeline--align-center .timeline-step:after{left:50%}.timeline--horizontal.timeline--line-dashed .timeline-step:before,.timeline--horizontal.timeline--line-dashed .timeline-step:after{-webkit-mask:repeating-linear-gradient(to right,#000 0 .8rem,transparent .8rem 1.4rem);mask:repeating-linear-gradient(to right,#000 0 .8rem,transparent .8rem 1.4rem)}.timeline--horizontal.timeline--line-dotted .timeline-step:before,.timeline--horizontal.timeline--line-dotted .timeline-step:after{-webkit-mask:repeating-linear-gradient(to right,#000 0 var(--tl-line),transparent var(--tl-line) calc(var(--tl-line) * 3));mask:repeating-linear-gradient(to right,#000 0 var(--tl-line),transparent var(--tl-line) calc(var(--tl-line) * 3))}}@media screen and (max-width:749px){.timeline--horizontal.timeline--mobile-scroll .timeline__list{flex-direction:row;padding:.6rem 0 1.2rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}.timeline--horizontal.timeline--mobile-scroll .timeline__list::-webkit-scrollbar{display:none}.timeline--horizontal.timeline--mobile-scroll .timeline-step{--tl-anchor: calc(var(--tl-marker) / 2);display:flex;flex:0 0 min(80%,30rem);flex-direction:column;gap:1.2rem;scroll-snap-align:start}.timeline--horizontal.timeline--mobile-scroll .timeline-step__marker{margin-top:0}.timeline--horizontal.timeline--mobile-scroll .timeline-step:before{top:calc(var(--tl-marker) / 2 - var(--tl-line) / 2);left:calc(var(--tl-marker) / 2);width:calc(100% + var(--tl-gap));height:var(--tl-line)}.timeline--horizontal.timeline--mobile-scroll .timeline-step:after{display:none}}@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){.timeline--fill .timeline-step:after{animation:timeline-fill-y linear both;animation-timeline:view();animation-range:cover 50vh cover calc(100% - 50vh)}.timeline--fill .timeline-step__marker>*{animation:timeline-marker linear both;animation-timeline:view();animation-range:cover 45vh cover 55vh}@media screen and (min-width:750px){.timeline--fill.timeline--horizontal .timeline-step:after{animation-name:timeline-fill-x;animation-range:cover calc(30% + var(--tl-index, 0) * 6%) cover calc(36% + var(--tl-index, 0) * 6%)}.timeline--fill.timeline--horizontal .timeline-step__marker>*{animation-range:cover calc(24% + var(--tl-index, 0) * 6%) cover calc(30% + var(--tl-index, 0) * 6%)}}@media screen and (max-width:749px){.timeline--fill.timeline--horizontal.timeline--mobile-scroll .timeline-step__marker>*{animation:none}}}}.timeline-step:nth-child(2 of.timeline-step){--tl-index: 1}.timeline-step:nth-child(3 of.timeline-step){--tl-index: 2}.timeline-step:nth-child(4 of.timeline-step){--tl-index: 3}.timeline-step:nth-child(5 of.timeline-step){--tl-index: 4}.timeline-step:nth-child(6 of.timeline-step){--tl-index: 5}.timeline-step:nth-child(7 of.timeline-step){--tl-index: 6}.timeline-step:nth-child(n+8 of.timeline-step){--tl-index: 7}@keyframes timeline-fill-y{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes timeline-fill-x{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes timeline-marker{0%{background:rgb(var(--color-background));color:rgb(var(--color-foreground));box-shadow:0 0 0 .5rem rgb(var(--color-background)),inset 0 0 0 var(--tl-line) var(--tl-track)}to{background:var(--tl-fill);color:var(--tl-on-fill);box-shadow:0 0 0 .5rem rgb(var(--color-background)),inset 0 0 0 var(--tl-line) transparent}}
/*# sourceMappingURL=/cdn/shop/t/13/assets/component-timeline.css.map */