Unify social links component. Style tweaks for responsiveness

src/layouts/RootLayout.astro

@@ -33,7 +33,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
     </div>
 	</body>
   <style>
-    @media (max-width: 900px) {
+    @media (max-width: 1000px) {
       body {
         grid-template-areas: 
           "header"
@@ -52,7 +52,8 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
         display: none;
       }
     }
-    @media (min-width: 900px) {
+
+    @media (min-width: 1000px) {
       body {
         grid-template-areas: 
           "header header"
@@ -69,6 +70,13 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
         display: block;
       }
     }
+
+    @media (max-width: 500px) {
+      body {
+        font-size: 14px;
+      }
+    }
+
     body {
       display: grid;
     }