.section-hero-banner-promo{margin-bottom:40px}@media(max-width:1023px){.section-hero-banner-promo{margin-bottom:24px}}.hero-banner-promo{display:grid;grid-template-columns:1fr 1fr;position:relative}.hero-banner-promo--single{grid-template-columns:1fr}@media(max-width:1023px){.hero-banner-promo{grid-template-columns:1fr}}.hero-banner-promo__image{display:block;overflow:hidden;align-self:start}@media(max-width:1023px){.hero-banner-promo__image{width:100%}.hero-banner-promo__image:nth-child(2){display:none}}.hero-banner-promo__image img,.hero-banner-promo__image video,.hero-banner-promo__video{width:100%;height:auto;object-fit:contain;display:block}@media(max-width:767px){.hero-banner-promo__image:not(.hero-banner-promo__video-wrap){aspect-ratio:1 / 1}.hero-banner-promo__image:not(.hero-banner-promo__video-wrap) img{height:100%;object-fit:cover}}.hero-banner-promo__text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;text-align:center;padding:24px}.hero-banner-promo__heading{margin:0}.hero-banner-promo__video-wrap{position:relative}.hero-banner-promo__video-wrap:hover .hero-banner-promo__play-btn{display:flex}.hero-banner-promo__play-btn{position:absolute;bottom:50%;right:50%;transform:translate(50%,50%);display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#00000073;color:#fff;border:none;cursor:pointer;padding:0;transition:background .2s ease;z-index:2}.hero-banner-promo__play-btn:hover{background:#000000b3}.hero-banner-promo__play-btn svg{display:block;flex-shrink:0}@media screen and (max-width:989px){body.promo-hero-visible .header:not(.menu-open){--header-background-alpha: 0;--color-foreground: 255, 255, 255}body.promo-hero-visible .header:not(.menu-open) .header__logo-image{opacity:0;visibility:hidden;pointer-events:none}body.promo-hero-visible .header:not(.menu-open) .header__logo-image-transparent{opacity:1;visibility:visible;pointer-events:auto}}@media screen and (min-width:990px){body.promo-hero-visible .header:not(.is-megamenu-open){--header-background-alpha: 0;--color-foreground: 255, 255, 255}body.promo-hero-visible .header:not(.is-megamenu-open) .header__logo-image{opacity:0;visibility:hidden;pointer-events:none}body.promo-hero-visible .header:not(.is-megamenu-open) .header__logo-image-transparent{opacity:1;visibility:visible;pointer-events:auto}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/hero-banner-collection-promo.css.map */