.how-to-use-steps{--how-to-use-steps-radius: var(--radius-s, 8px);--how-to-use-steps-gap: var(--space-token-s, 12px)}.how-to-use-steps__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-token-l, 24px)}@media screen and (min-width:768px){.how-to-use-steps{--how-to-use-steps-radius: var(--radius--base, 16px);--how-to-use-steps-gap: var(--space-token-md, 20px)}.how-to-use-steps__inner{gap:var(--space-token-xl, 32px)}}.how-to-use-steps__header{display:flex;flex-direction:column;align-items:center;gap:var(--space-token-s, 12px);text-align:center;width:100%}.how-to-use-steps__mustache{width:45px;height:45px;overflow:hidden}@media screen and (min-width:768px){.how-to-use-steps__mustache{width:84px;height:84px}}.how-to-use-steps__mustache img{display:block;width:100%;height:100%;object-fit:contain}.how-to-use-steps .section-header{width:100%}.how-to-use-steps .section-header .h2{font:var(--font-2xl-semibold);color:var(--color-text-primary);text-transform:uppercase}@media screen and (min-width:768px){.how-to-use-steps .section-header .h2{font:var(--font-6xl-semibold)}}.how-to-use-steps__video{position:relative;width:100%;overflow:hidden;border-radius:var(--how-to-use-steps-radius);background:var(--color-bg-gray, #f9fafc);aspect-ratio:358 / 238}@media screen and (min-width:768px){.how-to-use-steps__video{aspect-ratio:1152 / 550}}.how-to-use-steps__video picture-breakpoint,.how-to-use-steps__video picture,.how-to-use-steps__video img,.how-to-use-steps__video-image{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}.how-to-use-steps__video img,.how-to-use-steps__video-image{object-fit:cover}.how-to-use-steps__player{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.how-to-use-steps__player iframe,.how-to-use-steps__player video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;background:#000}.how-to-use-steps__video.is-playing .how-to-use-steps__player{pointer-events:auto}.how-to-use-steps__player iframe.is-hover-play{pointer-events:none}.how-to-use-steps__video[data-how-to-player]{cursor:pointer}.how-to-use-steps__video.is-playing .how-to-use-steps__play{opacity:0;pointer-events:none}.how-to-use-steps__play{position:absolute;right:16px;bottom:16px;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--radius-xs, 4px);background:var(--color-text-white-primary, rgba(255, 255, 255, .93));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--color-text-primary);cursor:pointer;transition:opacity .2s ease}@media screen and (min-width:768px){.how-to-use-steps__play{right:24px;bottom:24px;width:48px;height:48px}}.how-to-use-steps__play .icon{width:18px;height:18px}.how-to-use-steps__steps{display:grid;grid-template-columns:1fr 1fr;gap:var(--how-to-use-steps-gap);width:100%}.how-to-use-steps__step{position:relative;display:flex;flex-direction:column;gap:var(--space-token-base, 16px);padding:var(--space-token-l, 24px) var(--space-token-xl, 20px);background:var(--color-bg-gray, #f9fafc);border-radius:var(--how-to-use-steps-radius)}.how-to-use-steps__step:last-child:nth-child(odd){grid-column:1 / -1}@media screen and (min-width:768px){.how-to-use-steps__steps{grid-template-columns:repeat(6,minmax(0,1fr))}.how-to-use-steps__step{grid-column:span 2;padding:var(--space-token-l, 24px) var(--space-token-xl, 32px);background:var(--color-text-white-primary, #fff)}.how-to-use-steps__step:nth-child(n+4){grid-column:span 3}.how-to-use-steps__step:last-child:nth-child(odd){grid-column:span 3}}.how-to-use-steps__icon{width:30px;height:23px;overflow:hidden}@media screen and (min-width:768px){.how-to-use-steps__icon{width:51px;height:39px}}.how-to-use-steps__icon img{display:block;width:100%;height:100%;object-fit:contain}.how-to-use-steps__index{position:absolute;top:24px;right:20px;color:var(--color-text-secondary);font:var(--font-sm-medium)}.how-to-use-steps__number{display:none}@media screen and (min-width:768px){.how-to-use-steps__index{display:none}.how-to-use-steps__number{display:inline}}.how-to-use-steps__text{margin:0;color:var(--color-text-primary);font:var(--font-base-semibold)}@media screen and (min-width:768px){.how-to-use-steps__text{font:var(--font-xl-semibold)}}
/*# sourceMappingURL=/cdn/shop/t/27/assets/how-to-use-steps.css.map */