.how-it-works{padding:var(--bar--section-y) 0}.how-it-works__intro{display:grid;gap:24px;align-items:center}.how-it-works__text{display:flex;flex-direction:column;gap:16px;max-width:520px}.how-it-works__body p+p{margin-top:12px}.demo-video{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--bar--radius-md)}.demo-video__poster{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.demo-video__button{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(to top,#00000059,#0000001a);color:var(--bar--white)}.demo-video__button[hidden]{display:none}.demo-video__label{font-size:15px;font-weight:600}.demo-video__button:hover .bar-play{transform:scale(1.06)}.demo-video__player{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;background:var(--bar--black)}.demo-video.is-playing .demo-video__poster{visibility:hidden}@media(prefers-reduced-motion:no-preference){.demo-video__button .bar-play{transition:transform .2s ease}}.how-it-works__steps{display:grid;gap:16px;margin-top:32px}.how-it-works__step{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:center}.how-it-works__step-media{aspect-ratio:1 / 1;overflow:hidden;border-radius:var(--bar--radius);background:var(--bar--grey-200)}.how-it-works__step-image{width:100%;height:100%;object-fit:cover}.how-it-works__step-image--placeholder{fill:var(--bar--grey-400)}.how-it-works__step-title{font-size:16px;font-weight:700;line-height:1.3}.how-it-works__step-number{margin-right:4px;font-family:var(--bar--font-display);font-weight:400;color:var(--bar--blue-dark)}.how-it-works__step-copy{margin-top:4px;font-size:13px;line-height:1.45;color:var(--bar--grey-700)}@media screen and (min-width:750px){.how-it-works__intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}.how-it-works__intro--text-only{grid-template-columns:minmax(0,1fr)}.how-it-works__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:64px}.how-it-works__step{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;align-content:start}.how-it-works__step-media{aspect-ratio:4 / 3}.how-it-works__step-title{font-size:17px}.how-it-works__step-copy{font-size:14px;line-height:1.5}}@media screen and (min-width:990px){.how-it-works__steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
/*# sourceMappingURL=/cdn/shop/t/772/assets/section-cocktail-makers-how-it-works.css.map */