restyling footer columns order & change icons margins

index.html

@@ -2402,7 +2402,7 @@ <h2>i zgarnij<span>50 zł rabatu!</span></h2>
     <footer class="footer-2-0">
         <div class="footer-wrapper">
             <div class="footer-wrapper-top">
-                <div class="footer-wrapper-top-col">
+                <div class="footer-wrapper-top-col footer-logo">
                     <div class="footer-wrapper-top-col__logo">
                         <img src="./assets/icons/footer/footer-logo.svg" alt="FURNIPOL – MEBLE" width="251" height="30">
                     </div>
@@ -2424,7 +2424,7 @@ <h2>i zgarnij<span>50 zł rabatu!</span></h2>
                         </div>
                     </div>
                 </div>
-                <div class="footer-wrapper-top-col">
+                <div class="footer-wrapper-top-col footer-info">
                     <div class="footer-col-wrapper">
                         <div class="footer-col-wrapper__title">
                             <h3>Informacje</h3>
@@ -2441,7 +2441,7 @@ <h3>Informacje</h3>
                         </div>
                     </div>
                 </div>
-                <div class="footer-wrapper-top-col">
+                <div class="footer-wrapper-top-col footer-shopping">
                     <div class="footer-col-wrapper">
                         <div class="footer-col-wrapper__title">
                             <h3>Zakupy</h3>
@@ -2458,7 +2458,7 @@ <h3>Zakupy</h3>
                         </div>
                     </div>
                 </div>
-                <div class="footer-wrapper-top-col">
+                <div class="footer-wrapper-top-col footer-contact">
                     <div class="footer-col-wrapper">
                         <div class="footer-col-wrapper__title">
                             <h3>Kontakt</h3>

sass/common/_footer.scss

@@ -246,6 +246,23 @@
         &-col {
           width: 100%;
           margin-right: 0;
+          &.footer-logo {
+            order: 1;
+          }
+          &.footer-info {
+            order: 3;
+          }
+          &.footer-shopping {
+            order: 4;
+          }
+          &.footer-contact {
+            order: 2;
+            .footer-col-wrapper {
+              &__title {
+                border-top: 0;
+              }
+            }
+          }
           &:nth-of-type(1) {
             width: 100%;
           }
@@ -259,7 +276,7 @@
               display: none;
             }
             a {
-              margin-right: 16px;
+              margin-right: 24px;
               &:last-of-type {
                 margin-right: 0;
               }

sass/main.css

@@ -2313,6 +2313,21 @@ body {
     width: 100%;
     margin-right: 0;
   }
+  .footer-2-0 .footer-wrapper-top-col.footer-logo {
+    order: 1;
+  }
+  .footer-2-0 .footer-wrapper-top-col.footer-info {
+    order: 3;
+  }
+  .footer-2-0 .footer-wrapper-top-col.footer-shopping {
+    order: 4;
+  }
+  .footer-2-0 .footer-wrapper-top-col.footer-contact {
+    order: 2;
+  }
+  .footer-2-0 .footer-wrapper-top-col.footer-contact .footer-col-wrapper__title {
+    border-top: 0;
+  }
   .footer-2-0 .footer-wrapper-top-col:nth-of-type(1) {
     width: 100%;
   }
@@ -2327,7 +2342,7 @@ body {
     display: none;
   }
   .footer-2-0 .footer-wrapper-top-col__socials a {
-    margin-right: 16px;
+    margin-right: 24px;
   }
   .footer-2-0 .footer-wrapper-top-col__socials a:last-of-type {
     margin-right: 0;