.how-it-works__steps{--hiw-visual: 8rem;--hiw-gap: 3rem;display:grid;grid-template-columns:repeat(var(--steps-count, 3),minmax(0,1fr));gap:4rem var(--hiw-gap);position:relative;max-width:110rem;margin:0 auto}.how-it-works__steps--with-numbers{--hiw-visual: 7rem}.how-it-works__step{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding:0 1rem}.how-it-works__visual{display:inline-flex;align-items:center;justify-content:center;margin-bottom:2rem;flex-shrink:0;position:relative;z-index:1}.how-it-works__number{width:7rem;height:7rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.how-it-works__number>*{margin:0;line-height:1}.how-it-works__number--filled{background:rgb(var(--color-foreground));color:rgb(var(--color-background));box-shadow:0 8px 24px rgba(var(--color-foreground),.18)}.how-it-works__number--outlined{background:transparent;border:2px solid rgba(var(--color-foreground),.25);color:rgb(var(--color-foreground))}.how-it-works__icon{display:inline-flex;align-items:center;justify-content:center;width:8rem;height:8rem;border-radius:50%;background:rgba(var(--color-foreground),.06);color:rgb(var(--color-foreground))}.how-it-works__icon .svg-wrapper{width:4rem!important;height:4rem!important;display:inline-flex;align-items:center;justify-content:center}.how-it-works__icon svg{width:100%!important;height:100%!important}.how-it-works__image{width:100%;max-width:20rem;border-radius:var(--media-radius);overflow:hidden}.how-it-works__image img{width:100%;height:auto;display:block}.how-it-works__connector{display:none}@media screen and (min-width:750px){.how-it-works__step:not(:last-child) .how-it-works__connector{display:block;position:absolute;top:calc(var(--hiw-visual) / 2);left:calc(50% + var(--hiw-visual) / 2);width:calc(100% + var(--hiw-gap) - var(--hiw-visual));height:0;border-top:2px dashed rgba(var(--color-foreground),.25);transform:translateY(-1px);z-index:0}}.how-it-works__body{display:flex;flex-direction:column;gap:1rem;max-width:32rem}.how-it-works__step-heading,.how-it-works__step-text{margin:0}.how-it-works__step-text>*{margin:0}.how-it-works__step-text>*+*{margin-top:.8rem}@media screen and (max-width:749px){.how-it-works__steps{grid-template-columns:1fr;gap:4rem}.how-it-works__body{max-width:48rem}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/section-how-it-works.css.map */