.hero-banner{display:block}.hero-banner__frame{position:relative;width:100%;aspect-ratio:var(--hb-ratio-mobile, 2 / 3);overflow:hidden;background:var(--bc-bg-2);isolation:isolate}@media screen and (min-width:750px){.hero-banner__frame{aspect-ratio:var(--hb-ratio-desktop, 2.6 / 1)}}.hero-banner--page{padding-inline:var(--bc-gutter)}.hero-banner--page .hero-banner__frame{max-width:var(--bc-page);margin-inline:auto;border-radius:16px}@media screen and (min-width:750px){.hero-banner--page .hero-banner__frame{border-radius:24px}}.hero-banner__media,.hero-banner__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.hero-banner__image,.hero-banner__placeholder .placeholder-svg{width:100%;height:100%;object-fit:var(--hb-fit, cover);object-position:var(--hb-focal, center);display:block}.hero-banner__cover-link{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3}.hero-banner__scrim{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;opacity:var(--hb-scrim, .55)}.hero-banner--light .hero-banner__scrim--left{background:linear-gradient(90deg,#1c1816,#1c18168c 34%,#1c181600 66%)}.hero-banner--light .hero-banner__scrim--right{background:linear-gradient(270deg,#1c1816,#1c18168c 34%,#1c181600 66%)}.hero-banner--light .hero-banner__scrim--center{background:linear-gradient(to top,#1c1816,#1c181680 45%,#1c18161a 85%)}.hero-banner--dark .hero-banner__scrim--left{background:linear-gradient(90deg,#fbf9f7,#fbf9f799 38%,#fbf9f700 70%)}.hero-banner--dark .hero-banner__scrim--right{background:linear-gradient(270deg,#fbf9f7,#fbf9f799 38%,#fbf9f700 70%)}.hero-banner--dark .hero-banner__scrim--center{background:linear-gradient(to top,#fbf9f7,#fbf9f799 45%,#fbf9f700 85%)}.hero-banner__inner{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;max-width:var(--bc-page);margin-inline:auto;padding:clamp(20px,5vw,64px);pointer-events:none}.hero-banner__inner--v-top{justify-content:flex-start}.hero-banner__inner--v-middle{justify-content:center}.hero-banner__inner--v-bottom{justify-content:flex-end}.hero-banner__inner--center{align-items:center;text-align:center}.hero-banner__inner--right{align-items:flex-end;text-align:right}.hero-banner__content{max-width:540px}.hero-banner__content>*{pointer-events:auto}.hero-banner--light .hero-banner__content{color:var(--bc-white)}.hero-banner--dark .hero-banner__content{color:var(--bc-text)}.hero-banner__eyebrow{display:inline-block;margin-bottom:16px;font-family:var(--bc-font-body);font-size:12px;font-weight:var(--bc-fw-semibold);letter-spacing:.14em;text-transform:uppercase;color:var(--bc-accent-soft)}.hero-banner--dark .hero-banner__eyebrow{color:var(--bc-accent)}.hero-banner__title{margin:0;font-family:var(--bc-font-head);font-weight:var(--bc-fw-head-medium);font-size:clamp(30px,4.8vw,68px);line-height:1.02;letter-spacing:-.01em;color:inherit;text-wrap:balance}.hero-banner__sub{margin:20px 0 0;max-width:46ch;font-family:var(--bc-font-body);font-size:18px;line-height:1.5;color:inherit;opacity:.9}.hero-banner__inner--center .hero-banner__sub{margin-inline:auto}.hero-banner__inner--right .hero-banner__sub{margin-left:auto}.hero-banner__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}.hero-banner__inner--center .hero-banner__actions{justify-content:center}.hero-banner__inner--right .hero-banner__actions{justify-content:flex-end}.hero-banner--dark .bc-btn--ghost{color:var(--bc-text);border-color:#2a242266}.hero-banner--dark .bc-btn--ghost:hover{background:#2a242214;border-color:var(--bc-text)}@keyframes hero-banner-rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.hero-banner__content>*{animation:hero-banner-rise .7s cubic-bezier(.22,1,.36,1) both}.hero-banner__content>*:nth-child(1){animation-delay:80ms}.hero-banner__content>*:nth-child(2){animation-delay:.18s}.hero-banner__content>*:nth-child(3){animation-delay:.28s}.hero-banner__content>*:nth-child(4){animation-delay:.38s}@media(prefers-reduced-motion:reduce){.hero-banner__content>*{animation:none}}@media screen and (max-width:749px){.hero-banner__inner{justify-content:flex-end;padding:24px 20px 28px}.hero-banner__content{max-width:none}.hero-banner__sub{font-size:14px;margin-top:12px}.hero-banner__actions{margin-top:20px;gap:10px}.hero-banner__actions .bc-btn{flex:1 1 auto}}@media screen and (max-width:749px){.hero-banner{padding-inline:16px}.hero-banner .hero-banner__frame{max-width:560px;margin:8px auto 16px;border-radius:22px;box-shadow:var(--bc-shadow-md)}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/custom-hero-banner.css.map */