.hero-banner{position:relative;padding:2.9rem 0 5.9rem;overflow:hidden;text-align:left;color:var(--color)}@media screen and (max-width: 1023px){.hero-banner{padding:0 0 0rem;background-color:var(--background-mobile);color:var(--color-mobile)}}@media screen and (max-width: 767px){:not(.hero-banner--media-below) .hero-banner__image-media{padding:0}}.hero-banner:before,.hero-banner:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;background-color:var(--background-top)}@media screen and (max-width: 1023px){.hero-banner:before,.hero-banner:after{content:none}}.hero-banner:after{bottom:0;top:auto;height:auto;min-height:36.2rem;background-color:var(--background-bottom)}.hero-banner .container{max-width:174rem;position:relative}.hero-banner__inner{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2.8rem;padding-inline:13.7rem;min-height:75rem;border-radius:.7rem;overflow:hidden}.hero-banner--media-aside .hero-banner__inner{flex-direction:row;align-items:center;justify-content:space-between}.hero-banner--media-below .hero-banner__inner{justify-content:flex-start;padding-top:4rem;gap:5rem}@media screen and (max-width: 1023px){.hero-banner__inner{min-height:60rem}}@media screen and (max-width: 1199px){.hero-banner .container{padding:0}.hero-banner__inner{padding-inline:5rem}}@media screen and (max-width: 1023px){.hero-banner__inner{display:block;min-height:0;padding-inline:2rem;padding-block:0 3rem;justify-content:flex-start}}@media screen and (max-width: 767px){.hero-banner__inner{padding-inline:0;padding-block:0;padding:2rem 2rem 3.7rem;border-radius:0}}.hero-banner__background,.hero-banner__overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.hero-banner__overlay{opacity:0}.hero-banner__background .hero-banner__overlay{opacity:var(--overlay-opacity)}.hero-banner__background .media{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}@media (min-width: 1024px){.hero-banner:not(.hero-banner__background) .media{border-radius:.7rem}.hero-banner--media-below .media{padding-bottom:43.8%}}.hero-banner .media>*{object-fit:cover}.hero-banner .media:has(video):before,.hero-banner .media:has(video):after{content:"";width:100%;height:1.3rem;position:absolute;bottom:0;left:0;background-color:var(--c-pink);z-index:2}.hero-banner .media:has(video):after{background-color:var(--c-red-2);z-index:3;transform-origin:left;transform:scaleX(0);animation:progress var(--video-duration) linear infinite;animation-duration:var(--video-duration)}@media screen and (max-width: 1023px){.hero-banner__mobile-media{padding:2rem 2rem 0}.hero-banner__mobile-media .media{border-radius:8px}.hero-banner .media:has(video):before,.hero-banner .media:has(video):after{content:none}.hero-banner__background .hero-banner__overlay{opacity:var(--overlay-opacity-mobile)}}@keyframes progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.hero-banner__overlay:empty{display:block;z-index:3}.hero-banner--media-aside .hero-banner__media-wrapper{position:relative;flex:0 1 81rem;z-index:3;border-radius:.7rem}@media screen and (min-width: 1024px){.hero-banner--media-aside .media--desktop{padding-bottom:100%}}.hero-banner__mobile-media{margin-bottom:1.9rem}.hero-banner__media{padding:0;height:100%}.hero-banner__content{position:relative;z-index:3}.hero-banner__content:only-child>*{max-width:100%}.hero-banner__title{font-size:var(--font-size);margin-bottom:2.4rem;color:inherit;max-width:80.7rem;font-weight:600;line-height:1.1;letter-spacing:-.028em}@media screen and (max-width: 1199px){.hero-banner__title{font-size:6rem}}@media screen and (max-width: 1023px){.hero-banner__title{font-size:5rem;margin-bottom:1.8rem}}@media screen and (max-width: 767px){.hero-banner__title{font-size:4.8rem}.hero-banner__title br{display:none}}.hero-banner__body{font-size:2.2rem;line-height:1.4;letter-spacing:-.03em;margin-bottom:5.4rem;max-width:67rem}@media screen and (max-width: 1023px){.hero-banner__body{font-size:1.8rem;margin-bottom:2rem}}.hero-banner__actions{display:flex;gap:2.4rem;flex-wrap:wrap}@media screen and (max-width: 1023px){.hero-banner__actions{gap:1.6rem}}@media screen and (max-width: 767px){.hero-banner__actions{flex-direction:column;gap:2.4rem}.hero-banner__actions .button{font-size:1.6rem;width:100%}}@media screen and (max-width: 427px){.hero-banner__title{font-size:4rem;margin-bottom:1.4rem}.hero-banner__actions{flex-direction:column;gap:2rem}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/section-hero-banner.css.map */