auto margin

assets/css/hero.css

@@ -16,9 +16,8 @@
   text-align: center;
   width: 100%;
   height: 30vw;
-  /* max-width: 1200px; */
   gap: 4rem; /* Space between items */
-  margin-bottom: 4rem;
+  margin-bottom: auto;
   background: linear-gradient(to bottom right, #F9B208, #E72E77);
   padding-top: 60px;
   padding-bottom: 40px;
@@ -176,61 +175,6 @@
   background-color: linear-gradient(to bottom right, #F9B208, #E72E77);
 }
 
-/* Responsive layout for larger screens */
-@media screen and (min-width: 768px) {  
-  .hero-inner {
-    justify-content: space-between;
-    width: 100%;
-    flex-direction: row;
-  }
-  
-  .hero-content {
-    text-align: center;
-    padding: 20px;
-    margin-right: none;
-  }
-  
-  .hero-logo {
-    width: 200px;
-    margin: 0 auto 20px;
-    margin-bottom: 40px;
-  }
-  
-  .hero-title {
-    font-size: 2.5rem;
-    color: white;
-    margin-bottom: 40px;
-  }
-  
-  .hero-button:hover {
-    background-color: white;
-    /* color: #2ee797; */
-    color: #ff3988;
-    box-shadow: 0 0px 16px rgba(0, 0, 0, 0.3);
-  }
-  
-  .hero-screenshots {
-    max-width: 50%;
-    display: flex;
-    gap: 40px;
-    margin-left: 0px;
-    padding-left: 0px;
-    flex-direction: row;
-  }
-  
-  .screenshot {
-    width: auto;
-    height: 330px;
-    border-radius: 13px;
-  }
-  
-  .screenshot img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
 
 /* Phone screens */
 @media (max-width: 767px) {
@@ -250,6 +194,9 @@
     width: 80vw;
   }
 
+  .hero-second {
+    width: 100%;
+  }
 
   .hero-bloc {
     flex-direction: column;