.hero-banner{position:relative;display:flex;align-items:center;width:100%;min-height:70vh;overflow:hidden;background-image:var(--hero-bg-image);background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff}.hero-banner:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#00000073,#00000026 60%,#0000);z-index:1}.hero-banner__content{position:relative;z-index:2;width:100%;max-width:560px;padding:0 6%;display:flex;flex-direction:column;gap:16px}.hero-banner--align-left .hero-banner__content{margin-inline-end:auto;text-align:left;align-items:flex-start}.hero-banner--align-center{justify-content:center}.hero-banner--align-center .hero-banner__content{margin-inline:auto;text-align:center;align-items:center;max-width:640px}.hero-banner--align-right .hero-banner__content{margin-inline-start:auto;text-align:right;align-items:flex-end}.hero-banner__heading{margin:0;font-size:clamp(28px,4vw,56px);font-weight:700;line-height:1.1}.hero-banner__description{margin:0;font-size:clamp(14px,1.2vw,18px);line-height:1.5;max-width:46ch;opacity:.92}.hero-banner__cta{display:inline-flex;align-items:center;justify-content:center;margin-top:4px;padding:14px 32px;font-size:15px;font-weight:600;text-decoration:none;color:#111;background:#fff;border-radius:4px;transition:background-color .2s ease,color .2s ease,transform .2s ease}.hero-banner__cta:hover{background:#111;color:#fff}.hero-banner--short{min-height:48vh}.hero-banner--tall{min-height:90vh}@media(max-width:768px){.hero-banner{min-height:46vh}.hero-banner--short{min-height:34vh}.hero-banner--tall{min-height:60vh}.hero-banner__content{max-width:100%;padding:0 24px;gap:10px}.hero-banner--align-center .hero-banner__content,.hero-banner--align-left .hero-banner__content,.hero-banner--align-right .hero-banner__content{text-align:center;align-items:center;margin-inline:auto}.hero-banner__heading{font-size:clamp(22px,6vw,32px)}.hero-banner__description{font-size:14px}.hero-banner__cta{padding:12px 24px;font-size:14px}}html{overflow-x:clip;width:100%}body{overflow-x:clip;width:100%;max-width:100%;position:relative}.page-wrapper{overflow-x:clip;max-width:100%}
/*# sourceMappingURL=/cdn/shop/t/31/assets/hero-banner.css.map */