Change Press hero

src/components/sections/newsroom/hero/hero.module.scss

@@ -21,14 +21,57 @@
     }
   }
 
+  .video_container {
+    @include respond-to('mobile') {
+      min-height: unset;
+    }
+
+    position: relative;
+    align-self: center;
+    width: 70%;
+    min-height: tovw(780px, 'default', 370px);
+    margin-top: tovw(-50px, 'default');
+    padding-top: tovw(30px, 'default', 20px);
+    mix-blend-mode: lighten;
+
+    video {
+      @include respond-to('mobile') {
+        display: none;
+      }
+
+      width: 100%;
+      margin: auto;
+      z-index: 1;
+    }
+
+    &::after {
+      position: absolute;
+      top: tovw(10px, 'default', 10px);
+      left: 0;
+      z-index: 1;
+      mix-blend-mode: overlay;
+      background: radial-gradient(
+        ellipse,
+        rgb(3 3 3 / 0) 50%,
+        rgb(3 3 3 / 1) 72%,
+        rgb(3 3 3 / 1) 100%
+      );
+      width: 101%;
+      height: 90%;
+      content: '';
+    }
+  }
+
   .hero__container {
     @include respond-to('mobile') {
       min-height: tovw(360px, 'mobile', 460px);
+      display: flex;
+      place-content: center;
     }
 
-    display: flex;
-    place-content: center;
-    min-height: tovw(650px, 'default', 350px);
+    display: none;
+
+    // min-height: tovw(650px, 'default', 350px);
 
     .hero {
       @include respond-to('mobile') {

src/components/sections/newsroom/hero/index.tsx

@@ -20,13 +20,20 @@ const Hero = ({ data }: Props) => {
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s.gradient} />
+      <div className={s['video_container']}>
+        <video
+          autoPlay
+          controls={false}
+          loop
+          muted
+          playsInline={true}
+          preload="true"
+        >
+          {/* <source src="/videos/banner-press.webm" type="video/webm" /> */}
+          <source src="/videos/banner-press.mp4" type="video/mp4" />
+        </video>
+      </div>
       <div className={s.hero__container}>
-        <img
-          className={s.hero}
-          loading="eager"
-          alt="hero"
-          src="/images/press/press.png"
-        />
         <img
           className={s.hero__mobile}
           loading="eager"