fix hero first

assets/css/hero.css

@@ -17,7 +17,7 @@
   width: 100%;
   height: 70vh;
   gap: 4rem; /* Space between items */
-  margin-bottom: auto;
+  margin: auto;
   background: linear-gradient(to bottom right, #F9B208, #E72E77);
   /* padding-top: 60px;
   padding-bottom: 40px;
@@ -67,13 +67,14 @@
 .hero-screenshots {
   display: flex;
   flex-direction: row;
-  gap: 3rem;
   align-items: center;
+  height: 45vh;
+  gap: 3rem;
 }
 
 .screenshot img {
-  height: 45vh;
-  width: auto;
+  height: auto;
+  width: 11vw;
   border-radius: 15px;
   border: 4px solid black;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
@@ -186,15 +187,24 @@
     flex-direction: column;
   }
 
+  .hero-logo {
+    height: 10vh;
+  }
+
   .hero-content {
     height: 20vh;
   }
 
   .hero-screenshots {
-    height: auto;
+    height: 20vh;
     width: 80vw;
   }
 
+  .screenshot img {
+    width: 13vw;
+    height: auto;
+  }
+
   .hero-second {
     width: 100%;
   }