[Layout] Add new breakpoint $ss max-width:523

for width = 480px devices, add $ss to fit.

src/assets/scss/CFP/intro.scss

@@ -187,10 +187,6 @@ $fontColor: $mid-blue;
   }
 }
 
-
-
-
-
 @include md{
   #cfp-intro{
     h1,
@@ -256,13 +252,13 @@ $fontColor: $mid-blue;
     h1,
     h2,
     h3 {
-      margin-bottom: 10pt;
+      margin-bottom: 15pt;
     }
 
     p {
-      font-size: 12pt;
+      font-size: 13pt;
       line-height: 1.85;
-      width:75vw;
+      width:70vw;
     }
 
     p:not(:last-child) {
@@ -272,13 +268,89 @@ $fontColor: $mid-blue;
 
   #cfp-intro{
     .box-back {
-      margin-bottom: -45em;
-      margin-left:-4em;
+      margin-bottom: -40em;
+      margin-left:-5em;
   
       .first-box {
-        transform: rotate(12deg) scale(0.9);
-        bottom: 640px;
-        left: -20px;
+        transform: rotate(12deg);
+        bottom: 660px;
+        left: 20px;
+      }
+      .introd-text {
+        top: 7em;
+      }
+      .past-sitcon {
+        margin-top:1em;
+      }
+    }
+  }
+
+  #cfp-intro{
+    .box-bluearea {
+      height: 300px;
+      z-index: 0;
+      transform: rotate(12deg);
+    }
+  }
+  
+  #cfp-intro{
+    .box-back2 {
+      margin-top:-2em;
+  
+      .second-box {
+          transform: rotate(12deg);
+          bottom: 1150px;
+      }
+    }
+  }
+}
+
+@include ss {
+  #cfp-intro{
+    h1,
+    h2,
+    h3 {
+      margin-bottom: 10pt;
+    }
+
+    h1,
+    .h1 {
+      font-size: 36pt;
+      font-weight: 900;
+    }
+
+    h2,
+    .h2 {
+      font-size: 20pt;
+      font-weight: 900;
+    }
+
+    h3,
+    .h3 {
+      font-size: 18pt;
+      font-weight: 900;
+    }
+
+    p {
+      font-size: 12pt;
+      line-height: 1.65;
+      width:80vw;
+    }
+
+    p:not(:last-child) {
+      margin-bottom: 2em;
+    }
+  }
+
+  #cfp-intro{
+    .box-back {
+      margin-bottom: -40em;
+      margin-left:-7em;
+  
+      .first-box {
+        transform: rotate(12deg);
+        bottom: 560px;
+        left: 30px;
       }
       .introd-text {
         top: 100px;
@@ -299,11 +371,22 @@ $fontColor: $mid-blue;
   
   #cfp-intro{
     .box-back2 {
-      margin-top:3em;
+      margin-top: 3em;
+      margin-left: -1em;
   
       .second-box {
-          transform: rotate(12deg);
-          bottom: 1100px;
+          transform: rotate(12deg) scale(0.65);
+          bottom: 1260px;
+          left:-14em;
+      }
+    }
+    
+    .give-me-money {
+      top: 2em;
+      .whisper {
+        font-weight: 900;
+        font-size: 1.25em;
+        margin-bottom: 0.5em;
       }
     }
   }

src/assets/scss/breakpoint.scss

@@ -4,12 +4,20 @@ $max-width-2: 1030px;
 $max-width-3: 646px;
 $max-width-4: 415px;
 
+$max-width-35: 480px;
+
 @mixin xs {
   @media (max-width: $max-width-4) {
     @content;
   }
 }
 
+@mixin subs {
+  @media (max-width: $max-width-35) {
+    @content;
+  }
+}
+
 @mixin sm {
   @media (max-width: $max-width-3) {
     @content;

src/assets/scss/hyperpoint.scss

@@ -2,6 +2,7 @@
 $w1366: 1366px;
 $w1024: 1024px;
 $w768: 768px;
+$w523: 523px;
 $w414: 414px;
 
 @mixin lg {
@@ -22,6 +23,12 @@ $w414: 414px;
   }
 }
 
+@mixin ss {
+  @media screen and (max-width: $w523 - 1px) {
+    @content;
+  }
+}
+
 @mixin xs {
   @media screen and (max-width: $w414 - 1px) {
     @content;