homepage and mini mobile systems

wp/wp-content/themes/medicalalert/src/scss/hero.scss

@@ -1,15 +1,18 @@
 .hero-slice-container {
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: top;
-    min-height: 550px;
-    padding: 4rem 0;
+    margin-bottom: 3rem;
+
+    .hero-copy {
+        font-size: 20px;
+        line-height: 32px;
+        font-weight: 400;
+        color: #110F24;
+    }
 }
 
 .consumer-brand {
     .hero-slice-container {
         .hero-title {
-            color: $consumer-primary;
+            color: #110F24;
         }
     }
 }
@@ -17,7 +20,60 @@
 .business-brand {
     .hero-slice-container {
         .hero-title {
-            color: $business-primary;
+            color: #110F24;
         }
     }
+}
+
+.tile-1 {
+    max-width: 500px;
+}
+
+.tile-2 {
+    right: 2%;
+    bottom: -6%;
+    width: 160px;
+}
+
+.tile-square {
+    max-width: 250px;
+}
+
+.pos {
+    margin-bottom: -85px;
+}
+
+.sonar-svg-3 {
+    display: none;
+}
+
+@include media-breakpoint-up(md) {
+    .sonar-svg-3 {
+        display: block;
+        position: absolute;
+        bottom: -42%;
+        right: -18%;
+        overflow-x: hidden;
+    }
+
+    .pos {
+        margin-bottom: -175px;
+    }
+
+    .tile-2 {
+        width: 100%;
+        right: -2%;
+    }
+
+    .tile-2 img {
+        max-width: 325px;
+        width: 100%;
+    }
+
+}
+
+.sonar-svg {
+    bottom: -292px;
+    right: -200px;
+    overflow-x: hidden;
 }