Reduce hero spacing on small screens

1 files changed, 15 insertions, 1 deletions

diff --git a/src/components/landing/sections/Hero.module.css b/src/components/landing/sections/Hero.module.css
index bc5c151..ce0444f 100644
--- a/src/components/landing/sections/Hero.module.css
+++ b/src/components/landing/sections/Hero.module.css
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Kristóf Marussy
+ * SPDX-FileCopyrightText: 2023-2024 Kristóf Marussy
  *
  * SPDX-License-Identifier: MIT
  */
@@ -11,6 +11,13 @@
   --ifm-link-hover-color: var(--ifm-link-color);
 }
 
+@media (max-width: 996px) {
+  .hero {
+    padding-top: 2rem;
+    padding-bottom: 0;
+  }
+}
+
 .hero__col {
   display: flex;
   flex-direction: column;
@@ -22,6 +29,12 @@
   align-items: center;
 }
 
+@media (max-width: 996px) {
+  .avatar {
+    padding-bottom: 1rem;
+  }
+}
+
 .avatar__image {
   width: 100%;
   max-width: 298px;
@@ -35,6 +48,7 @@
   font-size: 1.5rem;
 }
 
+
 .introduction__name {
   font-family: var(--ifm-heading-font-family);
   font-weight: var(--ifm-heading-font-weight);