.how-banner{position:relative;display:grid;align-items:center;min-block-size:max(var(--how-banner-height, 64svh),var(--how-banner-min, 384px));margin-block:var(--how-banner-space-top, 0) var(--how-banner-space-bottom, 0);overflow:hidden;isolation:isolate}.how-banner *,.how-banner *:before,.how-banner *:after{box-sizing:border-box}.how-banner__frame{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden}.how-banner__photo{display:block;inline-size:100%;block-size:100%;object-fit:cover;object-position:center 42%}.how-banner__veil{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:radial-gradient(120% 90% at 50% 50%,color-mix(in srgb,var(--how-surface-bg) calc(var(--how-banner-veil, .45) * 100%),transparent),transparent 70%),linear-gradient(to bottom,color-mix(in srgb,var(--how-surface-bg) 30%,transparent),transparent 35%,transparent 65%,color-mix(in srgb,var(--how-surface-bg) 40%,transparent))}.how-banner__inner{position:relative;z-index:2;display:grid;justify-items:center;gap:1.25rem;padding-block:clamp(3rem,8vw,6rem);text-align:center}.how-banner--start .how-banner__veil,.how-banner--end .how-banner__veil{background:linear-gradient(var(--how-banner-sweep, to right),color-mix(in srgb,var(--how-surface-bg) calc(var(--how-banner-veil, .45) * 150%),transparent),color-mix(in srgb,var(--how-surface-bg) calc(var(--how-banner-veil, .45) * 105%),transparent) 32%,transparent 70%),linear-gradient(to bottom,color-mix(in srgb,var(--how-surface-bg) 26%,transparent),transparent 32%,transparent 68%,color-mix(in srgb,var(--how-surface-bg) 38%,transparent))}.how-banner--end{--how-banner-sweep: to left}.how-banner__inner--start{justify-items:start;text-align:start}.how-banner__inner--end{justify-items:end;text-align:end}.how-banner__inner--start>*,.how-banner__inner--end>*{max-inline-size:min(100%,27rem)}.how-banner__eyebrow{color:color-mix(in srgb,var(--how-metal) 88%,transparent)}.how-banner__name{max-inline-size:22ch;margin:0;font-family:var(--how-font-serif);font-size:clamp(2rem,6vw,3.75rem);font-weight:300;letter-spacing:.01em;line-height:1.08;text-shadow:0 1px 24px color-mix(in srgb,var(--how-surface-bg) 55%,transparent)}.how-banner__note{max-inline-size:46ch;font-size:.9375rem;line-height:1.75;color:rgba(var(--how-surface-fg-rgb),.82);text-shadow:0 1px 18px color-mix(in srgb,var(--how-surface-bg) 45%,transparent)}.how-banner__note>:first-child{margin-block-start:0}.how-banner__note>:last-child{margin-block-end:0}.how-banner__foot{margin-block-start:.75rem}.how-banner__cta{padding:1rem 2.25rem;border:1px solid color-mix(in srgb,var(--how-metal) 60%,transparent);background-color:color-mix(in srgb,var(--how-surface-bg) 35%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:border-color var(--how-mid) var(--how-ease),background-color var(--how-mid) var(--how-ease),color var(--how-mid) var(--how-ease)}@media(hover:hover){.how-banner__cta:hover,.how-banner__cta:focus-visible{border-color:var(--how-metal);background-color:var(--how-metal);color:var(--how-surface-bg)}}@media(max-width:749px){.how-banner{align-items:start;min-block-size:0}.how-banner__frame{position:relative;inset:auto;aspect-ratio:1 / 1;inline-size:100%}.how-banner__photo{object-position:center center}.how-banner__veil,.how-banner--start .how-banner__veil,.how-banner--end .how-banner__veil{inset:0 0 auto;aspect-ratio:1 / 1;inline-size:100%;background:linear-gradient(to bottom,transparent 78%,color-mix(in srgb,var(--how-surface-bg) 48%,transparent) 91%,var(--how-surface-bg))}.how-banner__inner{padding-block:1.75rem clamp(2.25rem,9vw,3rem)}}@media(min-width:750px){.how-banner__inner{gap:1.5rem}.how-banner__inner--start,.how-banner__inner--end{max-width:calc(var(--page-width, 87.5rem) + 7.5rem)}.how-banner__photo{object-position:center center}.how-banner--start .how-banner__photo{object-position:42% center}.how-banner--end .how-banner__photo{object-position:58% center}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/how-banner.css.map */