style: format scss mode by stylelint

Magickbase · Oct 16, 2023 · 7dcfa69 · 7dcfa69
1 parent 1e91da0
commit 7dcfa69
Showing 1 changed file with 35 additions and 29 deletions.
diff --git a/src/pages/media-kit/index.module.scss b/src/pages/media-kit/index.module.scss
@@ -6,43 +6,45 @@
   margin: 0 auto;
   padding: 0 120px;
 
-  @media screen and (max-width: 1670px) {
+  @media screen and (width <= 1670px) {
     overflow-x: hidden;
   }
 
-  @media screen and (max-width: 1440px) {
+  @media screen and (width <= 1440px) {
     max-width: 100vw;
   }
-  @media screen and (max-width: 750px) {
+  @media screen and (width <= 750px) {
     padding: 0 24px;
   }
 }
 
 .embellished {
   position: absolute;
+
   &[data-position='left'] {
     top: -45px;
     left: 20px;
-    @media screen and (max-width: 980px) {
+    @media screen and (width <= 980px) {
       left: -80px;
     }
-    @media screen and (max-width: 800px) {
+    @media screen and (width <= 800px) {
       display: none;
     }
   }
 
   &[data-position='right'] {
     top: -90px;
     right: -5px;
-    @media screen and (max-width: 1180px) {
+    @media screen and (width <= 1180px) {
       left: 45vw;
     }
   }
 }
+
 .banner {
-  text-align: center;
   padding-top: 213px;
   padding-bottom: 303px;
+  text-align: center;
 
   h1,
   h2 {
@@ -52,44 +54,45 @@
   }
 
   h1 {
-    font-size: 65px;
+    padding-bottom: 17px;
     font-weight: 700;
+    font-size: 65px;
     letter-spacing: -0.025em;
-    padding-bottom: 17px;
   }
 
   h2 {
-    font-size: 21px;
     font-weight: 500;
+    font-size: 21px;
     letter-spacing: 0.05em;
   }
-  @media screen and (max-width: 750px) {
+  @media screen and (width <= 750px) {
     padding-top: 152px;
     text-align: left;
+
     h1 {
       font-size: 50px;
     }
   }
 }
 
 .description {
+  padding: 60px 260px;
   color: #fff;
-  background-color: #000;
-  font-size: 18px;
   font-weight: 500;
-  padding: 60px 260px;
-  border-radius: 35px;
+  font-size: 18px;
   line-height: 1.6;
-  @media screen and (max-width: 1400px) {
+  background-color: #000;
+  border-radius: 35px;
+  @media screen and (width <= 1400px) {
     padding: 60px 200px;
   }
-  @media screen and (max-width: 1200px) {
+  @media screen and (width <= 1200px) {
     padding: 60px 100px;
   }
-  @media screen and (max-width: 980px) {
+  @media screen and (width <= 980px) {
     padding: 60px;
   }
-  @media screen and (max-width: 750px) {
+  @media screen and (width <= 750px) {
     padding: 60px 40px;
   }
 }
@@ -98,6 +101,7 @@
   display: flex;
   justify-content: space-between;
   padding: 120px 0;
+
   &:not(:last-child) {
     border-bottom: 0.5px solid #6a7171;
   }
@@ -115,20 +119,21 @@
   }
 
   .assets {
-    padding-left: 220px;
     flex-basis: 850px;
     flex-shrink: 0;
+    padding-left: 220px;
     text-align: center;
 
     & > div {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
       flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
       margin-bottom: -30px;
+
       img {
-        margin-bottom: 30px;
         box-sizing: border-box;
+        margin-bottom: 30px;
       }
     }
 
@@ -142,32 +147,33 @@
   }
 
   .merchAssets {
-    @media screen and (min-width: 1140px) and (max-width: 1240px) {
-      &:after {
-        content: '';
+    @media screen and (width >= 1140px) and (width <= 1240px) {
+      &::after {
         width: 300px;
         height: 300px;
+        content: '';
       }
     }
   }
 
-  @media screen and (max-width: 1240px) {
+  @media screen and (width <= 1240px) {
     flex-direction: column;
+
     .assets {
       flex-basis: auto;
       padding-left: 0;
     }
   }
 
-  @media screen and (max-width: 840px) {
+  @media screen and (width <= 840px) {
     .assets {
       & > div {
         justify-content: center;
       }
     }
   }
 
-  @media screen and (max-width: 660px) {
+  @media screen and (width <= 660px) {
     .assets {
       img {
         max-width: 400px;