Footer responsiveness chek

resources/css/mixins.scss

@@ -12,8 +12,14 @@
   }
 }
 
-@mixin tablet {
-  @media screen and (max-width: $tablet) {
+@mixin footer_overflow {
+  @media screen and (max-width: variables.$footer_overflow) {
+    @content;
+  }
+}
+
+@mixin footer_overflow2 {
+  @media screen and (max-width: variables.$footer_overflow2) {
     @content;
   }
 }

resources/css/partials/footer.scss

@@ -1,5 +1,5 @@
 @use "../variables.scss";
-
+@use "../mixins.scss";
 
 #footer {
   background: variables.$clr_footer;
@@ -17,10 +17,18 @@
     margin: 0 20px 0 0;
 
     h2 {
-      font: 22px "Montserrat", sans-serif;
+      font: variables.$sz_l_footer_h "Montserrat", sans-serif;
       font-weight: 600;
       color: white;
       margin-bottom: 0;
+
+      @include mixins.footer_overflow {
+        font-size: variables.$sz_m_footer_h;
+      }
+
+      @include mixins.footer_overflow2 {
+        font-size: variables.$sz_s_footer_h;
+      }
     }
 
     hr {
@@ -38,6 +46,14 @@
       &:hover {
         color: variables.$clr_footer_active;
       }
+
+      @include mixins.footer_overflow {
+        font-size: variables.$sz_m_footer_p;
+      }
+
+      @include mixins.footer_overflow2 {
+        font-size: variables.$sz_s_footer_p;
+      }
     }
 
     .footer-social {
@@ -63,6 +79,14 @@
       font-weight: 500;
       color: inherit;
       margin: 0;
+
+      @include mixins.footer_overflow {
+        font-size: variables.$sz_m_footer_p;
+      }
+
+      @include mixins.footer_overflow2 {
+        font-size: variables.$sz_s_footer_p;
+      }
     }
 
     &:last-of-type {

resources/css/variables.scss

@@ -1,11 +1,19 @@
 $mobileS: 360px;
 $navbar_overflow: 550px;
-$tablet: 768px;
+$footer_overflow: 1110px;
+$footer_overflow2: 880px;
 $main: 1700px;
 $fourK: 2560px;
 
 $innerContainerMargin: 20px;
 
+$sz_l_footer_h: 22px;
+$sz_m_footer_h: 18px;
+$sz_s_footer_h: 14px;
+$sz_l_footer_p: 16px;
+$sz_m_footer_p: 12px;
+$sz_s_footer_p: 8px;
+
 $clr_header: #01003B;
 $clr_logo: #D6FFFF;
 $clr_nav_sleep: #A3C2C2;