fix: add adaptive to header, footer

src/widgets/footer/styles.module.scss

@@ -15,17 +15,37 @@
 
 .Grid {
   margin: 0 auto;
-  width: 1540px;
-  padding: 40px 0 0;
+  max-width: 1540px;
+  padding: 20px 10px 20px;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  ///grid-template-rows: 1fr 1fr;
+  grid-template-columns: auto;
   grid-auto-columns: 1fr;
-  gap: 0px 0px;
+  gap: 40px 20px;
   grid-auto-flow: row;
   grid-template-areas:
+    "about"
+    "contacts"
+    "social";
+
+  @include iftablet {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+    "about about"
+    "contacts social";
+    padding: 40px 20px 0;
+    gap: 20px 2px;
+  }
+  @include iflaptop {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-areas:
     "about linksa linksb linksc"
     "contacts contacts social social";
+    padding: 40px 28px 0;
+    gap: 0px 0px;
+  }
+  @include ifdesktop {
+    padding: 40px 40px 0;
+  }
 
   .About {
     grid-area: about;
@@ -46,6 +66,14 @@
   .LinksA {
     grid-area: linksa;
     padding: 10px;
+    display: none;
+    @include iftablet {
+    }
+    @include iflaptop {
+      display: block;
+    }
+    @include ifdesktop {
+    }
 
     .Title {
       @extend %title;
@@ -63,6 +91,11 @@
   .LinksB {
     grid-area: linksb;
     padding: 10px;
+    display: none;
+
+    @include iflaptop {
+      display: block;
+    }
 
     .Title {
       @extend %title;
@@ -80,6 +113,11 @@
   .LinksC {
     grid-area: linksc;
     padding: 10px;
+    display: none;
+
+    @include iflaptop {
+      display: block;
+    }
 
     .Title {
       @extend %title;
@@ -103,16 +141,30 @@
 
     .Icons {
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
       justify-content: center;
       gap: 24px;
 
+      @include iflaptop {
+        flex-direction: row;
+        justify-content: center;
+      }
+
       .IconBox {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         align-items: center;
         gap: 16px;
 
+        @include iftablet {
+        }
+
+        @include iflaptop {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
         .Icon {
           border-radius: 50%;
           width: 48px;
@@ -130,7 +182,13 @@
 
   .Social {
     grid-area: social;
-    padding-left: 200px;
+
+    @include iflaptop {
+      padding-left: 100px;
+    }
+    @include ifdesktop {
+      padding-left: 200px;
+    }
 
     .Title {
       @extend %title;
@@ -151,12 +209,12 @@
 
 .Bottom {
   margin: 0 auto;
-  width: 1540px;
+  max-width: 1540px;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  padding: 16px 0;
+  padding: 16px 10px;
 
   font-family: $font-roboto;
   font-weight: $font-regular;
@@ -164,6 +222,40 @@
   line-height: 100%;
   color: $color-white;
 
+  @include iftablet {
+    padding: 16px 20px;
+  }
+  @include iflaptop {
+    padding: 16px 28px;
+  }
+  @include ifdesktop {
+    padding: 16px 40px;
+  }
+
+  .List {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    @include iftablet{
+      flex-direction: row;
+    }
+  }
+
+  .ListItem {
+    &:after{
+      padding-left: 0;
+
+      @include iftablet {
+        content: '|';
+        padding-left: 8px;
+      }
+    }
+    &:last-child:after {
+      content: unset;
+    }
+  }
+
   & a {
     text-decoration: none;
     color: $color-link-hover;