.zs-hero{background:var(--zs-hero-bg, #fff);padding:var(--zs-hero-pad-top, 60px) var(--zs-hero-pad-right, 20px) var(--zs-hero-pad-bottom, 60px) var(--zs-hero-pad-left, 20px);overflow:hidden}.zs-hero__inner{max-width:var(--zs-hero-max-width, 1280px);margin:0 auto;display:grid;grid-template-columns:55% 1fr;gap:60px;align-items:center;min-height:var(--zs-collage-height, 580px)}.zs-hero__collage{position:relative;width:100%;height:var(--zs-collage-height, 580px)}.zs-hero__collage-item{position:absolute;border-radius:var(--zs-image-radius, 4px);overflow:hidden;opacity:0;transition:opacity var(--zs-anim-speed, .8s) ease,transform var(--zs-anim-speed, .8s) cubic-bezier(.22,.68,0,1.2);transition-delay:calc(var(--zs-item-index, 0) * var(--zs-stagger-delay, .1s))}.zs-hero__collage-item__frame{width:100%;height:100%;overflow:hidden;border-radius:inherit}.zs-hero__collage-item__frame img,.zs-hero__collage-item__frame .zs-hero__collage-placeholder{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:inherit;transition:transform .5s ease}.zs-hero__collage-item:hover .zs-hero__collage-item__frame img{transform:scale(1.05)}.zs-hero__collage-placeholder svg{width:100%;height:100%;object-fit:cover}.zs-hero__collage-item--front_center{left:50%;top:50%;transform:translate(-50%,-50%) scale(.88);width:50%;height:78%;z-index:10;box-shadow:0 24px 64px #00000029,0 4px 16px #00000014;opacity:0;transition:opacity var(--zs-anim-speed, .8s) ease,transform var(--zs-anim-speed, .8s) cubic-bezier(.22,.68,0,1.15);transition-delay:0s}.zs-hero__collage-item--front_center.zs-revealed{opacity:1;transform:translate(-50%,-50%) scale(1)}.zs-hero__collage-item--top_left{left:0;top:0;width:35%;height:47%;z-index:5;transform:scale(.85) translate(-20px,-20px)}.zs-hero__collage-item--top_left.zs-revealed{opacity:1;transform:scale(1) translate(0)}.zs-hero__collage-item--top_right{right:0;top:0;width:35%;height:35%;z-index:5;transform:scale(.85) translate(20px,-20px)}.zs-hero__collage-item--top_right.zs-revealed{opacity:1;transform:scale(1) translate(0)}.zs-hero__collage-item--bottom_left{left:0;bottom:0;width:35%;height:40%;z-index:5;transform:scale(.85) translate(-20px,20px)}.zs-hero__collage-item--bottom_left.zs-revealed{opacity:1;transform:scale(1) translate(0)}.zs-hero__collage-item--bottom_right{right:0;bottom:0;width:35%;height:50%;z-index:5;transform:scale(.85) translate(20px,20px)}.zs-hero__collage-item--bottom_right.zs-revealed{opacity:1;transform:scale(1) translate(0)}.zs-hero__content{display:flex;flex-direction:column;gap:18px;color:var(--zs-hero-text, #1a1a1a)}.zs-hero__eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--zs-hero-eyebrow, #6b6b6b);margin:0}.zs-hero__heading{font-size:clamp(28px,3.2vw,48px);font-weight:700;line-height:1.12;letter-spacing:-.5px;margin:0;color:var(--zs-hero-text, #1a1a1a)}.zs-hero__description{font-size:15px;line-height:1.7;color:var(--zs-hero-text, #1a1a1a);opacity:.7;margin:0;max-width:380px}.zs-hero__description p{margin:0}.zs-hero__button{display:inline-block;align-self:flex-start;margin-top:8px;padding:14px 32px;background:var(--zs-hero-btn-bg, #B5442E);color:var(--zs-hero-btn-text, #fff);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-radius:0;transition:background .2s ease,transform .15s ease}.zs-hero__button:hover{background:var(--zs-hero-btn-hover-bg, #943B27);transform:translateY(-2px)}@media(max-width:1024px){.zs-hero__inner{grid-template-columns:1fr 1fr;gap:36px;min-height:var(--zs-collage-height-tablet, 460px)}.zs-hero__collage{height:var(--zs-collage-height-tablet, 460px)}.zs-hero__heading{font-size:clamp(24px,3.5vw,38px)}}@media(max-width:749px){.zs-hero{padding:var(--zs-hero-pad-top-mobile, 32px) var(--zs-hero-pad-right-mobile, 16px) var(--zs-hero-pad-bottom-mobile, 32px) var(--zs-hero-pad-left-mobile, 16px)}.zs-hero__inner{grid-template-columns:1fr;gap:28px;min-height:unset}.zs-hero__collage{height:var(--zs-collage-height-mobile, 320px);width:100%}.zs-hero__collage-item--front_center{width:55%;height:78%}.zs-hero__collage-item--top_left,.zs-hero__collage-item--top_right,.zs-hero__collage-item--bottom_left,.zs-hero__collage-item--bottom_right{width:38%}.zs-hero__heading{font-size:clamp(22px,6vw,30px)}.zs-hero__description{font-size:14px;max-width:100%}.zs-hero__button{padding:12px 26px;font-size:12px}}
/*# sourceMappingURL=/cdn/shop/t/1/assets/hero-collage-banner.css.map */