added very small screens

src/app/hero/hero.component.scss

@@ -37,6 +37,21 @@ img {
   }
   .slogan {
     font-size: 2rem;
+    text-align: center;
+  }
+
+  :host {
+    padding: 7rem 0;
+  }
+}
+
+@media only screen and (max-width: $very-small-screen) {
+  h1 {
+    font-size: 2rem;
+  }
+  .slogan {
+    font-size: 1.5rem;
+    text-align: center;
   }
 
   :host {

src/app/services/services.component.scss

@@ -44,5 +44,12 @@
       height: 100%;
     }
   }
-
+}
+
+@media only screen and (max-width: $very-small-screen) {
+  .service {
+    h2 {
+      font-size: 1rem;
+    }
+  }
 }

src/vars.scss

@@ -1 +1,2 @@
 $small-screen: 50rem;
+$very-small-screen: 25rem;