.hero-container{display:flex;width:100%;height:100dvh;background-color:black}.hero-container,.section{position:relative;overflow:hidden}.section{flex:1 1}.red{-webkit-clip-path:polygon(0 0,100% 0,calc(100% - 15vh) 100%,0 100%);clip-path:polygon(0 0,100% 0,calc(100% - 15vh) 100%,0 100%)}.red img{width:100%;height:100%;object-fit:cover;display:block}.gray{-webkit-clip-path:polygon(17% 0,100% 0,83% 100%,0 100%);clip-path:polygon(17% 0,100% 0,83% 100%,0 100%);margin:0 -15vh;z-index:2}.gray .media-container{position:relative;width:100%;height:100%;background-color:black}.gray img,.gray video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;top:0;left:0;transition:opacity 1s ease-in-out}.gray .fade-in{opacity:1}.gray .fade-out{opacity:0}.yellow{-webkit-clip-path:polygon(15vh 0,100% 0,100% 100%,0 100%);clip-path:polygon(15vh 0,100% 0,100% 100%,0 100%)}.yellow img{object-fit:cover;display:block}.content,.yellow img{width:100%;height:100%}.content,.label{position:absolute}.label{top:20px;left:20px;color:white;font-size:16px}@media (min-height:1024px){.hero-container{display:flex;width:100%;height:70dvh;position:relative;overflow:hidden;background-color:black}.gray img,.gray video{margin:-150px auto!important;height:100vh;object-fit:contain}}@media (max-width:2187px){.red img{height:100dvh}}@media (max-width:1092px){.gray img,.gray video{height:100dvh;right:0}}@media (max-width:740px){.hero-container{display:flex;flex-direction:row;height:100dvh;width:100%;position:relative;overflow:hidden;background-color:black}.section{flex:1 1;position:relative;transition:opacity 1s ease-in-out}.gray,.red,.yellow{opacity:1;pointer-events:auto}.gray{-webkit-clip-path:none;clip-path:none;margin:0;z-index:2}.gray .media-container{width:100%;height:100%;position:relative}.gray img,.gray video{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;transition:opacity 1s ease-in-out}.hero-container.video-active .red,.hero-container.video-active .yellow{display:none;opacity:0}.hero-container.video-active .gray{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-clip-path:none;clip-path:none;margin:0;z-index:3}.hero-container.video-active .gray .media-container{width:100%;height:100%}.hero-container.video-active .gray .media-container img{opacity:0}.hero-container.video-active .gray .media-container video{opacity:1;width:100%;height:100%;object-fit:cover}.content{position:absolute;top:0;left:0;width:100%;height:100%}.red,.yellow{-webkit-clip-path:none;clip-path:none}}