test

src/css/common.css

@@ -23,7 +23,9 @@ body{overflow-x:hidden;}
 .main-bg{position:relative;width:min(1440px,calc(100vw - 80px));height:600px;border-radius:24px;overflow:hidden;transform-origin:center center;will-change:transform,width,height,border-radius;background:#050b17;}
 
 .main-bg-hero1{position:absolute;inset:0;background:url('/images/hero1.png') no-repeat 50% 50%/cover;transform:scale(1.04);}
-.main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;}
+/* .main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;} */
+.main-bg-hero2{position:absolute;inset:0;opacity:0;overflow:hidden;}
+.hero-video{width:100%;height:100%;object-fit:cover;}
 .main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;}
 
 .main-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.12) 0%,rgba(4,10,24,.24) 38%,rgba(4,10,24,.56) 100%),linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.12) 100%);z-index:1;pointer-events:none;}

src/pages/MainPage.jsx

@@ -91,8 +91,10 @@ function MainPage() {
         <div className="main-bg-wrap">
           <div className="main-bg" ref={bgRef}>
             <div className="main-bg-hero1"></div>
-            <div className="main-bg-hero2" ref={hero2Ref}></div>
+            <div className="main-bg-hero2" ref={hero2Ref}>
-            <div className="main-bg-hero3" ref={hero3Ref}></div>
+              <video className="hero-video" src="./images/test.mp4" autoPlay muted loop playsInline />
+            </div>
+            {/* <div className="main-bg-hero3" ref={hero3Ref}></div> */}
 
             <div className="main-visible-atmo main-visible-atmo1"></div>
             <div className="main-visible-atmo main-visible-atmo2"></div>