aligned footer components

Author: klezi10

components/layout/Footer.js

@@ -23,6 +23,9 @@ export default function Footer() {
           </a>
         </Link>
 
+      <div className={footerStyles.footer__navSocialsDiv}>
+    {/* nav & socials */}
+      
         <nav className={footerStyles.footer__nav} aria-label='Main'>
           <ul className={footerStyles.footer__navList}>
             {linksNav.map(link => (
@@ -35,21 +38,24 @@ export default function Footer() {
           </ul>
         </nav>
 
-        <div>
-          <ul>
+        <div className={footerStyles.footer__socialIcons}>
+          <ul className={footerStyles.footer__socialList}>
             {linksSocial.map(link => (
-              <li key={link.id}>
+              <li className={footerStyles.footer__socialItem} key={link.id}>
                 <Image 
                   src={link.src}
-                  height={47}
-                  width={47}
+                  height={82}
+                  width={68}
                 />
               </li>
             ))}
           </ul>
         </div>
+        </div>
 
       </Container>
+
+
       <Container>
         <p className={footerStyles.footer__copyright}>
           © Web Dev Path {new Date().getFullYear()}. All rights reserved.

styles/Footer.module.scss

@@ -30,10 +30,20 @@
 
   &__navList {
     padding: 0;
+
+    @include tablet {
+      display: flex;
+      flex-direction: row;
+    }
   }
 
+
   &__navItem {
     margin: 0.5rem 0;
+    
+    @include tablet {
+      padding-left: 60px;
+    }
   }
 
   &__logo {
@@ -52,10 +62,57 @@
     }
   }
 
+  &____navSocialsDiv {
+    display: flex;
+    flex-direction: column;
+    
+  }
+
+  &__socialIcons {
+    
+    @include tablet {
+     
+    }
+
+    @include large-desktop {
+      
+    }
+  }
+
+  &__socialList {
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+
+    @include tablet {
+      justify-content: end;
+    }
+  }
+
+  &__socialItem {
+    width: 47px;
+
+    @include tablet {
+      padding-left: 28px;
+      max-width: 68px;
+    }
+
+    @include large-desktop {
+      max-width: 100%;
+      padding-left: 28px;
+      width: 68px;
+    }
+  }
+
   &__copyright {
     text-align: center;
     margin: 0;
     font-size: 1rem;
     padding-bottom: 2.5rem;
+
+    @include tablet {
+      text-align: end;
+    }
   }
 }