.hero-banner-section{width:100%;box-sizing:border-box;overflow:hidden;font-family:var(--font-body-family)}.hero-banner-container{position:relative;width:100%;display:block;overflow:hidden;border-radius:0}.hero-banner-media{position:relative;width:100%;display:block}.hero-banner-img{width:100%;height:100%;object-fit:cover;display:block}@media screen and (min-width:750px){.hero-banner-media{aspect-ratio:2.7 / 1;min-height:400px}}@media screen and (max-width:749px){.hero-banner-media{aspect-ratio:1 / 1.25;min-height:350px}}.hero-banner-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(var(--overlay-color-rgb, 0, 0, 0),var(--overlay-opacity, .4)) 0%,rgba(var(--overlay-color-rgb, 0, 0, 0),0) var(--overlay-height, 50%));transition:background .3s ease}.hero-banner-content-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:40px 24px;text-align:center;color:#fff}.hero-banner-content{max-width:720px;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0;transform:translateY(20px);animation:heroContentFadeIn .8s cubic-bezier(.16,1,.3,1) forwards}@keyframes heroContentFadeIn{to{opacity:1;transform:translateY(0)}}.hero-banner-title{color:#fff;margin:0;font-size:46px;font-weight:300;line-height:normal;letter-spacing:8%;max-width:550px}.hero-banner-text{color:#ffffffe6;margin:0;font-size:14px;font-weight:400;line-height:normal;max-width:350px}.hero-banner-text p{margin:0}.hero-banner-cta-link{display:inline-block;margin-top:8px;text-decoration:none}.hero-banner-cta{background:transparent;color:#fff;border:1px solid #ffffff;padding:16px 23px;border-radius:200px;font-size:10px;font-weight:400;line-height:normal;letter-spacing:10%;cursor:pointer;transition:background-color .3s cubic-bezier(.16,1,.3,1),color .3s cubic-bezier(.16,1,.3,1),transform .2s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.hero-banner-cta:hover{background:#fff;color:#121212;transform:scale(1.03)}.hero-banner-cta:active{transform:scale(.98)}@media screen and (max-width:749px){.hero-banner-content-wrapper{padding:30px 16px}.hero-banner-content{gap:12px}.hero-banner-title{font-size:32px}.hero-banner-text{font-size:14px;max-width:350px}.hero-banner-cta{font-size:10px}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/responsive-hero-banner.css.map */