react-project/src/components/Footer/assets/modules/Developed.module.scss

@@ -7,6 +7,10 @@
     gap: 12px;
   }
 
+  @media screen and (max-width: 1024px) {
+    order: 2;
+  }
+
   span {
     font-weight: 400;
     font-size: 10px;

react-project/src/components/Footer/assets/modules/FooterBottom.module.scss

@@ -5,6 +5,13 @@
   background-color: var(--black);
   padding: 15px 100px;
 
+  @media screen and (max-width: 1024px) {
+    padding: 15px 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+
   p {
     width: 234px;
     font-weight: 400;
@@ -18,6 +25,10 @@
       font-size: 20px;
       line-height: 23px;
     }
+
+    @media screen and (max-width: 1024px) {
+      order: 1;
+    }
   }
 
   &__icons {
@@ -25,12 +36,28 @@
     align-items: center;
     gap: 12px;
 
+    @media screen and (max-width: 599px) {
+      gap: 11px;
+    }
+
+    @media screen and (max-width: 361px) {
+      gap: 6px;
+    }
+
     ul {
       list-style: none;
       display: flex;
       align-items: center;
       gap: 12px;
 
+      @media screen and (max-width: 599px) {
+        gap: 11px;
+      }
+
+      @media screen and (max-width: 361px) {
+        gap: 6px;
+      }
+
       li {
         display: contents;
 
@@ -42,6 +69,16 @@
               width: 70px;
               height: 40px;
             }
+
+            @media screen and (max-width: 599px) {
+              width: 30px;
+              height: 17px;
+            }
+
+            @media screen and (max-width: 361px) {
+              width: 24px;
+              height: 15px;
+            }
           }
         }
       }
@@ -51,6 +88,10 @@
       background-color: var(--gray-100);
       width: 1px;
       height: 24px;
+
+      @media screen and (max-width: 599px) {
+        height: 20px;
+      }
     }
 
     figure {
@@ -61,6 +102,16 @@
           width: 106px;
           height: 66px;
         }
+
+        @media screen and (max-width: 599px) {
+          width: 45px;
+          height: 28px;
+        }
+
+        @media screen and (max-width: 361px) {
+          width: 35px;
+          height: 25px;
+        }
       }
     }
   }

react-project/src/components/Footer/assets/modules/SocialMedias.module.scss

@@ -4,6 +4,10 @@
     gap: 10px;
     margin-bottom: 12px;
 
+    @media screen and (max-width: 1024px) {
+      margin-bottom: 0;
+    }
+
     figure {
       display: contents;