Авто исправление scss с учетом кастомных правил

client/src/assets/css/mixins/text.scss

@@ -34,6 +34,15 @@
 @define-mixin h1 {
   @mixin __p;
 
+  /* margin-top: 32px; */
+  margin-bottom: 1.5rem;
+  padding-bottom: 6px;
+
+  font-size: 100px;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--color-white);
+
   @mixin responsive-l {
     font-size: 84px;
   }
@@ -45,29 +54,11 @@
   @mixin responsive-s {
     font-size: 36px;
   }
-
-  /* margin-top: 32px; */
-  margin-bottom: 1.5rem;
-  padding-bottom: 6px;
-
-  font-size: 100px;
-  font-weight: 500;
-  line-height: 1.2;
-  color: var(--color-white);
 }
 
 @define-mixin h2 {
   @mixin __p;
 
-  @mixin responsive-l {
-    font-size: 40px;
-    line-height: 1.1;
-  }
-
-  @mixin responsive-m {
-    font-size: 32px;
-  }
-
   margin: 2.5rem 0;
   padding-bottom: 6px;
 
@@ -113,6 +104,15 @@
       color: var(--color-white);
     }
   }
+
+  @mixin responsive-l {
+    font-size: 40px;
+    line-height: 1.1;
+  }
+
+  @mixin responsive-m {
+    font-size: 32px;
+  }
 }
 
 @define-mixin h3 {

client/src/assets/css/module/app-footer.scss

@@ -9,11 +9,6 @@
   }
 
   &__question {
-    @mixin responsive-xs {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-
     display: flex;
     gap: 10px;
     align-items: center;
@@ -22,6 +17,11 @@
     &-button {
       margin-left: auto;
     }
+
+    @mixin responsive-xs {
+      flex-direction: column;
+      align-items: flex-start;
+    }
   }
 
   &__bottom {
@@ -31,20 +31,6 @@
   }
 
   &__menu {
-    @mixin responsive-m {
-      grid-row-gap: 10px;
-      grid-template-columns: min-content min-content min-content;
-      grid-template-rows: min-content;
-
-      width: 100%;
-      margin-bottom: var(--space-between-block);
-    }
-
-    @mixin responsive-s {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
     display: grid;
     grid-gap: var(--space-between-block) var(--space-between-sections);
     grid-template-columns: var(--space-between-sections) var(--space-between-sections);
@@ -59,29 +45,43 @@
     &-link {
       font-size: 1.2rem;
     }
+
+    @mixin responsive-m {
+      grid-row-gap: 10px;
+      grid-template-columns: min-content min-content min-content;
+      grid-template-rows: min-content;
+
+      width: 100%;
+      margin-bottom: var(--space-between-block);
+    }
+
+    @mixin responsive-s {
+      display: flex;
+      flex-wrap: wrap;
+    }
   }
 
   &__social {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-between-block);
+
     @mixin responsive-m {
       grid-row-gap: 10px;
       margin-bottom: var(--space-between-block);
     }
-
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-between-block);
   }
 
   &__connection {
-    @mixin responsive-m {
-      align-items: flex-start;
-      width: 100%;
-    }
-
     display: flex;
     flex-direction: column;
     gap: 1rem;
     align-items: flex-end;
     justify-content: space-between;
+
+    @mixin responsive-m {
+      align-items: flex-start;
+      width: 100%;
+    }
   }
 }

client/src/assets/css/module/app.scss

@@ -29,15 +29,15 @@
   }
 
   &__content {
-    @mixin responsive-l {
-      padding: 0 20px;
-    }
-
     max-width: var(--container);
     margin: 0 auto;
     padding: 0 50px;
 
     .m--indentation {
     }
+
+    @mixin responsive-l {
+      padding: 0 20px;
+    }
   }
 }

client/src/assets/css/module/blog.scss

@@ -15,29 +15,24 @@
     }
 
     &-btn {
+      margin-left: auto;
+
       @mixin responsive-xxs {
         width: 100%;
       }
-
-      margin-left: auto;
     }
   }
 
   &__content {
+    display: flex;
+    gap: 80px;
+
     @mixin responsive-m {
       flex-direction: column;
     }
-
-    display: flex;
-    gap: 80px;
   }
 
   &__cover {
-    @mixin responsive-m {
-      height: calc(var(--base-content-size) / 2);
-      max-height: none;
-    }
-
     position: relative;
     z-index: 2;
 
@@ -46,6 +41,11 @@
 
     background: url('./assets/img/bg/blog.svg') no-repeat center;
     background-size: cover;
+
+    @mixin responsive-m {
+      height: calc(var(--base-content-size) / 2);
+      max-height: none;
+    }
   }
 
   &__list {

client/src/assets/css/module/fiald.scss

@@ -63,18 +63,10 @@
       font-size: 1rem;
       color: var(--color-white-opacity);
 
-      &:hover {
-        cursor: url('./assets/img/icon/cursor.svg'), auto;
-      }
-
       &::before {
         cursor: pointer;
         content: '';
         user-select: none;
-        user-select: none;
-        user-select: none;
-        user-select: none;
-        user-select: none;
 
         position: absolute;
         left: 0;
@@ -110,6 +102,10 @@
 
         transition: all 0.3s ease;
       }
+
+      &:hover {
+        cursor: url('./assets/img/icon/cursor.svg'), auto;
+      }
     }
 
     &-input {

client/src/assets/css/module/home.scss

@@ -65,10 +65,6 @@
   }
 
   &__subtitle {
-    @mixin responsive-l {
-      padding: 0 20px;
-    }
-
     max-width: 600px;
     margin: 0 auto;
     text-align: center;
@@ -106,6 +102,10 @@
     span {
       font-weight: 700;
     }
+
+    @mixin responsive-l {
+      padding: 0 20px;
+    }
   }
 
   &__title {
@@ -123,7 +123,6 @@
       var(--color-white) 106.11%
     );
     background-clip: text;
-    background-clip: text;
 
     span {
       color: var(--color-black);
@@ -148,31 +147,22 @@
   }
 
   &__description {
-    @mixin responsive-m {
-      gap: var(--space-between-block);
-    }
-
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
 
     margin-top: calc(var(--space-between-sections) / 2);
     margin-bottom: var(--space-between-sections);
+
+    @mixin responsive-m {
+      gap: var(--space-between-block);
+    }
   }
 
   &__info {
-    @mixin responsive-m {
-      width: 100%;
-    }
-
     width: 60%;
 
     &--item {
-      @mixin responsive-s {
-        flex-direction: column;
-        gap: 10px;
-      }
-
       display: flex;
       justify-content: space-between;
 
@@ -185,13 +175,6 @@
         align-items: end;
 
         &::before {
-          @mixin responsive-s {
-            width: 80px;
-            height: 80px;
-            margin-right: auto;
-            background-size: contain;
-          }
-
           content: '';
 
           display: block;
@@ -200,10 +183,21 @@
           height: 130px;
 
           background: url('./assets/img/icon/circleGradient.svg') no-repeat center;
+
+          @mixin responsive-s {
+            width: 80px;
+            height: 80px;
+            margin-right: auto;
+            background-size: contain;
+          }
         }
       }
 
       span {
+        width: 57%;
+        font-weight: 400;
+        color: var(--color-white);
+
         @mixin responsive-m {
           width: 75%;
         }
@@ -211,35 +205,23 @@
         @mixin responsive-s {
           width: 100%;
         }
-
-        width: 57%;
-        font-weight: 400;
-        color: var(--color-white);
       }
+
+      @mixin responsive-s {
+        flex-direction: column;
+        gap: 10px;
+      }
+    }
+
+    @mixin responsive-m {
+      width: 100%;
     }
   }
 
   &__content {
-    @mixin responsive-m {
-      display: flex;
-      flex-wrap: wrap;
-      gap: calc(var(--space-between-block) / 2);
-      align-items: flex-start;
-
-      max-width: none;
-    }
-
     max-width: 360px;
 
     &--item {
-      @mixin responsive-m {
-        width: calc((100% - var(--space-between-block)) / 3);
-      }
-
-      @mixin responsive-s {
-        width: 100%;
-      }
-
       position: relative;
       z-index: 2;
 
@@ -283,6 +265,23 @@
         background-image: var(--linear-gradient);
         background-clip: text;
       }
+
+      @mixin responsive-m {
+        width: calc((100% - var(--space-between-block)) / 3);
+      }
+
+      @mixin responsive-s {
+        width: 100%;
+      }
+    }
+
+    @mixin responsive-m {
+      display: flex;
+      flex-wrap: wrap;
+      gap: calc(var(--space-between-block) / 2);
+      align-items: flex-start;
+
+      max-width: none;
     }
   }
 
@@ -318,11 +317,11 @@
     }
 
     &--description {
+      max-width: 45%;
+
       @mixin responsive-xs {
         max-width: 100%;
       }
-
-      max-width: 45%;
     }
 
     &--btns {

client/src/assets/css/module/pagination.scss

@@ -30,10 +30,8 @@
 
     &::after {
       content: '';
-
       position: absolute;
       inset: 0;
-
       margin: 5px;
     }
 

client/src/assets/css/module/rubric.scss

@@ -14,10 +14,6 @@
     }
 
     &__description{
-      @mixin responsive-xxs {
-        max-width: none;
-      }
-
       max-width: 60%;
       margin-bottom: 2.5rem;
 
@@ -26,6 +22,10 @@
         max-width: 50%;
         margin-bottom: 0;
       }
+
+      @mixin responsive-xxs {
+        max-width: none;
+      }
     }
 
     &__link{
@@ -64,10 +64,6 @@
 
       padding: 20px 0;
 
-      &:hover{
-        cursor: url("./assets/img/icon/cursor.svg"), auto;
-      }
-
       &::after{
         content: '';
 
@@ -80,6 +76,10 @@
         background: #000;
         background: var(--linear-gradient);
       }
+
+      &:hover{
+        cursor: url("./assets/img/icon/cursor.svg"), auto;
+      }
     }
 
     &__title{

client/src/assets/css/module/song.scss

@@ -10,10 +10,6 @@
     }
 
     &-item {
-        @mixin responsive-m {
-            width: 100%;
-        }
-
         position: relative;
         z-index: 2;
 
@@ -215,6 +211,10 @@
             align-items: center;
             margin-left: auto;
         }
+
+        @mixin responsive-m {
+            width: 100%;
+        }
     }
 }
 

client/src/assets/css/module/tabs.scss

@@ -4,14 +4,14 @@
   margin-bottom: var(--space-between-block);
 
   &.m--btns{
+    gap: 10px;
+
     @mixin responsive-xs {
       .button{
         width: 100%;
       }
     }
 
-    gap: 10px;
-
   }
 
   &__item {

client/src/assets/css/module/team.scss

@@ -1,8 +1,4 @@
 .team {
-    @mixin responsive-xl {
-        padding: 0 0 0 20px;
-    }
-
     position: relative;
     z-index: 2;
 
@@ -11,6 +7,13 @@
     margin-left: auto;
 
     &__header {
+        display: flex;
+
+        max-width: var(--container);
+        margin-right: auto;
+        margin-bottom: var(--space-between-block);
+        padding: 0 50px;
+
         @mixin responsive-xl {
             column-gap: var(--space-between-block);
             padding: 0 40px 0 0;
@@ -19,13 +22,6 @@
         @mixin responsive-s {
             flex-wrap: wrap;
         }
-
-        display: flex;
-
-        max-width: var(--container);
-        margin-right: auto;
-        margin-bottom: var(--space-between-block);
-        padding: 0 50px;
     }
 
     &__title {
@@ -49,14 +45,6 @@
     }
 
     &__tools {
-        @mixin responsive-xl {
-            padding: 0 80px 0 35px;
-        }
-
-        @mixin responsive-l {
-            padding: 0 40px 0 0;
-        }
-
         display: flex;
         flex-wrap: wrap;
         row-gap: 1.5rem;
@@ -75,13 +63,17 @@
                 width: 100%;
             }
         }
+
+        @mixin responsive-xl {
+            padding: 0 80px 0 35px;
+        }
+
+        @mixin responsive-l {
+            padding: 0 40px 0 0;
+        }
     }
 
     &__progress {
-        @mixin responsive-s {
-            max-width: none;
-        }
-
         position: relative;
 
         overflow: hidden;
@@ -104,6 +96,10 @@
 
             background: var(--color-white);
         }
+
+        @mixin responsive-s {
+            max-width: none;
+        }
     }
 
     &__cover {
@@ -127,6 +123,8 @@
     }
 
     &__description {
+        max-width: 820px;
+
         @mixin responsive-xl {
             max-width: calc(100% - var(--space-between-block));
         }
@@ -135,7 +133,9 @@
             width: 100%;
             max-width: none;
         }
+    }
 
-        max-width: 820px;
+    @mixin responsive-xl {
+        padding: 0 0 0 20px;
     }
 }