.hero-section{position:relative;z-index:1}.hero-section picture img{transform:translateZ(0);backface-visibility:hidden;transition:opacity .3s ease-in-out}.hero-section .container>div{animation:fadeInUp .8s ease-out}.hero-heading,.hero-text,.hero-button,.hero-image{opacity:0;animation:fadeInUp .6s ease-out forwards}.hero-heading{animation-delay:.2s}.hero-text{animation-delay:.4s}.hero-button{animation-delay:.6s}.hero-image{animation-delay:.3s}.hero-image img{height:auto;max-width:100%;transition:opacity .3s ease-in-out,transform .3s ease-in-out}.hero-section .absolute.bg-black{transition:opacity .3s ease-in-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.hero-section .container>div,.hero-heading,.hero-text,.hero-button,.hero-image{animation:none;opacity:1;transform:none}.hero-button a,.hero-button button,.hero-image img{transition:none}.hero-button a:hover,.hero-button button:hover,.hero-image:hover img{transform:none}}.hero-section{contain:layout style paint}.hero-section .absolute picture{contain:layout style}.hero-heading,.hero-text,.hero-button,.hero-image{will-change:opacity,transform}@media (max-height: 500px) and (orientation: landscape){.hero-section{min-height:100vh}.hero-section .container>div{padding-top:2rem;padding-bottom:2rem}}
/*# sourceMappingURL=/cdn/shop/t/51/assets/hero-banner.css.map */