.video-with-steps{overflow:hidden}.video-with-steps__header{max-width:800px;margin-left:auto;margin-right:auto;padding-top:var(--heading-padding-top, 15px);padding-bottom:var(--heading-padding-bottom, 15px)}.video-with-steps__heading{margin-bottom:0}.video-with-steps__description{margin-top:1rem}.video-with-steps__steps{display:flex;flex-direction:column;gap:var(--steps-gap-mobile, 16px)}@media (min-width: 768px){.video-with-steps__steps{gap:var(--steps-gap, 24px)}}.video-with-steps__step{position:relative}.video-with-steps__step.step-divider:not(:last-child){padding-bottom:var(--steps-gap-mobile, 16px);border-bottom:1px solid rgba(var(--color-foreground),.1)}@media (min-width: 768px){.video-with-steps__step.step-divider:not(:last-child){padding-bottom:var(--steps-gap, 24px)}}.step__inner{display:flex;gap:1rem;align-items:flex-start}.step__number{flex-shrink:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:rgba(var(--color-foreground),.1);border-radius:50%;font-weight:600;font-size:.875rem;line-height:1}.step__content{flex:1;min-width:0}.step__icon{margin-bottom:.5rem}.step__icon svg{width:1.5rem;height:1.5rem;fill:currentColor}.step__title{margin-bottom:.5rem;font-weight:600}.step__description{color:rgba(var(--color-foreground),.75)}.step__description p{margin-bottom:.5rem}.step__description p:last-child{margin-bottom:0}.video-with-steps__video-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center}.video-with-steps__media{position:relative;width:100%;padding-bottom:calc(100% / (var(--aspect-ratio, 16/9)));height:0;overflow:hidden;border-radius:var(--border-radius, 0);background:var(--video-letterbox-bg, #000)}.video-with-steps__poster{position:absolute;top:0;left:0;width:100%;height:100%;border:none;background:transparent;padding:0;cursor:pointer}.video-with-steps__cover{width:100%;height:100%}.video-with-steps__cover img{width:100%;height:100%;object-fit:contain}.video-with-steps__poster img,.video-with-steps__poster .f-image img,.video-with-steps .f-image img{object-fit:contain!important}.deferred-media__poster-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4rem;height:4rem;background:#fffffff2;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background .2s ease;box-shadow:0 4px 12px #00000026}.video-with-steps__poster:hover .deferred-media__poster-button{transform:translate(-50%,-50%) scale(1.1);background:#fff}.deferred-media__poster-button svg{width:1.5rem;height:1.5rem;fill:currentColor;margin-left:.125rem}.video-with-steps__media iframe,.video-with-steps__media video{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:var(--border-radius, 0);object-fit:contain}@media (max-width: 767px){.video-with-steps .f-flex{flex-direction:column-reverse!important}.video-with-steps__video{margin-bottom:2rem}}@media (min-width: 768px){.step__number{width:2.5rem;height:2.5rem;font-size:1rem}.step__icon svg{width:2rem;height:2rem}}.video-with-steps__poster:focus{outline:2px solid rgba(var(--color-foreground),.5);outline-offset:2px}.video-with-steps__poster:focus:not(:focus-visible){outline:none}.no-js .deferred-media{display:none}.no-js .video-with-steps__media{display:block}
/*# sourceMappingURL=/cdn/shop/t/3/assets/video-with-steps.css.map */