diff --git a/src/styles/blocks/_about.scss b/src/styles/blocks/_about.scss
index 47f091491..5fd2eba63 100644
--- a/src/styles/blocks/_about.scss
+++ b/src/styles/blocks/_about.scss
@@ -5,17 +5,17 @@
   flex-direction: column;
   gap: 64px;
 
-  @include onTablet {
+  @include on-tablet {
     margin-block: 152px;
   }
 
-  @include onMiddleDisplay {
+  @include on-middle-display {
     margin-top: 178px;
     margin-bottom: 349px;
   }
 
   &__wrap {
-    @include baseGridTemplate;
+    @include base-grid-template;
 
     row-gap: 32px;
     align-items: center;
@@ -28,13 +28,13 @@
     font-weight: 400;
     line-height: 41px;
 
-    @include onTablet {
+    @include on-tablet {
       grid-column: span 4;
       font-size: 56px;
       line-height: 48px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: span 3;
       font-size: 72px;
       line-height: 61px;
@@ -47,11 +47,11 @@
     font-weight: 400;
     line-height: 24px;
 
-    @include onTablet {
+    @include on-tablet {
       grid-column: span 4;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: 5 / -1;
     }
   }
@@ -66,14 +66,14 @@
     background-repeat: no-repeat;
     background-size: contain;
 
-    @include onTablet {
+    @include on-tablet {
       left: 20%;
       top: 15%;
       width: 526px;
       height: 493px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       top: 0;
       left: 23%;
       width: 718px;
@@ -87,14 +87,14 @@
     width: 100%;
     row-gap: 48px;
 
-    @include baseGridTemplate;
+    @include base-grid-template;
 
-    @include onTablet {
+    @include on-tablet {
       margin-top: 72px;
       row-gap: 80px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       margin-top: 144px;
     }
   }
@@ -105,11 +105,11 @@
     gap: 8px;
     grid-column: span 2;
 
-    @include onTablet {
+    @include on-tablet {
       grid-column: span 4;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: span 2;
     }
   }
diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss
index b0b68a5ef..5b36af88c 100644
--- a/src/styles/blocks/_footer.scss
+++ b/src/styles/blocks/_footer.scss
@@ -3,13 +3,13 @@
   background: rgba(28, 26, 38, 1);
   color: rgba(255, 255, 255, 1);
 
-  @include baseGridTemplate;
+  @include base-grid-template;
 
   grid-template-rows: repeat(4), 1fr;
   row-gap: 40px;
   padding-block: 56px;
 
-  @include onTablet {
+  @include on-tablet {
     padding-block: 88px;
   }
 
@@ -19,12 +19,12 @@
     background-size: contain;
     grid-column: 1 / -1;
 
-    @include onTablet {
+    @include on-tablet {
       grid-row: 1 / 2;
       grid-column: 1 / 3;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: span 2;
     }
   }
@@ -34,34 +34,34 @@
     text-align: left;
 
     &--menu {
-      @include onTablet {
+      @include on-tablet {
         grid-row: 2 / 3;
         grid-column: 1 / 5;
       }
 
-      @include onMiddleDisplay {
+      @include on-middle-display {
         grid-column: 1 / 3;
       }
     }
 
     &--numbers {
-      @include onTablet {
+      @include on-tablet {
         grid-row: 2 / 3;
         grid-column: 5 / -1;
       }
 
-      @include onMiddleDisplay {
+      @include on-middle-display {
         grid-column: 5 / 7;
       }
     }
 
     &--email {
-      @include onTablet {
+      @include on-tablet {
         grid-row: 3 / 4;
         grid-column: 5 / -1;
       }
 
-      @include onMiddleDisplay {
+      @include on-middle-display {
         grid-row: 2 / 3;
         grid-column: 7 / -1;
       }
@@ -75,14 +75,14 @@
     line-height: 41px;
     grid-column: 1 / -1;
 
-    @include onTablet {
+    @include on-tablet {
       grid-row: 1 / 2;
       grid-column: 5 / -1;
       font-size: 56px;
       line-height: 48px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       font-size: 72px;
       line-height: 61px;
     }
@@ -94,7 +94,6 @@
     gap: 16px;
 
     &-link {
-
       @include transition;
 
       &:hover {
@@ -118,7 +117,7 @@
     display: flex;
     gap: 34px;
 
-    @include onTablet {
+    @include on-tablet {
       grid-row: 4 / 5;
     }
   }
@@ -169,7 +168,7 @@
     color: rgba(127, 128, 150, 1);
     grid-column: 1 / 2;
 
-    @include onTablet {
+    @include on-tablet {
       grid-row: 4 / 5;
       grid-column: 5 / -1;
     }
diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss
index 688294d5e..90c44ef78 100644
--- a/src/styles/blocks/_header.scss
+++ b/src/styles/blocks/_header.scss
@@ -1,18 +1,18 @@
 .header {
   height: 100vh;
 
-  @include onTablet {
+  @include on-tablet {
     height: auto;
   }
 
-  @include onMiddleDisplay {
+  @include on-middle-display {
     height: 100vh;
   }
 
   &__content {
     position: relative;
 
-    @include baseGridTemplate;
+    @include base-grid-template;
   }
 
   &__text {
@@ -23,21 +23,21 @@
     text-align: center;
     margin-block: 32px;
 
-    @include onTablet {
+    @include on-tablet {
       margin-top: 80px;
       margin-bottom: 146px;
       grid-column: span 3;
       text-align: left;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       width: 100%;
       margin-top: 135px;
       margin-bottom: 8px;
       grid-column: span 2;
     }
 
-    @include onLargeDisplay {
+    @include on-large-display {
       margin-top: 144px;
       margin-bottom: 40px;
       grid-column: 1 / 3;
@@ -53,13 +53,13 @@
     text-transform: uppercase;
     letter-spacing: -5px;
 
-    @include onTablet {
+    @include on-tablet {
       font-size: 80px;
       line-height: 68px;
       grid-column: 1 / -1;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: span 8;
       font-size: 136px;
       line-height: 116px;
@@ -76,7 +76,7 @@
     background-repeat: no-repeat;
     grid-column: 1 / -1;
 
-    @include onTablet {
+    @include on-tablet {
       position: absolute;
       z-index: -1;
       width: 100%;
@@ -84,12 +84,12 @@
       top: 144px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       height: 546px;
       top: 0;
     }
 
-    @include onLargeDisplay {
+    @include on-large-display {
       height: 586px;
     }
   }
@@ -143,12 +143,12 @@
       }
     }
 
-    @include onTablet {
+    @include on-tablet {
       grid-column: 3 / 7;
       margin-top: 210px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: 1 / 3;
       margin-top: 64px;
 
diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss
index 40218948e..64ff52dbc 100644
--- a/src/styles/blocks/_menu.scss
+++ b/src/styles/blocks/_menu.scss
@@ -9,7 +9,7 @@
     gap: 64px;
     width: 100%;
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       display: flex;
     }
 
@@ -104,7 +104,7 @@
         @include transition;
       }
 
-      @include onMiddleDisplay {
+      @include on-middle-display {
         display: none;
       }
     }
diff --git a/src/styles/blocks/_product.scss b/src/styles/blocks/_product.scss
index 538e224b0..2d4fe5982 100644
--- a/src/styles/blocks/_product.scss
+++ b/src/styles/blocks/_product.scss
@@ -1,17 +1,17 @@
 .product {
-  @include baseGridTemplate;
+  @include base-grid-template;
 
   margin-top: 64px;
 
-  @include onTablet {
+  @include on-tablet {
     margin-top: 228px;
   }
 
-  @include onMiddleDisplay {
+  @include on-middle-display {
     margin-top: 152px;
   }
 
-  @include onLargeDisplay {
+  @include on-large-display {
     margin-top: 178px;
   }
 
@@ -23,12 +23,12 @@
     text-align: left;
     text-transform: uppercase;
 
-    @include onTablet {
+    @include on-tablet {
       font-size: 56px;
       line-height: 48px;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       font-size: 72px;
       line-height: 61px;
     }
@@ -43,7 +43,7 @@
     line-height: 24px;
     text-align: left;
 
-    @include onTablet {
+    @include on-tablet {
       margin-bottom: 80px;
     }
   }
@@ -51,11 +51,11 @@
   &__catalog {
     grid-column: 1 / -1;
 
-    @include catalogGridTemplate;
+    @include catalog-template;
 
     row-gap: 56px;
 
-    @include onTablet {
+    @include on-tablet {
       row-gap: 80px;
     }
   }
@@ -65,11 +65,11 @@
 
     @include transition;
 
-    @include onTablet {
+    @include on-tablet {
       grid-column: span 4;
     }
 
-    @include onMiddleDisplay {
+    @include on-middle-display {
       grid-column: span 3;
     }
 
@@ -82,8 +82,7 @@
 }
 
 .product__card.right {
-  
-  @include onMiddleDisplay {
+  @include on-middle-display {
     grid-column: 3 / 6;
   }
 }
diff --git a/src/styles/blocks/_top-bar.scss b/src/styles/blocks/_top-bar.scss
index 3c2529dba..54ea10783 100644
--- a/src/styles/blocks/_top-bar.scss
+++ b/src/styles/blocks/_top-bar.scss
@@ -1,5 +1,5 @@
 .top-bar {
-  @include onPaddingPage;
+  @include on-padding-page;
   
   display: flex;
   justify-content: space-between;
@@ -8,7 +8,7 @@
   min-width: 320px;
   height: 64px;
 
-  @include onMiddleDisplay {
+  @include on-middle-display {
     height: 88px;
   }
 
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
index dba219566..9d938dff9 100644
--- a/src/styles/utils/_mixins.scss
+++ b/src/styles/utils/_mixins.scss
@@ -1,83 +1,92 @@
 /* #region media-screen */
-
-@mixin onMobile {
+@mixin on-mobile {
   @media (min-width: 320px) {
     @content;
   }
 }
 
-@mixin onTablet {
+@mixin on-tablet {
   @media (min-width: 640px) {
     @content;
   }
 }
 
-@mixin onMiddleDisplay {
+@mixin on-middle-display {
   @media (min-width: 1024px) {
     @content;
   }
 }
 
-@mixin onLargeDisplay {
+@mixin on-large-display {
   @media (min-width: 1200px) {
     @content;
   }
 }
 
-@mixin onPaddingPage{
+@mixin on-padding-page{
   padding-inline: 16px;
 
-  @include onMiddleDisplay {
+  @include on-middle-display {
     padding-inline: 32px;
   }
 }
 
-@mixin baseGridTemplate {
+@mixin base-grid-template {
+  @include on-padding-page;
 
-  @include onPaddingPage;
-  
   margin: 0 auto;
   column-gap: 16px;
+
   --columns: 2;
+
   display: grid;
+
   grid-template-columns: repeat(var(--columns), 1fr);
 
-  @include onTablet {
+  @include on-tablet {
     column-gap: 24px;
+
     --columns: 8;
   }
 
-  @include onMiddleDisplay {
+  @include on-middle-display {
     column-gap: 24px;
+
     --columns: 8;
   }
 
-  @include onLargeDisplay {
+  @include on-large-display {
     column-gap: 24px;
+
     --columns: 8;
   }
 }
 
-@mixin catalogGridTemplate {
+@mixin catalog-template {
   min-width: 320px;
   margin: 0 auto;
   column-gap: 16px;
+
   --columns: 2;
+
   display: grid;
   grid-template-columns: repeat(var(--columns), 1fr);
 
-  @include onTablet {
+  @include on-tablet {
     column-gap: 24px;
+    
     --columns: 8;
   }
 
-  @include onMiddleDisplay {
+  @include on-middle-display {
     column-gap: 24px;
+
     --columns: 8;
   }
 
-  @include onLargeDisplay {
+  @include on-large-display {
     column-gap: 24px;
+
     --columns: 8;
   }
 }