.page-how-it-works{padding-top:60px;padding-bottom:60px;max-width:1440px;margin:0 auto}.page-how-it-works__header{text-align:center;margin-bottom:40px}.page-how-it-works__title{font-size:2.2rem;letter-spacing:.05em}.page-how-it-works__columns{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.page-how-it-works__column--image{position:relative}.page-how-it-works-image__list{position:relative;list-style:none;margin:0;padding:0}.page-how-it-works-image__item{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;visibility:hidden;transition:opacity .6s ease}.page-how-it-works-image__item.active{position:relative;opacity:1;visibility:visible}.page-how-it-works__media,.page-how-it-works__picture{width:100%;height:auto;display:block;border-radius:8px}.page-how-it-works-step__list{list-style:none;margin:0;padding:0}.page-how-it-works-step__item{display:none;padding:24px 0;background:var(--block-bg-color, #fff);color:var(--block-text-color, #232222)}.page-how-it-works-step__item.active{display:block}.page-how-it-works-step__eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.1em;opacity:.6;margin-bottom:8px}.page-how-it-works-step__title{font-size:1.5rem;margin-bottom:12px}.page-how-it-works-step__message{font-size:1rem;line-height:1.6}.page-how-it-works-step__progress-bar{display:none}.page-how-it-works-controls{display:flex;align-items:center;gap:16px;margin-top:40px}.page-how-it-works-controls__list{display:flex;flex:1;gap:8px;list-style:none;margin:0;padding:0}.page-how-it-works-controls__item{flex:1;cursor:pointer}.page-how-it-works-controls__progress{height:3px;background:#00000026;border-radius:2px;overflow:hidden}.page-how-it-works-controls__progress-bar{height:100%;width:0%;background:currentColor;transform-origin:left center}.page-how-it-works-controls__item.active .page-how-it-works-controls__progress-bar{animation:how-it-works-progress var(--duration, 6s) linear forwards}.page-how-it-works-controls__item.active.paused .page-how-it-works-controls__progress-bar{animation-play-state:paused}@keyframes how-it-works-progress{0%{width:0%}to{width:100%}}.page-how-it-works-controls__button{display:none;background:none;border:none;padding:0;cursor:pointer;line-height:0}.page-how-it-works-controls__button.active{display:inline-flex}@media screen and (max-width:749px){.page-how-it-works__columns{grid-template-columns:1fr;gap:24px}}
/*# sourceMappingURL=/cdn/shop/t/13/assets/component-how-it-works.css.map */