diff --git a/src/app/hero/hero.component.scss b/src/app/hero/hero.component.scss
index 1305fb6..940775c 100644
--- a/src/app/hero/hero.component.scss
+++ b/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 {
diff --git a/src/app/services/services.component.scss b/src/app/services/services.component.scss
index 0ff54b0..5efa4ae 100644
--- a/src/app/services/services.component.scss
+++ b/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;
+    }
+  }
 }
diff --git a/src/vars.scss b/src/vars.scss
index 44567c6..3ba9997 100644
--- a/src/vars.scss
+++ b/src/vars.scss
@@ -1 +1,2 @@
 $small-screen: 50rem;
+$very-small-screen: 25rem;