Refactor Skills component layout for improved responsiveness and readability

src/components/Skills.astro

@@ -14,9 +14,9 @@ interface SkillProps {
     <h3 class="text-3xl font-bold text-white text-center mb-10">
         Habilidades
     </h3>
-    <div class="flex items-center justify-between flex-wrap gap-6">
+    <div class="flex flex-wrap gap-6 justify-center md:justify-start">
     {skills.map((skill:SkillProps) => (
-        <div class="flex flex-col items-center justify-center p-6 text-center">
+        <div class="flex flex-col items-center justify-center w-24 md:w-28 p-6">
         <div class="relative group">
             <!-- Icono -->
             <Icon
@@ -27,12 +27,12 @@ interface SkillProps {
 
             <!-- Tooltip con flecha -->
             <div class="absolute top-full left-1/2 mt-3 -translate-x-1/2 hidden group-hover:flex flex-col items-center">
-            <!-- Cuerpo del tooltip -->
-            <div class="bg-gray-800 text-white text-sm px-2 py-1 rounded shadow-lg whitespace-nowrap relative">
-                {skill.name}
-                <!-- Flechita -->
-                <div class="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-gray-800 rotate-45"></div>
-            </div>
+                <!-- Cuerpo del tooltip -->
+                <div class="bg-gray-800 text-white text-sm px-2 py-1 rounded shadow-lg whitespace-nowrap relative">
+                    {skill.name}
+                    <!-- Flechita -->
+                    <div class="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-gray-800 rotate-45"></div>
+                </div>
             </div>
         </div>
         </div>