.image-with-video{position:relative}.image-with-video__wrapper{display:flex;align-items:center;gap:4rem;min-height:50rem}.image-with-video__wrapper--left{flex-direction:row}.image-with-video__wrapper--right{flex-direction:row-reverse}.image-with-video__wrapper--top{flex-direction:column}.image-with-video__wrapper--bottom{flex-direction:column-reverse}.image-with-video__wrapper--center{flex-direction:column;text-align:center}.image-with-video__wrapper--center .image-with-video__content{max-width:80rem;margin:0 auto}.image-with-video__video{flex:1;position:relative;overflow:hidden;border-radius:.8rem;background:#000}.image-with-video__video video{width:100%}.image-with-video__wrapper--16-9 .image-with-video__video{aspect-ratio:16/9}.image-with-video__wrapper--4-3 .image-with-video__video{aspect-ratio:4/3}.image-with-video__wrapper--1-1 .image-with-video__video{aspect-ratio:1/1}.image-with-video__wrapper--21-9 .image-with-video__video{aspect-ratio:21/9}.image-with-video__wrapper--9-16 .image-with-video__video{aspect-ratio:9/16}.video-player{width:100%;height:100%;object-fit:cover;display:block}.image-with-video__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.image-with-video__placeholder-image{width:100%;height:100%;object-fit:cover}.image-with-video__play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;transition:all .3s ease}.play-button{width:8rem;height:8rem;border-radius:50%;background:#ffffffe6;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 4px 20px #0003}.play-button:hover{background:#fff;transform:scale(1.1);box-shadow:0 6px 30px #0000004d}.play-icon{width:3rem;height:3rem;color:#000;margin-left:.4rem}.image-with-video__content{flex:1;max-width:60rem}.image-with-video__content-inner{padding:2rem 0}.image-with-video__content-inner--left{text-align:left}.image-with-video__content-inner--center{text-align:center}.image-with-video__content-inner--right{text-align:right}.image-with-video__heading{margin-bottom:2rem;color:rgb(var(--color-foreground))}.image-with-video__text{margin-bottom:2rem;color:rgba(var(--color-foreground),.75)}.image-with-video__text p{margin-bottom:1rem}.image-with-video__text p:last-child{margin-bottom:0}.image-with-video__overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1;display:flex;align-items:center;justify-content:center}.image-with-video__overlay-content{color:#fff;text-align:center;padding:2rem;max-width:60rem}.image-with-video__overlay-heading{color:#fff;margin-bottom:1.5rem}.image-with-video__overlay-text{color:#ffffffe6;margin-bottom:2rem}.image-with-video__overlay .button{background:#fff;color:#000;border:2px solid #fff}.image-with-video__overlay .button:hover{background:transparent;color:#fff}@media screen and (max-width: 990px){.image-with-video__wrapper{gap:2rem;min-height:40rem}.image-with-video__wrapper--left,.image-with-video__wrapper--right{flex-direction:column}.play-button{width:6rem;height:6rem}.play-icon{width:2.4rem;height:2.4rem}}@media screen and (max-width: 749px){.image-with-video__wrapper{gap:1.5rem;min-height:30rem}.image-with-video__content-inner{padding:1.5rem 0}.image-with-video__heading,.image-with-video__text{margin-bottom:1.5rem}.play-button{width:5rem;height:5rem}.play-icon{width:2rem;height:2rem}.image-with-video__overlay-content{padding:1.5rem}.image-with-video__overlay-heading{margin-bottom:1rem}.image-with-video__overlay-text{margin-bottom:1.5rem}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.play-button{animation:pulse 2s infinite}.play-button:hover{animation:none}.video-player:not([poster]){background:#000}.video-player:not([poster]):before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4rem;height:4rem;border:3px solid rgba(255,255,255,.3);border-top:3px solid #fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@media (prefers-reduced-motion: reduce){.play-button{animation:none}.video-player:not([poster]):before{animation:none}}.play-button:focus{outline:2px solid rgb(var(--color-foreground));outline-offset:2px}.video-player:focus{outline:2px solid rgb(var(--color-foreground));outline-offset:2px}
/*# sourceMappingURL=/cdn/shop/t/7/assets/section-image-with-video.css.map */