Blog hero changes

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

@@ -27,7 +27,7 @@
 
     display: flex;
     place-content: center;
-    min-height: tovw(650px, 'default', 340px);
+    min-height: tovw(650px, 'default', 390px);
 
     .hero {
       @include respond-to('mobile') {
@@ -65,16 +65,24 @@
       padding-top: tovw(80px, 'tablet');
     }
 
+    position: relative;
     z-index: 10;
     padding-top: tovw(178px, 'default', 88px);
-    margin-top: tovw(-300px, 'default', -1450px);
+    margin-top: tovw(-200px, 'default', -1450px);
 
     h1 {
       @include respond-to('mobile') {
         font-size: tovw(50px, 'mobile');
+        bottom: 125%;
       }
 
-      padding-bottom: tovw(120px, 'default', 80px);
+      position: absolute;
+      margin: auto;
+      left: 0;
+      right: 0;
+      bottom: 130%;
+
+      // padding-bottom: tovw(120px, 'default', 80px);
     }
 
     @media screen and (max-width: 800px) {

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

@@ -18,7 +18,7 @@ const Hero = ({ featuredPost }: HeroProps) => {
           className={s.hero}
           loading="eager"
           alt="hero"
-          src="/images/blog/blog.png"
+          src="/images/blog/blog2.png"
         />
         <img
           className={s.hero__mobile}