From 5c5fef5df54f1b16f1510b61d934592b230bf792 Mon Sep 17 00:00:00 2001
From: Arne Vlaeminck <arne@cptarn.com>
Date: Thu, 7 Nov 2024 21:27:09 +0100
Subject: [PATCH] added very small screens

---
 src/app/hero/hero.component.scss         | 15 +++++++++++++++
 src/app/services/services.component.scss |  9 ++++++++-
 src/vars.scss                            |  1 +
 3 files changed, 24 insertions(+), 1 deletion(-)

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;