fix: adjust ui spacing of footer elements

Author: alvyynm

src/components/Footer.jsx

@@ -86,7 +86,7 @@ function Footer() {
 
   return (
     <footer className="bg-secondary text-white">
-      <div className="md:p-12 py-8 px-4 relative max-w-[1440px] mx-auto">
+      <div className="md:px-12 py-8 px-4 relative max-w-[1440px] mx-auto">
         <div className="flex lg:flex-row flex-col md:gap-16 gap-8">
           <div className="flex-3 flex flex-col items-center">
             {/* logo */}
@@ -126,17 +126,17 @@ function Footer() {
           </div>
 
           {/* Footer links */}
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-12 sm:gap-8">
+          <div className="grid grid-cols-1 sm:grid-cols-3 md:gap-12 gap-8">
             {footerLinks.map((section) => (
               <div
                 key={crypto.randomUUID()}
-                className="flex flex-col gap-8 text-center lg:text-left"
+                className="flex flex-col gap-2 md:gap-4 text-center lg:text-left"
               >
-                <h2 className="text-green-footer font-bold sm:text-xl text-lg leading-9">
+                <h2 className="text-green-footer font-bold sm:text-xl text-lg md:leading-9">
                   {section.title}
                 </h2>
 
-                <ul className="flex flex-col gap-5 list-none text-sm font-light">
+                <ul className="flex flex-col gap-3 md:gap-5 list-none text-sm font-light">
                   {section.links.map((link) =>
                     link.href ? (
                       <li key={crypto.randomUUID()}>
@@ -162,7 +162,7 @@ function Footer() {
 
           {/* Newsletter */}
           <div className="flex-2">
-            <div className="flex flex-col md:gap-8">
+            <div className="flex flex-col gap-2 md:gap-4">
               <h2 className="text-green-footer font-bold sm:text-xl text-lg md:leading-9 mx-auto lg:mx-0 text-center lg:text-left">
                 Subscribe to our Newsletter
               </h2>