Hero styles for small screens

components/hero/style.module.css

@@ -6,33 +6,29 @@
 }
 
 .hero > div {
-  margin: 0;
-    margin-right: 0px;
-    margin-left: 0px;
+  margin: 0 auto;
   max-width: 2000px;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 0;
+  padding: 15px;
   position: relative;
-  top: 0;
   background-size: cover;
   background-position: center center;
   min-height: 400px;
   box-shadow: inset 0 -15px 7.5px -7.5px rgba(0,0,0,0.2);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
-.hero img.icon {
-  position: absolute;
-  right: 60%;
+.icon {
   margin-right: 20px;
-  margin-top: -10px;
-  top: 80px;
   max-width: 300px;
-
+  height: auto;
+  display: block;
 }
 
-.hero div.content {
-  position: absolute;
+.content {
+  max-width: 400px;
   left: 40%;
   right: 20%;
   padding-left: 20px;
@@ -49,3 +45,17 @@
 .hero p {
   opacity: .7;
 }
+
+@media (max-width: 650px) {
+  .hero > div {
+    flex-direction: column;
+  }
+
+  .icon {
+    margin-right: 0;
+  }
+
+  .content {
+    padding: 0;
+  }
+}