change hero section positions/sizes

src/scss/pages/_rumble.scss

@@ -37,7 +37,7 @@
 
   .intro {
     position: relative;
-    flex-direction: column;
+    flex-direction: row;
 
     img.rumbleLogo,
     img.rumbleRedLogo,
@@ -48,9 +48,11 @@
     }
     
     img.rumbleLogo {
-      top: 20%;
+      top: 47%;
-      width: calc(100vw * 0.8);
+      bottom: 63%;
-      max-width: 600px;
+      margin: auto;
+      width: 30%;
+      max-width: 576px;
       transition: 0.15s linear;
       z-index: 5;
       
@@ -65,9 +67,12 @@
     img.rumbleRedLogo,
     img.rumbleGreenLogo,
     img.rumbleYellowLogo {
-      top: 20%;
+      left: 0;
-      min-width: 400px;
+      right: 0;
-      width: 40%;
+      top: 50%;
+      bottom: 50%;
+      margin: auto;
+      width: 28%;
       max-width: 840px;
       visibility: hidden;
     }
@@ -89,7 +94,12 @@
       min-width: 100px;
       width: 7%;
       display: block;
-      bottom: 10rem;
+      align-self: flex-end;
+      left: 0;
+      right: 0;
+      top: 62%;
+      bottom: 0;
+      margin: auto;
     }
 
     .scroll-indicator {
@@ -278,6 +288,19 @@
 }
 
 @media screen and (max-width: 960px) {
+  .rumble > .intro {
+    img.rumbleLogo {
+      width: calc(100vw * 0.8);
+    }
+
+    img.rumbleRedLogo,
+    img.rumbleGreenLogo,
+    img.rumbleYellowLogo {
+      width: 95%;
+    }
+
+  }
+
   .rumble > .selector {
     flex-direction: column;