.hero-image-section{position:relative;width:100%;overflow:hidden}.hero-image-container{position:relative;width:100%;height:66.67vw;max-height:90vh;min-height:400px;overflow:hidden}.hero-image{position:absolute;top:0;left:0;width:100%;height:100%}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.desktop-image{object-position:center}.hero-image img{width:100%;height:100%;object-fit:cover;display:block}.hero-image-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#f4f4f4;display:flex;justify-content:center;align-items:center}.hero-image-placeholder .placeholder-svg{width:100%;height:100%}.mobile-only{display:none}.scroll-arrow-container{position:absolute;bottom:30px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;cursor:pointer;z-index:10;opacity:.9}.hero-image-section[style*=padding-bottom] .scroll-arrow-container{bottom:calc(30px + var(--bottom-padding, 0px))}.scroll-text{color:#fff;font-size:12px;font-weight:350;margin-bottom:8px;text-shadow:0 1px 3px rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:1px}.scroll-arrow{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);transition:all .3s ease;width:32px;height:32px}.scroll-arrow svg{width:100%;height:100%}.scroll-arrow-container:hover .scroll-arrow{filter:drop-shadow(0 0 8px rgba(255,255,255,.8));transform:scale(1.1)}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.bounce{animation:bounce 2s infinite}.fade-in{opacity:0;animation:fadeIn .8s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.desktop-wrapper{display:block}.mobile-wrapper{display:none}@media screen and (max-width: 749px){.hero-image-container{height:177.78vw;max-height:100vh;min-height:auto}.desktop-wrapper{display:none}.mobile-wrapper{display:block;z-index:2}.hero-image-container:not(:has(.mobile-wrapper)) .desktop-wrapper{display:block}.scroll-arrow-container{bottom:40px}.hero-image-section[style*=padding-bottom] .scroll-arrow-container{bottom:calc(40px + var(--bottom-padding, 0px))}.scroll-text{font-size:10px;margin-bottom:6px}.scroll-arrow{width:24px;height:24px}}@media screen and (min-width: 750px) and (max-width: 1024px){.scroll-arrow{width:28px;height:28px}.scroll-text{font-size:11px}}@media screen and (min-width: 1200px){.scroll-arrow{width:36px;height:36px}.scroll-text{font-size:13px;margin-bottom:10px}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/section-hero-image.css.map */