diff --git a/src/components/common/card/card.module.scss b/src/components/common/card/card.module.scss
index 71690e2..caafd77 100644
--- a/src/components/common/card/card.module.scss
+++ b/src/components/common/card/card.module.scss
@@ -84,7 +84,7 @@
     line-height: 1.4;
     margin: 0;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       line-height: 1.6;
     }
   }
diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss
index 7dfc4de..7269dc5 100644
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@@ -16,7 +16,7 @@
     align-items: center;
     justify-content: center;
     height: calc(var(--vw) * 70);
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       height: calc(var(--vw) * 95);
       background-image: url('/images/pre-footer-mobile.png');
       background-position: 50%;
@@ -40,7 +40,7 @@
         rgb(9 9 121 / 0) 50%,
         var(--color-black) 100%
       );
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         content: normal;
       }
     }
@@ -72,7 +72,7 @@
     position: relative;
     width: max-content;
     margin: tovw(62px, 'default', 48px) auto 0;
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       width: 100%;
     }
   }
@@ -123,7 +123,7 @@
   height: tovw(276px, 'default', 270px);
   margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: none;
   }
 }
@@ -150,7 +150,7 @@
         justify-content: space-between;
       }
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: grid;
         column-gap: tovw(97px, 'tablet', 97px);
         grid-template-columns: repeat(2, 1fr);
@@ -211,7 +211,7 @@
       height: tovw(24px, 'default', 24px);
     }
   }
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: none;
   }
 }
@@ -219,7 +219,7 @@
 .connect__links__mobile {
   display: none;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     > li:last-of-type {
       display: flex;
       justify-content: center;
@@ -237,7 +237,7 @@
   ul:first-child {
     display: none;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       display: unset;
     }
   }
@@ -248,7 +248,7 @@
   margin-top: tovw(18px, 'default', 18px);
   margin-bottom: tovw(44px, 'default', 36px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     margin-top: tovw(32px, 'tablet', 32px);
   }
 
@@ -268,7 +268,7 @@
       }
     }
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       align-items: center;
       flex-direction: column;
       justify-content: center;
@@ -282,7 +282,7 @@
       display: flex;
       gap: tovw(37px, 'default', 24px);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         gap: tovw(32px, 'mobile');
         margin-bottom: tovw(32px, 'tablet', 32px);
       }
diff --git a/src/components/common/mouse/mouse.module.scss b/src/components/common/mouse/mouse.module.scss
index b781dba..f03f8f9 100644
--- a/src/components/common/mouse/mouse.module.scss
+++ b/src/components/common/mouse/mouse.module.scss
@@ -14,7 +14,7 @@
   grid-template-rows: 1fr;
   mix-blend-mode: difference;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: none;
   }
 
@@ -48,7 +48,7 @@
       align-items: flex-end;
       justify-self: flex-start;
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: none;
       }
     }
diff --git a/src/components/layout/container/container.module.scss b/src/components/layout/container/container.module.scss
index 82efddb..7c5de96 100644
--- a/src/components/layout/container/container.module.scss
+++ b/src/components/layout/container/container.module.scss
@@ -5,7 +5,7 @@
   max-width: tovw(1296px, 'default', 320px);
   margin: 0 auto;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     max-width: 100%;
     padding: 0 tovw(27px, 'tablet', 27px);
   }
diff --git a/src/components/primitives/heading/heading.module.scss b/src/components/primitives/heading/heading.module.scss
index cff539e..ea00807 100644
--- a/src/components/primitives/heading/heading.module.scss
+++ b/src/components/primitives/heading/heading.module.scss
@@ -25,7 +25,7 @@
     font-size: tovw(58px, 'default', 30px);
     line-height: 1.1;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       line-height: 1.24;
     }
   }
diff --git a/src/components/primitives/link/link.module.scss b/src/components/primitives/link/link.module.scss
index 17de7df..20c57bb 100644
--- a/src/components/primitives/link/link.module.scss
+++ b/src/components/primitives/link/link.module.scss
@@ -24,7 +24,7 @@
       transition: transform var(--normal-transition);
       vertical-align: middle;
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         right: tovw(-20px, 'mobile', -14px);
         bottom: tovw(1px, 'mobile', 3px);
       }
diff --git a/src/components/sections/404/hero/hero.module.scss b/src/components/sections/404/hero/hero.module.scss
index b68e5e9..6873e10 100644
--- a/src/components/sections/404/hero/hero.module.scss
+++ b/src/components/sections/404/hero/hero.module.scss
@@ -17,7 +17,7 @@
     z-index: 2;
   }
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     background-image: url('/images/hero-mobile.png');
     background-repeat: no-repeat;
     background-position: 50% 15%;
@@ -48,7 +48,7 @@
     @supports (aspect-ratio: 16 / 9) {
       aspect-ratio: 16 / 9;
     }
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       content: initial;
     }
   }
@@ -65,7 +65,7 @@
   }
 
   h1 {
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       font-size: tovw(50px, 'mobile', 71px);
       margin-top: auto;
     }
@@ -81,7 +81,7 @@
     margin-top: tovw(32px, 'default', 32px);
     text-decoration: none;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       width: 100%;
       margin-top: auto;
       margin-bottom: tovw(25px, 'mobile');
@@ -99,7 +99,7 @@
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 1fr;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: none;
   }
 
@@ -126,7 +126,7 @@
       align-items: flex-end;
       justify-self: flex-start;
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: none;
       }
     }
@@ -155,7 +155,7 @@
     rgb(0 0 244 / 0.9) 63.96%
   );
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     height: 70%;
   }
 }
diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss
index fabac8d..8c43244 100644
--- a/src/components/sections/about/hero/hero.module.scss
+++ b/src/components/sections/about/hero/hero.module.scss
@@ -8,7 +8,7 @@
   min-height: calc(var(--vh) * 100);
   padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     width: 100vw;
     padding: 0 0 tovw(18px, 'mobile') 0;
   }
@@ -17,7 +17,7 @@
     margin: 0 tovw(-35px, 'default', -35px);
     mix-blend-mode: screen;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       display: flex;
       width: 300%;
       place-self: center;
@@ -26,7 +26,7 @@
 }
 
 .container {
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     padding: 0 tovw(16px, 'tablet', 16px);
   }
 }
@@ -38,7 +38,7 @@
   gap: tovw(89px, 'default', 56px);
 
   .header {
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       display: flex;
     }
 
@@ -46,7 +46,7 @@
       margin: 0;
       text-shadow: 0 0 tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         font-size: tovw(50px, 'mobile');
       }
     }
@@ -54,7 +54,7 @@
     .arrow {
       display: none;
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         position: relative;
         display: unset;
         align-self: flex-end;
@@ -68,7 +68,7 @@
     height: tovw(175px, 'default', 130px);
     margin-top: tovw(5px, 'default', 5px);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       top: unset;
       left: 0;
       height: tovw(140px, 'default', 130px);
@@ -82,7 +82,7 @@
     justify-content: space-between;
     gap: tovw(60px, 'default', 20px);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       flex-direction: column;
       width: 100%;
       gap: tovw(120px, 'default', 30px);
@@ -100,7 +100,7 @@
         width: tovw(636px, 'default', 200px);
         letter-spacing: -0.01em;
 
-        @media screen and (max-width: 800px) {
+        @include respond-to('mobile') {
           width: 100%;
         }
       }
@@ -132,7 +132,7 @@
     rgb(0 0 244 / 0) 99.89%
   );
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     height: 70%;
   }
 }
diff --git a/src/components/sections/about/related/related.module.scss b/src/components/sections/about/related/related.module.scss
index 51b411f..8419617 100644
--- a/src/components/sections/about/related/related.module.scss
+++ b/src/components/sections/about/related/related.module.scss
@@ -12,7 +12,7 @@
     margin-right: 0;
     margin-left: auto;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       width: calc(100% - tovw(16px, 'mobile'));
     }
 
@@ -27,7 +27,7 @@
     justify-content: space-between;
     margin-bottom: tovw(90px, 'default', 64px);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       align-items: flex-start;
       flex-direction: column;
       padding-bottom: unset;
@@ -65,7 +65,7 @@
         rgb(241 241 241 / 0) 89.23%
       );
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: none;
       }
     }
@@ -74,7 +74,7 @@
   .events {
     padding-left: tovw(100px);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       padding-left: 0;
     }
 
@@ -103,7 +103,7 @@
         display: none;
       }
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         width: tovw(20px, 'default', 20px);
         background: linear-gradient(
           90deg,
@@ -119,7 +119,7 @@
       right: initial;
       left: tovw(-150px);
       transform: scaleX(-1);
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         content: initial;
       }
     }
diff --git a/src/components/sections/about/team/team.module.scss b/src/components/sections/about/team/team.module.scss
index 3aca871..01d2137 100644
--- a/src/components/sections/about/team/team.module.scss
+++ b/src/components/sections/about/team/team.module.scss
@@ -5,12 +5,12 @@
   margin-top: tovw(24px, 'default', 16px);
   padding: tovw(124px, 'default', 100px) 0;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     margin-top: 0;
   }
 
   .container {
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       padding: 0 tovw(16px, 'tablet', 16px);
     }
 
@@ -22,7 +22,7 @@
       padding-top: tovw(68px, 'default', 40px);
       gap: tovw(24px, 'default', 24px);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         flex-direction: column;
         width: 100%;
       }
@@ -34,7 +34,7 @@
         margin: 0;
         letter-spacing: -0.01em;
 
-        @media screen and (max-width: 800px) {
+        @include respond-to('mobile') {
           width: 100%;
         }
       }
@@ -50,7 +50,7 @@
   padding-top: tovw(120px, 'default', 60px);
   gap: tovw(64px, 'default', 26px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     width: 100%;
   }
 
@@ -65,7 +65,7 @@
       display: flex;
       gap: tovw(20px, 'default', 3px);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         justify-content: flex-start;
       }
     }
@@ -76,7 +76,7 @@
       padding-top: tovw(18px, 'default', 8px);
       color: var(--color-grey-light);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: none;
       }
     }
@@ -87,7 +87,7 @@
       transform: rotate(-90deg) translateY(tovw(-5px, 'default', -5px))
         scaleX(2.2) scaleY(1.6);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         height: tovw(32px, 'default', 32px);
         transform: rotate(-90deg) scaleX(2.2) scaleY(1.4)
           translateY(tovw(-2px, 'mobile', -3px));
@@ -103,7 +103,7 @@
     gap: tovw(100px, 'default', 40px);
   }
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     width: 100vw;
     margin: 0 tovw(-70px, 'tablet', -35px);
     scroll-behavior: smooth;
@@ -150,7 +150,7 @@
     svg {
       width: tovw(23px, 'default', 18px);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         width: tovw(12px, 'mobile', 19px);
       }
 
@@ -174,7 +174,7 @@
   width: tovw(23px, 'default', 15px);
   height: tovw(23px, 'default', 15px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: none;
   }
 }
diff --git a/src/components/sections/community/events/events.module.scss b/src/components/sections/community/events/events.module.scss
index 726ec9b..d7162d4 100644
--- a/src/components/sections/community/events/events.module.scss
+++ b/src/components/sections/community/events/events.module.scss
@@ -13,7 +13,7 @@
   margin-right: 0;
   margin-left: auto;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     width: calc(100% - tovw(16px, 'mobile'));
   }
 }
@@ -26,7 +26,7 @@
   padding-bottom: tovw(60px, 'default', 30px);
   border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     align-items: flex-start;
     flex-direction: column;
     padding-bottom: unset;
@@ -64,7 +64,7 @@
       rgb(241 241 241 / 0) 89.23%
     );
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       display: none;
     }
   }
@@ -72,7 +72,7 @@
 
 .events__container {
   padding-left: tovw(100px);
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     padding-left: 0;
   }
 
@@ -90,7 +90,7 @@
       rgb(3 3 3 / 1) 65%
     );
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       width: tovw(20px, 'default', 20px);
       background: linear-gradient(
         90deg,
@@ -106,7 +106,7 @@
     right: initial;
     left: tovw(-150px);
     transform: scaleX(-1);
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       content: initial;
     }
   }
@@ -119,7 +119,7 @@
   place-content: center;
   gap: tovw(25px, 'default', 15px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: none;
   }
 
diff --git a/src/components/sections/community/hero/hero.module.scss b/src/components/sections/community/hero/hero.module.scss
index 1468af7..db75af5 100644
--- a/src/components/sections/community/hero/hero.module.scss
+++ b/src/components/sections/community/hero/hero.module.scss
@@ -10,7 +10,7 @@
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: flex;
     flex-direction: column;
     width: 100vw;
@@ -26,7 +26,7 @@
   right: tovw(620px, 'default', 80px);
   padding-top: tovw(220px, 'default', 90px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     position: unset;
     margin-bottom: tovw(-85px, 'mobile');
     padding-top: tovw(55px, 'mobile');
@@ -35,7 +35,7 @@
   video {
     width: tovw(1750px, 'default', 800px);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       width: tovw(600px, 'mobile');
     }
   }
@@ -55,7 +55,7 @@
       rgb(3 3 3 / 1) 95%
     );
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       top: tovw(-260px, 'mobile', -260px);
       bottom: unset;
       height: 100%;
@@ -75,7 +75,7 @@
   width: tovw(580px, 'default', 80px);
   justify-self: end;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: flex;
     align-items: flex-end;
     align-self: flex-start;
@@ -87,7 +87,7 @@
     margin: 0;
     text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       font-size: tovw(50px, 'mobile');
     }
   }
@@ -100,7 +100,7 @@
   gap: tovw(60px, 'default', 20px);
   grid-area: 2 / 2 / 3 / 3;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     width: 100%;
     gap: tovw(120px, 'default', 30px);
   }
@@ -110,7 +110,7 @@
     width: tovw(500px, 'default', 370px);
     margin: 0;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       width: tovw(150px, 'mobile', 320px);
     }
   }
@@ -124,7 +124,7 @@
   display: flex;
   gap: tovw(24px, 'default', 20px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     flex-direction: column;
     width: 100%;
     gap: tovw(20px, 'mobile');
@@ -145,7 +145,7 @@
   );
   mix-blend-mode: screen;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     height: 70%;
   }
 }
@@ -156,7 +156,7 @@
   height: tovw(22px, 'default', 15px);
   margin-left: tovw(-58px, 'default', -58px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: none;
   }
 
diff --git a/src/components/sections/community/socials/socials.module.scss b/src/components/sections/community/socials/socials.module.scss
index ed6b212..40dafdf 100644
--- a/src/components/sections/community/socials/socials.module.scss
+++ b/src/components/sections/community/socials/socials.module.scss
@@ -4,7 +4,7 @@
   position: relative;
   padding: tovw(124px, 'default', 100px) 0;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     margin-top: 0;
   }
 }
@@ -15,7 +15,7 @@
   grid-template-rows: repeat(2, 1fr);
   gap: tovw(70px, 'default', 20px) 0;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: flex;
     flex-direction: column;
     gap: tovw(5px, 'mobile', 15px);
@@ -27,7 +27,7 @@
   flex-direction: column;
   width: 100%;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     margin-top: tovw(-135px, 'mobile', -150px);
   }
 
@@ -35,7 +35,7 @@
     margin: 0;
     text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       font-size: tovw(42px, 'default', 36px);
       text-align: center;
     }
@@ -43,7 +43,7 @@
     &:nth-child(1) {
       padding-left: tovw(125px, 'default', 60px);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         padding-left: unset;
       }
     }
@@ -52,7 +52,7 @@
       align-self: end;
       width: tovw(465px, 'default', 80px);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         width: 100%;
       }
     }
@@ -67,7 +67,7 @@
   height: tovw(72px, 'default', 40px);
   transform: rotate(270deg) scale(1.6);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     top: unset;
     right: 0;
     left: 0;
@@ -80,7 +80,7 @@
 .icons__container {
   grid-area: 2 / 2 / 3 / 3;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: flex;
     flex-direction: column;
   }
@@ -99,12 +99,12 @@
       transform: translate(-220%, -50%);
       border-bottom: tovw(2px, 'default', 2px) solid blue;
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: none;
       }
     }
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       text-align: center;
     }
   }
@@ -117,7 +117,7 @@
   padding-top: tovw(30px, 'default', 15px);
   gap: tovw(20px, 'default', 12px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     place-self: center;
     place-content: center;
   }
@@ -149,7 +149,7 @@
   width: tovw(725px, 'default', 320px);
   padding-top: tovw(160px, 'default', 80px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     position: relative;
     width: 100%;
     padding-top: unset;
diff --git a/src/components/sections/homepage/benefits/benefits.module.scss b/src/components/sections/homepage/benefits/benefits.module.scss
index 389cb87..aef95b7 100644
--- a/src/components/sections/homepage/benefits/benefits.module.scss
+++ b/src/components/sections/homepage/benefits/benefits.module.scss
@@ -30,7 +30,7 @@
     }
   }
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     padding-bottom: tovw(135px, 'mobile');
 
     .grid {
@@ -55,7 +55,7 @@
     grid-gap: tovw(26px, 'default', 26px) tovw(24px, 'default', 24px);
     grid-template-columns: repeat(3, auto);
     grid-template-rows: repeat(2, 1fr);
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       display: flex;
       flex-wrap: wrap;
 
@@ -75,7 +75,7 @@
   background-size: cover;
   height: tovw(1582px, 'default', 900px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     margin-top: tovw(-60px, 'mobile');
     background-image: none;
     height: auto;
@@ -94,7 +94,7 @@
     margin-top: tovw(88px, 'default', 72px);
   }
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     padding: 0 tovw(13px, 'mobile');
   }
 }
@@ -104,7 +104,7 @@
     position: relative;
     padding-left: tovw(8px, 'default');
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       padding-left: tovw(32px, 'mobile');
     }
 
@@ -115,7 +115,7 @@
       width: tovw(3px, 'default', 2px);
       height: 100%;
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         left: tovw(16px, 'mobile');
       }
     }
@@ -128,7 +128,7 @@
       font-family: var(--font-dm-mono);
       font-size: tovw(12px, 'default', 12px);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         top: tovw(4px, 'mobile');
         left: tovw(-5px, 'mobile');
       }
@@ -147,7 +147,7 @@
   padding-right: 0;
 
   &__container {
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       padding-right: 0;
       padding-left: 0;
     }
diff --git a/src/components/sections/homepage/hero/hero.module.scss b/src/components/sections/homepage/hero/hero.module.scss
index 68834aa..8012aeb 100644
--- a/src/components/sections/homepage/hero/hero.module.scss
+++ b/src/components/sections/homepage/hero/hero.module.scss
@@ -9,7 +9,7 @@
   min-height: calc(var(--vh) * 100);
   text-align: center;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     background-image: url('/images/hero-mobile.png');
     background-repeat: no-repeat;
     background-position: 50% 15%;
@@ -40,7 +40,7 @@
     @supports (aspect-ratio: 16 / 9) {
       aspect-ratio: 16 / 9;
     }
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       content: initial;
     }
   }
@@ -87,12 +87,12 @@
     grid-template-columns: repeat(1, 1fr);
     grid-template-rows: 1fr;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       bottom: 5%;
       grid-template-columns: 1fr;
     }
 
-    @media screen and (max-width: 480px) {
+    @include respond-to('mobile-sm') {
       bottom: 0;
     }
 
diff --git a/src/components/sections/homepage/latest-news/latest-news.module.scss b/src/components/sections/homepage/latest-news/latest-news.module.scss
index 329013e..9a64c87 100644
--- a/src/components/sections/homepage/latest-news/latest-news.module.scss
+++ b/src/components/sections/homepage/latest-news/latest-news.module.scss
@@ -12,7 +12,7 @@
     margin-right: 0;
     margin-left: auto;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       width: calc(100% - tovw(16px, 'mobile'));
     }
   }
@@ -23,7 +23,7 @@
     justify-content: space-between;
     margin-bottom: tovw(90px, 'default', 64px);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       align-items: flex-start;
       flex-direction: column;
       padding-bottom: unset;
@@ -61,7 +61,7 @@
         rgb(241 241 241 / 0) 89.23%
       );
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: none;
       }
     }
@@ -69,7 +69,7 @@
 
   .eventsContainer {
     padding-left: tovw(100px);
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       padding-left: 0;
     }
 
@@ -87,7 +87,7 @@
         rgb(3 3 3 / 1) 65%
       );
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         width: tovw(20px, 'default', 20px);
         background: linear-gradient(
           90deg,
@@ -103,7 +103,7 @@
       right: initial;
       left: tovw(-150px);
       transform: scaleX(-1);
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         content: initial;
       }
     }
@@ -116,7 +116,7 @@
     place-content: center;
     gap: tovw(25px, 'default', 15px);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       display: none;
     }
 
diff --git a/src/components/sections/homepage/seen-in/seen-in.module.scss b/src/components/sections/homepage/seen-in/seen-in.module.scss
index bdacd01..92ef13f 100644
--- a/src/components/sections/homepage/seen-in/seen-in.module.scss
+++ b/src/components/sections/homepage/seen-in/seen-in.module.scss
@@ -16,7 +16,7 @@
     rgb(0 0 244 / 0) 99.89%
   );
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     height: calc(var(--vh) * 95);
     margin-top: 0;
     background: linear-gradient(
@@ -38,7 +38,7 @@
     transform: translate(-50%, -50%);
     pointer-events: none;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       top: 45%;
     }
   }
@@ -50,7 +50,7 @@
     grid-template-rows: 1fr;
     grid-column-gap: tovw(24px, 'default', 24px);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       display: flex;
       flex-wrap: wrap;
     }
diff --git a/src/components/sections/homepage/trusted-by/trusted-by.module.scss b/src/components/sections/homepage/trusted-by/trusted-by.module.scss
index cffa6cf..5065118 100644
--- a/src/components/sections/homepage/trusted-by/trusted-by.module.scss
+++ b/src/components/sections/homepage/trusted-by/trusted-by.module.scss
@@ -6,7 +6,7 @@
   margin-top: tovw(24px, 'default', 16px);
   padding: tovw(104px, 'default', 72px) 0;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     height: calc(var(--vh) * 48);
     margin-top: 0;
   }
@@ -29,7 +29,7 @@
       hsl(0deg 0% 95% / 0.5) 48.91%,
       hsl(0deg 0% 95% / 0) 89.23%
     );
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       height: 50%;
       transform: translate(-50%, -60%);
     }
diff --git a/src/components/sections/homepage/what-others-say/item/item.module.scss b/src/components/sections/homepage/what-others-say/item/item.module.scss
index c017c2a..d643b48 100644
--- a/src/components/sections/homepage/what-others-say/item/item.module.scss
+++ b/src/components/sections/homepage/what-others-say/item/item.module.scss
@@ -15,7 +15,7 @@
   border-radius: tovw(8px, 'default', 8px);
   background-color: rgb(0 0 0 / 0.9);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     position: relative;
     top: initial;
     left: initial;
@@ -68,7 +68,7 @@
   p {
     font-size: tovw(16px, 'default', 16px);
     margin: 0;
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       line-height: 1.6;
     }
   }
diff --git a/src/components/sections/homepage/what-others-say/what-others-say.module.scss b/src/components/sections/homepage/what-others-say/what-others-say.module.scss
index 48b9b83..72edee9 100644
--- a/src/components/sections/homepage/what-others-say/what-others-say.module.scss
+++ b/src/components/sections/homepage/what-others-say/what-others-say.module.scss
@@ -15,7 +15,7 @@
   margin: 0 auto;
   text-transform: capitalize;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     flex-direction: column;
     margin-bottom: tovw(24px, 'mobile');
     gap: tovw(24px, 'mobile');
@@ -27,7 +27,7 @@
     letter-spacing: tovw(-0.8px, 'default', -0.8px);
     text-transform: uppercase;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       &:first-of-type {
         display: none;
       }
@@ -63,7 +63,7 @@
   transform-style: preserve-3d;
   perspective: tovw(3000px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: none;
   }
 }
diff --git a/src/components/sections/privacy/hero/hero.module.scss b/src/components/sections/privacy/hero/hero.module.scss
index 184223f..6e9759f 100644
--- a/src/components/sections/privacy/hero/hero.module.scss
+++ b/src/components/sections/privacy/hero/hero.module.scss
@@ -9,7 +9,7 @@
   padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
   padding-bottom: 0;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     align-items: center;
     flex-direction: row;
     justify-content: space-between;
@@ -23,7 +23,7 @@
     margin: 0;
     text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       font-size: tovw(50px, 'mobile');
     }
   }
@@ -32,7 +32,7 @@
 .arrow {
   display: none;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     position: relative;
     display: unset;
     width: tovw(18px, 'mobile', 18px);
@@ -54,7 +54,7 @@
   );
   mix-blend-mode: screen;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     height: 70%;
   }
 }
diff --git a/src/components/sections/products/app/app.module.scss b/src/components/sections/products/app/app.module.scss
index 3029888..6c9d99d 100644
--- a/src/components/sections/products/app/app.module.scss
+++ b/src/components/sections/products/app/app.module.scss
@@ -8,7 +8,7 @@
   height: calc(var(--vw) * 60);
   margin: tovw(100px, 'default', 50px) 0;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     height: calc(var(--vw) * 95);
     background-image: url('/images/pre-footer-mobile.png');
     background-position: 50%;
@@ -22,12 +22,12 @@
     align-items: center;
     flex-direction: column;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       padding: 0 tovw(16px, 'tablet', 16px);
     }
 
     h2 {
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         font-size: tovw(32px, 'mobile');
       }
     }
@@ -38,7 +38,7 @@
       width: tovw(856px, 'default', 300px);
       text-align: center;
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         line-height: 1.5;
         margin-top: tovw(16px, 'mobile');
       }
@@ -61,7 +61,7 @@
       rgb(9 9 121 / 0) 45%,
       var(--color-black) 100%
     );
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       content: normal;
     }
   }
diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss
index ced3eb3..7e497a4 100644
--- a/src/components/sections/products/hero/hero.module.scss
+++ b/src/components/sections/products/hero/hero.module.scss
@@ -8,14 +8,14 @@
   min-height: calc(var(--vh) * 100);
   padding: tovw(100px, 'default', 50px) 0;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     width: 100vw;
     margin-bottom: tovw(88px, 'mobile');
     padding: 0;
   }
 
   .container {
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       padding: 0 tovw(16px, 'tablet', 16px);
     }
   }
@@ -24,7 +24,7 @@
     margin: 0 tovw(180px, 'default', 90px);
     mix-blend-mode: screen;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       display: flex;
       width: 300%;
       place-self: center;
@@ -41,7 +41,7 @@
       margin: 0;
       text-shadow: 0 0 tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         font-size: tovw(50px, 'mobile');
       }
     }
@@ -87,7 +87,7 @@
       grid-template-columns: 1fr 1.15fr;
       gap: tovw(113px, 'default', 40px);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: flex;
         flex-direction: column;
       }
@@ -97,7 +97,7 @@
         line-height: 1.65;
         width: tovw(546px, 'default', 150px);
 
-        @media screen and (max-width: 800px) {
+        @include respond-to('mobile') {
           line-height: 1.5;
           width: 100%;
           max-width: 550px;
@@ -115,7 +115,7 @@
           border-top: tovw(1px, 'default') solid var(--color-grey-light);
           gap: tovw(140px, 'default', 20px);
 
-          @media screen and (max-width: 800px) {
+          @include respond-to('mobile') {
             justify-content: space-between;
             border-top: unset;
             gap: tovw(20px, 'mobile', 30px);
@@ -124,7 +124,7 @@
           h2 {
             width: tovw(100px, 'default', 20px);
 
-            @media screen and (max-width: 800px) {
+            @include respond-to('mobile') {
               width: tovw(20px, 'mobile');
             }
           }
@@ -136,7 +136,7 @@
             margin: 0;
             color: var(--color-grey-light);
 
-            @media screen and (max-width: 800px) {
+            @include respond-to('mobile') {
               width: tovw(180px, 'mobile', 250px);
             }
           }
@@ -151,7 +151,7 @@
       .arrow {
         display: none;
 
-        @media screen and (max-width: 800px) {
+        @include respond-to('mobile') {
           position: relative;
           display: unset;
           align-self: flex-end;
@@ -175,7 +175,7 @@
       rgb(0 0 244 / 0) 99.89%
     );
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       height: 45%;
     }
   }
diff --git a/src/components/sections/products/network/network.module.scss b/src/components/sections/products/network/network.module.scss
index a6a7c89..92e6660 100644
--- a/src/components/sections/products/network/network.module.scss
+++ b/src/components/sections/products/network/network.module.scss
@@ -4,7 +4,7 @@
   position: relative;
   padding: tovw(124px, 'default', 100px) 0;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     padding: 0;
     padding-bottom: tovw(18px, 'mobile');
   }
@@ -13,7 +13,7 @@
     position: relative;
     display: flex;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       padding: 0 tovw(16px, 'tablet', 16px);
     }
 
@@ -21,7 +21,7 @@
       width: 100%;
 
       h2 {
-        @media screen and (max-width: 800px) {
+        @include respond-to('mobile') {
           width: tovw(200px, 'mobile');
         }
       }
@@ -33,7 +33,7 @@
         margin: 0;
         margin-top: tovw(62px, 'default', 30px);
 
-        @media screen and (max-width: 800px) {
+        @include respond-to('mobile') {
           line-height: 1.5;
           width: 100%;
           max-width: 550px;
@@ -48,7 +48,7 @@
         grid-template-columns: repeat(2, tovw(360px, 'default', 225px));
         gap: tovw(64px, 'default', 40px) 0;
 
-        @media screen and (max-width: 800px) {
+        @include respond-to('mobile') {
           display: flex;
           flex-direction: column;
         }
@@ -58,7 +58,7 @@
           grid-template-columns: auto 1fr;
           gap: tovw(23px, 'default', 16px);
 
-          @media screen and (max-width: 800px) {
+          @include respond-to('mobile') {
             margin: 0 tovw(10px, 'mobile');
           }
 
@@ -75,7 +75,7 @@
             margin-top: tovw(20px, 'default', 16px);
             color: var(--color-grey-light);
 
-            @media screen and (max-width: 800px) {
+            @include respond-to('mobile') {
               width: 100%;
             }
           }
@@ -84,7 +84,7 @@
             p {
               width: tovw(300px, 'default', 85px);
 
-              @media screen and (max-width: 800px) {
+              @include respond-to('mobile') {
                 width: 100%;
               }
             }
@@ -101,7 +101,7 @@
       width: tovw(1050px, 'default', 550px);
       mix-blend-mode: screen;
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: none;
       }
     }
@@ -109,7 +109,7 @@
     .network__img__mobile {
       display: none;
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: unset;
         width: 100%;
         margin: tovw(60px, 'mobile') 0 tovw(20px, 'mobile') 0;
diff --git a/src/components/sections/products/partners/partners.module.scss b/src/components/sections/products/partners/partners.module.scss
index 5af4a82..6388625 100644
--- a/src/components/sections/products/partners/partners.module.scss
+++ b/src/components/sections/products/partners/partners.module.scss
@@ -5,12 +5,12 @@
   margin: tovw(135px, 'default', 70px) 0;
   padding: tovw(104px, 'default', 95px) 0;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     margin-top: 0;
   }
 
   .container {
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       padding: 0 tovw(16px, 'tablet', 16px);
     }
 
@@ -52,7 +52,7 @@
         rgb(241 241 241 / 0) 89.23%
       );
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         bottom: tovw(1px, 'mobile', 90px);
         height: tovw(230px, 'mobile', 440px);
       }
@@ -73,7 +73,7 @@
   &__container {
     margin-top: tovw(60px, 'default', 43px);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       width: unset !important;
       margin: tovw(60px, 'default', 43px) tovw(-18px, 'mobile') 0
         tovw(-18px, 'mobile');
diff --git a/src/components/sections/products/stack/stack.module.scss b/src/components/sections/products/stack/stack.module.scss
index e4009fc..f372c41 100644
--- a/src/components/sections/products/stack/stack.module.scss
+++ b/src/components/sections/products/stack/stack.module.scss
@@ -4,13 +4,13 @@
   position: relative;
   padding: tovw(124px, 'default', 100px) 0;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     padding: 0;
     padding-bottom: tovw(88px, 'mobile');
   }
 
   .container {
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       padding: 0 tovw(16px, 'tablet', 16px);
     }
   }
@@ -18,14 +18,14 @@
   .header {
     display: flex;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       flex-direction: column;
     }
 
     h2 {
       width: tovw(360px, 'default', 250px);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         width: unset;
       }
     }
@@ -35,7 +35,7 @@
       line-height: 1.35;
       width: tovw(746px, 'default', 300px);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         line-height: 1.5;
         width: 100%;
         max-width: 550px;
@@ -60,7 +60,7 @@
       grid-template-columns: repeat(3, 1fr);
       gap: tovw(68px, 'default', 40px) tovw(35px, 'default', 15px);
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: flex;
         flex-direction: column;
         margin: 0;
@@ -72,7 +72,7 @@
         counter-increment: custom;
         gap: tovw(34px, 'default', 28px);
 
-        @media screen and (max-width: 800px) {
+        @include respond-to('mobile') {
           width: 100%;
         }
 
@@ -106,7 +106,7 @@
           margin-bottom: tovw(42px, 'default', 42px);
           margin-left: tovw(25px, 'default', 20px);
 
-          @media screen and (max-width: 800px) {
+          @include respond-to('mobile') {
             margin-bottom: tovw(8px, 'mobile');
           }
         }
@@ -152,7 +152,7 @@
         rgb(241 241 241 / 0) 89.23%
       );
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: none;
       }
     }
diff --git a/src/components/sections/products/token/token.module.scss b/src/components/sections/products/token/token.module.scss
index 8b48ba7..16b5c5a 100644
--- a/src/components/sections/products/token/token.module.scss
+++ b/src/components/sections/products/token/token.module.scss
@@ -4,7 +4,7 @@
   position: relative;
   padding: tovw(124px, 'default', 100px) 0;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     padding: 0;
     padding-bottom: tovw(18px, 'mobile');
   }
@@ -13,12 +13,12 @@
     position: relative;
     display: flex;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       padding: 0 tovw(16px, 'tablet', 16px);
     }
 
     h2 {
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         width: tovw(320px, 'mobile');
       }
     }
@@ -33,7 +33,7 @@
         margin: 0;
         margin-top: tovw(62px, 'default', 30px);
 
-        @media screen and (max-width: 800px) {
+        @include respond-to('mobile') {
           line-height: 1.5;
           width: 100%;
           max-width: 550px;
@@ -48,7 +48,7 @@
         grid-template-columns: repeat(2, tovw(360px, 'default', 190px));
         gap: tovw(64px, 'default', 40px) 0;
 
-        @media screen and (max-width: 800px) {
+        @include respond-to('mobile') {
           display: flex;
           flex-direction: column;
         }
@@ -58,7 +58,7 @@
           grid-template-columns: auto 1fr;
           gap: tovw(23px, 'default', 15px);
 
-          @media screen and (max-width: 800px) {
+          @include respond-to('mobile') {
             margin: 0 tovw(10px, 'mobile');
           }
 
@@ -75,7 +75,7 @@
             margin-top: tovw(20px, 'default', 16px);
             color: var(--color-grey-light);
 
-            @media screen and (max-width: 800px) {
+            @include respond-to('mobile') {
               width: 100%;
             }
           }
@@ -84,7 +84,7 @@
             p {
               width: tovw(265px, 'default', 150px);
 
-              @media screen and (max-width: 800px) {
+              @include respond-to('mobile') {
                 width: 100%;
               }
             }
@@ -101,7 +101,7 @@
       width: tovw(950px, 'default', 550px);
       mix-blend-mode: screen;
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: none;
       }
     }
@@ -109,7 +109,7 @@
     .token__img__mobile {
       display: none;
 
-      @media screen and (max-width: 800px) {
+      @include respond-to('mobile') {
         display: unset;
         width: 100%;
         margin: tovw(60px, 'mobile') 0 tovw(5px, 'mobile') 0;
diff --git a/src/components/sections/terms/hero/hero.module.scss b/src/components/sections/terms/hero/hero.module.scss
index 184223f..6e9759f 100644
--- a/src/components/sections/terms/hero/hero.module.scss
+++ b/src/components/sections/terms/hero/hero.module.scss
@@ -9,7 +9,7 @@
   padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
   padding-bottom: 0;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     align-items: center;
     flex-direction: row;
     justify-content: space-between;
@@ -23,7 +23,7 @@
     margin: 0;
     text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       font-size: tovw(50px, 'mobile');
     }
   }
@@ -32,7 +32,7 @@
 .arrow {
   display: none;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     position: relative;
     display: unset;
     width: tovw(18px, 'mobile', 18px);
@@ -54,7 +54,7 @@
   );
   mix-blend-mode: screen;
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     height: 70%;
   }
 }
diff --git a/src/components/sections/terms/termsofuse/termsofuse.module.scss b/src/components/sections/terms/termsofuse/termsofuse.module.scss
index b5ed89d..fb8fdb0 100644
--- a/src/components/sections/terms/termsofuse/termsofuse.module.scss
+++ b/src/components/sections/terms/termsofuse/termsofuse.module.scss
@@ -6,7 +6,7 @@
     tovw(100px, 'default', 50px);
   padding-bottom: tovw(270px, 'default', 150px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     max-width: 100%;
     padding: 0 tovw(16px, 'tablet', 16px);
     padding-bottom: tovw(80px, 'tablet', 80px);
@@ -17,7 +17,7 @@
     line-height: 1.9;
     margin: tovw(64px, 'default', 40px) 0;
 
-    @media screen and (max-width: 800px) {
+    @include respond-to('mobile') {
       font-size: tovw(15px, 'tablet', 15px);
       line-height: 1.6;
     }
@@ -25,7 +25,7 @@
 }
 
 .container {
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     padding: 0;
   }
 }
@@ -39,7 +39,7 @@
   border-bottom: 1px solid var(--color-grey-light);
   gap: tovw(15px, 'default', 10px);
 
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     font-size: tovw(12px, 'tablet', 12px);
     padding-bottom: tovw(16px, 'tablet', 16px);
   }
diff --git a/src/css/global.scss b/src/css/global.scss
index d997a0b..fe22ea8 100644
--- a/src/css/global.scss
+++ b/src/css/global.scss
@@ -106,7 +106,7 @@ p {
 
 .hide-on-mobile {
   display: inherit !important;
-  @media screen and (max-width: 800px) {
+  @include respond-to('mobile') {
     display: none !important;
   }
 }
diff --git a/src/css/helpers.scss b/src/css/helpers.scss
index e0d4a67..097f2ef 100644
--- a/src/css/helpers.scss
+++ b/src/css/helpers.scss
@@ -50,3 +50,34 @@
 
   @return math.div($target, $context) + 0em;
 }
+
+$breakpoints: (
+  'mobile-sm': (
+    max-width: 500px
+  ),
+  'mobile': (
+    max-width: 900px
+  ),
+  'tablet': (
+    max-width: 1024px
+  ),
+  'desktop-sm': (
+    max-width: 1280px
+  ),
+  'desktop': (
+    max-width: 1440px
+  ),
+  'desktop-xl': (
+    min-width: 1920px
+  )
+) !default;
+
+@mixin respond-to($breakpoint) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    @media #{inspect(map-get($breakpoints, $breakpoint))} {
+      @content;
+    }
+  } @else {
+    @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. ' + 'Available breakpoints are: #{map-keys($breakpoints)}.';
+  }
+}