.hero-banner{position:relative;width:100%;height:var(--hero-height, 640px);overflow:hidden}.hero-banner__image-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.hero-banner__image,.hero-banner__placeholder svg{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.hero-banner__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000;pointer-events:none}.hero-banner__content{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:1.25rem;padding:3rem;z-index:2;text-align:center;color:#fff}.hero-banner__content--top-left,.hero-banner__content--top-center,.hero-banner__content--top-right{justify-content:flex-start}.hero-banner__content--middle-left,.hero-banner__content--middle-center,.hero-banner__content--middle-right{justify-content:center}.hero-banner__content--bottom-left,.hero-banner__content--bottom-center,.hero-banner__content--bottom-right{justify-content:flex-end}.hero-banner__content--top-left,.hero-banner__content--middle-left,.hero-banner__content--bottom-left{align-items:flex-start;text-align:left}.hero-banner__content--top-center,.hero-banner__content--middle-center,.hero-banner__content--bottom-center{align-items:center;text-align:center}.hero-banner__content--top-right,.hero-banner__content--middle-right,.hero-banner__content--bottom-right{align-items:flex-end;text-align:right}.hero-banner__subheading{font-size:1.25rem;letter-spacing:.02em;margin:0;text-shadow:0 1px 6px rgba(0,0,0,.35)}.hero-banner__heading{font-size:clamp(1.75rem,4vw,3rem);line-height:1.15;margin:0;max-width:40ch;text-shadow:0 1px 6px rgba(0,0,0,.35)}.hero-banner__button{border:1px solid #fff;background:transparent;color:#fff;padding:.9rem 2rem;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;text-decoration:none;transition:background .2s ease,color .2s ease}.hero-banner__button:hover{background:#fff;color:#111}.hero-banner__button.button--primary{background:#111;border-color:#111;color:#fff}.hero-banner__button.button--primary:hover{background:#333;border-color:#333}@media screen and (max-width:749px){.hero-banner{height:var(--hero-height-mobile, 420px)}.hero-banner__content{padding:1.5rem;gap:.85rem}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/section-hero-banner.css.map */