Footer Improves (#17)

src/components/common/footer/footer.module.scss

@@ -140,8 +140,17 @@
 
     nav {
       display: flex;
-      gap: tovw(88px, 'default', 64px);
+      gap: tovw(88px, 'default', 55px);
+
+      @media screen and (max-width: 1180px) {
+        gap: tovw(65px, 'default', 35px);
+      }
+
       @media screen and (max-width: 1024px) {
+        justify-content: space-between;
+      }
+
+      @media screen and (max-width: 800px) {
         display: grid;
         column-gap: tovw(97px, 'tablet', 97px);
         grid-template-columns: repeat(2, 1fr);
@@ -207,10 +216,42 @@
   }
 }
 
+.connect__links__mobile {
+  display: none;
+
+  @media screen and (max-width: 800px) {
+    > li:last-of-type {
+      display: flex;
+      justify-content: center;
+      gap: tovw(24px, 'mobile');
+
+      div {
+        width: tovw(24px, 'default', 24px);
+        height: tovw(24px, 'default', 24px);
+      }
+    }
+  }
+}
+
 .sub__footer {
+  ul:first-child {
+    display: none;
+
+    @media screen and (max-width: 800px) {
+      display: unset;
+    }
+  }
+
+  display: flex;
+  flex-direction: column;
+  gap: tovw(32px, 'default', 32px);
   margin-top: tovw(18px, 'default', 18px);
   margin-bottom: tovw(44px, 'default', 36px);
 
+  @media screen and (max-width: 800px) {
+    margin-top: tovw(32px, 'tablet', 32px);
+  }
+
   a,
   p {
     font-size: tovw(18px, 'default', 14px);
@@ -223,6 +264,7 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
+
     @media screen and (max-width: 800px) {
       align-items: center;
       flex-direction: column;
@@ -233,10 +275,12 @@
       }
     }
 
-    div {
+    > div {
       display: flex;
       gap: tovw(37px, 'default', 24px);
+
       @media screen and (max-width: 800px) {
+        gap: tovw(32px, 'mobile');
         margin-bottom: tovw(32px, 'tablet', 32px);
       }
     }

src/components/common/footer/index.tsx

@@ -147,6 +147,20 @@ export const Footer = () => {
         </Container>
         <Container>
           <nav className={s['sub__footer']}>
+            <ul className={s['connect__links__mobile']}>
+              <li>
+                {ConnectLinks.map((link, index) => {
+                  return (
+                    <div key={`${link.title}-${index}`}>
+                      <Link href={link.href} variant="unstyled">
+                        <span className="sr-only">{link.title}</span>
+                        {link.logo && link.logo}
+                      </Link>
+                    </div>
+                  )
+                })}
+              </li>
+            </ul>
             <ul>
               <div>
                 <li>