.hero-banner{position:relative;display:flex;overflow:hidden;margin-bottom:var(--spacing-sections-mobile)}@media screen and (min-width:750px){.hero-banner{margin-bottom:var(--spacing-sections-desktop)}}.hero-banner__media{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.hero-banner__media img,.hero-banner__media svg{width:100%;height:100%;object-fit:cover;object-position:center}.hero-banner__media.placeholder svg{opacity:.25}.hero-banner__scrim{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,10,12,calc(var(--hero-scrim-opacity, .55) * .6)),rgba(11,10,12,var(--hero-scrim-opacity, .55)) 65%,rgba(11,10,12,calc(var(--hero-scrim-opacity, .55) * 1.1)))}.hero-banner__content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;width:100%;min-height:var(--hero-banner-height-mobile, 62vh);padding:6rem 2rem;text-align:center;align-items:center}@media screen and (min-width:750px){.hero-banner__content{min-height:var(--hero-banner-height-desktop, 78vh);padding:8rem 4rem}.hero-banner__content--left{align-items:flex-start;text-align:left}.hero-banner__content--right{align-items:flex-end;text-align:right}}.hero-banner__inner{max-width:62rem;display:flex;flex-direction:column;align-items:inherit}.hero-banner__eyebrow{margin-bottom:1.6rem}.hero-banner__heading{margin:0;color:rgb(var(--color-ivory, 243, 239, 233));text-wrap:balance}.hero-banner__text{margin:2rem 0 0;max-width:46rem;font-size:1.7rem;line-height:1.6;color:rgba(var(--color-ivory, 243, 239, 233),.82)}.hero-banner__buttons{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:3.2rem}.hero-banner__scroll-cue{position:absolute;z-index:2;bottom:2.8rem;left:50%;transform:translate(-50%);width:1px;height:4.8rem;background:linear-gradient(180deg,rgba(var(--color-accent),.9),rgba(var(--color-accent),0))}@media(prefers-reduced-motion:no-preference){.hero-banner__scroll-cue:after{content:"";position:absolute;top:0;left:-.2rem;width:.5rem;height:.5rem;border-radius:50%;background:rgb(var(--color-accent));animation:hero-scroll-cue 2.2s var(--noctis-ease, ease) infinite}@keyframes hero-scroll-cue{0%{top:0;opacity:0}20%{opacity:1}90%{opacity:0}to{top:4.3rem;opacity:0}}}@media screen and (max-width:749px){.hero-banner__scroll-cue{display:none}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/section-hero-banner.css.map */