.timeline-horizontal{--timeline-dot-size: 20px;--timeline-line-width: 3px;--timeline-gap: 32px;--timeline-dot-color: #000000;--timeline-line-color: #CCCCCC;--timeline-title-size: 18px;display:flex;flex-direction:column;gap:var(--timeline-gap);margin:2rem 0;width:100%;position:relative;--dash-size: 10px;--dash-gap: 5px}@media screen and (min-width:750px){.timeline-horizontal{flex-direction:row;align-items:flex-start;justify-content:space-between;margin:2.5rem 0}.timeline-horizontal:before{content:"";position:absolute;top:calc(var(--timeline-dot-size) / 2);left:0;right:0;height:var(--timeline-line-width);background-image:linear-gradient(to right,var(--timeline-line-color) var(--dash-size),transparent var(--dash-size));background-size:calc(var(--dash-size) + var(--dash-gap)) var(--timeline-line-width);background-repeat:repeat-x;z-index:0;mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%)}}@media screen and (max-width:749px){.timeline-horizontal:before{content:"";position:absolute;top:0;left:calc(var(--timeline-dot-size) / 2);transform:translate(-50%);width:var(--timeline-line-width);height:100%;background-image:linear-gradient(to bottom,var(--timeline-line-color) var(--dash-size),transparent var(--dash-size));background-size:var(--timeline-line-width) calc(var(--dash-size) + var(--dash-gap));background-repeat:repeat-y;z-index:0}}.timeline-step{display:grid;grid-template-columns:var(--timeline-dot-size) 1fr;gap:1.6rem;position:relative;flex:1}@media screen and (min-width:750px){.timeline-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.6rem}}.timeline-step__marker{display:flex;flex-direction:column;align-items:center;position:relative;flex-shrink:0}.timeline-step__marker:before{content:"";width:var(--timeline-dot-size);height:var(--timeline-dot-size);border-radius:50%;background-color:var(--timeline-dot-color);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}.timeline-step__number{position:absolute;top:0;left:0;width:var(--timeline-dot-size);height:var(--timeline-dot-size);display:flex;align-items:center;justify-content:center;font-size:calc(var(--timeline-dot-size) * .5);font-weight:600;color:#fff;z-index:2;line-height:1}.timeline-step__icon{position:absolute;top:0;left:0;width:var(--timeline-dot-size);height:var(--timeline-dot-size);display:flex;align-items:center;justify-content:center;font-size:calc(var(--timeline-dot-size) * .6);z-index:2;line-height:1}.timeline-step__icon-svg{width:calc(var(--timeline-dot-size) * .6);height:calc(var(--timeline-dot-size) * .6);display:flex;align-items:center;justify-content:center}.timeline-step__icon-svg svg{width:100%;height:100%;fill:currentColor}.timeline-step__icon-img{width:calc(var(--timeline-dot-size) * .6);height:calc(var(--timeline-dot-size) * .6);object-fit:contain}.timeline-step__content{padding-top:0}@media screen and (min-width:750px){.timeline-step__content{padding-top:.4rem}}.timeline-step__title{margin:0 0 .8rem;font-size:var(--timeline-title-size);line-height:1.3;color:var(--timeline-text-color, rgb(var(--color-foreground)));text-align:left}.timeline-step__text{margin:0;color:var(--timeline-text-color, rgb(var(--color-foreground)));line-height:1.5;text-align:left}.timeline-step__text p{margin:0 0 .8rem}.timeline-step__text p:last-child{margin-bottom:0}.timeline-horizontal--align-center .timeline-step__content{text-align:center}.timeline-horizontal--align-left .timeline-step__content{text-align:left}@media screen and (max-width:749px){.timeline-step__content{text-align:left}}@media screen and (min-width:750px){.timeline-step__title{margin-bottom:1rem;text-align:center}.timeline-step__text{text-align:center}}@media(prefers-reduced-motion:no-preference){.timeline-step{transition:opacity var(--duration-short) ease}}.timeline-step:has(.timeline-step__title:empty):has(.timeline-step__text:empty){display:none}
/*# sourceMappingURL=/cdn/shop/t/19/assets/component-timeline-horizontal.css.map */