diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss
index 7269dc5..f63bf4c 100644
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@@ -146,7 +146,7 @@
         gap: tovw(65px, 'default', 35px);
       }
 
-      @media screen and (max-width: 1024px) {
+      @include respond-to('tablet') {
         justify-content: space-between;
       }
 
@@ -158,7 +158,7 @@
         row-gap: tovw(44px, 'tablet', 44px);
       }
     }
-    @media screen and (max-width: 1024px) {
+    @include respond-to('tablet') {
       flex-direction: column;
     }
   }
@@ -185,14 +185,14 @@
 
 .logo {
   margin-right: tovw(88px, 'default', 64px);
-  @media screen and (max-width: 1024px) {
+  @include respond-to('tablet') {
     margin-right: 0;
     margin-bottom: tovw(56px, 'tablet', 56px);
   }
 
   svg {
     width: tovw(305px, 'default', 120px);
-    @media screen and (max-width: 1024px) {
+    @include respond-to('tablet') {
       width: 100%;
     }
   }
diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss
index 7e497a4..019deee 100644
--- a/src/components/sections/products/hero/hero.module.scss
+++ b/src/components/sections/products/hero/hero.module.scss
@@ -58,7 +58,7 @@
       grid-template-columns: repeat(3, 1fr);
       gap: tovw(40px, 'default', 20px) tovw(35px, 'default', 15px);
 
-      @media screen and (max-width: 900px) {
+      @include respond-to('mobile') {
         padding-bottom: tovw(25px, 'mobile', 56px);
         border-bottom: tovw(1px, 'mobile') solid var(--color-white);
         grid-template-columns: repeat(2, 1fr);