From 3d892a44a8b8bf7387402b378e8c098522ee5421 Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Mon, 10 Mar 2025 20:52:10 +0100
Subject: [PATCH] style(Hero): center-align text and adjust flex properties

---
 src/components/sections/Hero.astro | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
index 4c2bbdc..5e4e255 100644
--- a/src/components/sections/Hero.astro
+++ b/src/components/sections/Hero.astro
@@ -65,33 +65,33 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
       </div>
 
       <div class="border-t theme-border pt-8 mt-10">
-        <div class="grid grid-cols-1 sm:grid-cols-3 w-full gap-6 sm:gap-0 py-6 sm:py-8 font-['Instrument_Sans']">
-          <div class="sm:border-r theme-border last:border-r-0 px-4">
-            <div class="mb-3 sm:mb-4">
-              <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium">EMAIL</span>
+        <div class="grid grid-cols-1 sm:grid-cols-3 w-full gap-6 sm:gap-0 py-6 sm:py-8 font-['Instrument_Sans'] text-center">
+          <div class="sm:border-r theme-border last:border-r-0 px-4 flex flex-col items-center justify-center">
+            <div class="mb-3 sm:mb-4 w-full text-center">
+              <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium block">EMAIL</span>
             </div>
             <a 
               href="mailto:jleibl@proton.me" 
-              class="theme-text-90 hover:theme-primary transition-colors text-base sm:text-lg"
+              class="theme-text-90 hover:theme-primary transition-colors text-base sm:text-lg block w-full"
             >
               jleibl@proton.me
             </a>
           </div>
           
-          <div class="sm:border-r theme-border last:border-r-0 px-4">
-            <div class="mb-3 sm:mb-4">
-              <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium">ROLE</span>
+          <div class="sm:border-r theme-border last:border-r-0 px-4 flex flex-col items-center justify-center">
+            <div class="mb-3 sm:mb-4 w-full text-center">
+              <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium block">ROLE</span>
             </div>
-            <span class="theme-text-90 text-base sm:text-lg">
+            <span class="theme-text-90 text-base sm:text-lg block w-full">
               Fullstack Developer
             </span>
           </div>
           
-          <div class="px-4">
-            <div class="mb-3 sm:mb-4">
-              <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium">EXPERIENCE</span>
+          <div class="px-4 flex flex-col items-center justify-center">
+            <div class="mb-3 sm:mb-4 w-full text-center">
+              <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium block">EXPERIENCE</span>
             </div>
-            <span class="theme-text-90 text-base sm:text-lg">
+            <span class="theme-text-90 text-base sm:text-lg block w-full">
               5+ Years
             </span>
           </div>
@@ -113,4 +113,4 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
   .animate-button:active {
     transform: scale(0.98);
   }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file