New responsive breakpoint

src/lib/components/Select.svelte

@@ -136,7 +136,7 @@
 {/if}
 
 <div
-    class="aw-select is-colored aw-is-only-mobile aw-u-inline-width-100-percent-mobile-break1"
+    class="aw-select is-colored aw-is-only-mobile aw-u-inline-width-100-percent-mobile-break1-and-break2"
     style:display={nativeMobile ? undefined : 'none'}
 >
     {#if selectedOption?.icon}

src/routes/+page.svelte

@@ -583,7 +583,7 @@
                             </h2>
                         </section>
                         <ul
-                            class="aw-big-list-info u-margin-inline-start-auto aw-u-inline-width-100-percent-mobile-break1 aw-u-margin-block-start-48"
+                            class="aw-big-list-info u-margin-inline-start-auto aw-u-inline-width-100-percent-mobile-break1-and-break2 aw-u-margin-block-start-48"
                         >
                             <li class="aw-big-list-info-item">
                                 <div class="aw-headline aw-u-color-text-primary">90K</div>

src/routes/brand-launch/+page.svelte

@@ -155,7 +155,7 @@
                         </div>
                         <div
                             class="aw-hero is-align-start
-						aw-u-padding-block-start-40 aw-u-sep-inline-start-not-break1 aw-u-padding-inline-start-48-not-break1"
+						aw-u-padding-block-start-40 aw-u-sep-inline-start-not-break1-or-break2 aw-u-padding-inline-start-48-not-break1"
                         >
                             <h2 class="aw-title aw-u-color-text-primary">
                                 Allowing you to innovate without limits

src/routes/company/+page.svelte

@@ -74,7 +74,7 @@
                             </h2>
                             <a
                                 href="https://appwrite.careers"
-                                class="aw-button u-cross-child-start aw-u-inline-width-100-percent-mobile-break1"
+                                class="aw-button u-cross-child-start aw-u-inline-width-100-percent-mobile-break1-and-break2"
                                 target="_blank"
                                 rel="noopener noreferrer"
                             >

src/routes/contact-us/+page.svelte

@@ -196,7 +196,7 @@
 									</p> -->
                                     <button
                                         type="submit"
-                                        class="aw-button u-cross-child-center aw-u-inline-width-100-percent-mobile-break1"
+                                        class="aw-button u-cross-child-center aw-u-inline-width-100-percent-mobile-break1-and-break2"
                                     >
                                         <span>Submit</span>
                                     </button>

src/routes/docs/+page.svelte

@@ -69,7 +69,7 @@
         <enhanced:img src="./blur-1.png" alt="" />
     </div>
 
-    <main class="aw-main-section u-position-relative aw-u-overflow-hidden-break1-to-break3" id="main">
+    <main class="aw-main-section u-position-relative aw-u-overflow-hidden-break1-to-break4" id="main">
         <div class="u-position-absolute aw-u-opacity-40-mobile bg-blur">
             <img src="/images/bgs/docs-blur-1.svg" alt="" />
         </div>

src/scss/6-elements/_card.scss

@@ -95,7 +95,7 @@
     }
   }
 
-  @media #{$break1} {
+  @media #{$break1}, #{$break2} {
     --p-card-padding: var(--card-padding-mobile, #{pxToRem(24)});
   }
 }

src/scss/6-elements/_container.scss

@@ -6,7 +6,7 @@
   max-inline-size: var(--p-container-size);
   padding-inline: pxToRem(32);
   margin-inline: auto;
-  @media #{$break1} { padding-inline: pxToRem(20); }
+  @media #{$break1}, #{$break2} { padding-inline: pxToRem(20); }
 }
 
 .#{$p}-main-section {
@@ -20,11 +20,11 @@
   grid-template-columns: minmax(0, 1fr);
 
   &-level-1 {
-    @media #{$break1} {
+    @media #{$break1}, #{$break2} {
       padding-block:pxToRem(0);
       &:first-child { padding-block-start:pxToRem(0); }
     }
-    @media #{$break2open} {
+    @media #{$break3open} {
       padding-block:pxToRem(40);
       &:first-child { padding-block-start:pxToRem(0); }
     }
@@ -35,13 +35,13 @@
   }
   &-level-2 {
     /* level 2 */
-    @media #{$break1} { margin-block:pxToRem(48); }
-    @media #{$break2open} { margin-block:pxToRem(120); }
+    @media #{$break1}, #{$break2} { margin-block:pxToRem(48); }
+    @media #{$break3open} { margin-block:pxToRem(120); }
 
     &.is-margin-replace-padding {
       margin-block:0;
-      @media #{$break1} { padding-block:pxToRem(48); }
-      @media #{$break2open} { padding-block:pxToRem(120); }
+      @media #{$break1}, #{$break2} { padding-block:pxToRem(48); }
+      @media #{$break3open} { padding-block:pxToRem(120); }
     }
   }
 

src/scss/6-elements/_input-text.scss

@@ -142,13 +142,13 @@ textarea.#{$p}-input-text {
   &-list {
     display:grid;
     &.is-two-columns {
-      @media #{$break2open} {
+      @media #{$break3open} {
         grid-template-columns: repeat(2, 1fr);
       }
     }
   }
   &-item {
-    @media #{$break2open} {
+    @media #{$break3open} {
       &.is-column-span-2 { grid-column:span 2;}
     }
   }

src/scss/6-elements/_snap-location.scss

@@ -10,5 +10,5 @@
 .#{$p}-snap-location-references {
   scroll-snap-align: start;
   scroll-margin-top: 7.5rem;
-  @media #{$break2open} { scroll-margin-top: 12.5rem; }
+  @media #{$break3open} { scroll-margin-top: 12.5rem; }
 }

src/scss/6-elements/text-tokens/_caption-400.scss

@@ -13,7 +13,7 @@
   font-weight: var(--p-font-weight);
   text-transform: none; /* optional */
 
-  @media #{$break2open} {
+  @media #{$break3open} {
 
   }
 }

src/scss/6-elements/text-tokens/_caption-500.scss

@@ -12,7 +12,7 @@
   letter-spacing: var(--p-letter-spacing);
   font-weight: var(--p-font-weight);
 
-  @media #{$break2open} {
+  @media #{$break3open} {
 
   }
 }

src/scss/6-elements/text-tokens/_code.scss

@@ -12,7 +12,7 @@
   letter-spacing: var(--p-letter-spacing);
   font-weight: var(--p-font-weight);
 
-  @media #{$break2open} {
+  @media #{$break3open} {
     --p-font-size: var(--aw-font-size-tiny);
     --p-line-height: var(--aw-line-height-xs);
   }

src/scss/6-elements/text-tokens/_description.scss

@@ -13,7 +13,7 @@
   font-weight: var(--p-font-weight);
   color: hsl(var(--aw-color-secondary));
 
-  @media #{$break2open} {
+  @media #{$break3open} {
     --p-font-size: var(--aw-font-size-large);
     --p-line-height: var(--aw-line-height-md);
   }

src/scss/6-elements/text-tokens/_display.scss

@@ -12,7 +12,7 @@
   letter-spacing: var(--p-letter-spacing);
   font-weight: var(--p-font-weight);
 
-  @media #{$break2open} {
+  @media #{$break3open} {
     --p-font-size: var(--aw-font-size-super);
     --p-line-height: var(--aw-line-height-xxxl);
   }

src/scss/6-elements/text-tokens/_headline.scss

@@ -12,7 +12,7 @@
   letter-spacing: var(--p-letter-spacing);
   font-weight: var(--p-font-weight);
 
-  @media #{$break2open} {
+  @media #{$break3open} {
     --p-font-size: var(--aw-font-size-giant);
     --p-line-height: var(--aw-line-height-xxxxl);
   }

src/scss/6-elements/text-tokens/_label.scss

@@ -12,7 +12,7 @@
   letter-spacing: var(--p-letter-spacing);
   font-weight: var(--p-font-weight);
 
-  @media #{$break2open} {
+  @media #{$break3open} {
 
   }
 }

src/scss/6-elements/text-tokens/_main-body-400.scss

@@ -13,7 +13,7 @@
   font-weight: var(--p-font-weight);
   text-transform: none; /* optional */
 
-  @media #{$break2open} {
+  @media #{$break3open} {
     --p-font-size: var(--aw-font-size-medium);
     --p-line-height: var(--aw-line-height-sm);
     --p-letter-spacing: var(--aw-letter-spacing-tight);

src/scss/6-elements/text-tokens/_main-body-500.scss

@@ -12,7 +12,7 @@
   letter-spacing: var(--p-letter-spacing);
   font-weight: var(--p-font-weight);
 
-  @media #{$break2open} {
+  @media #{$break3open} {
     --p-font-size: var(--aw-font-size-medium);
     --p-line-height: var(--aw-line-height-sm);
   }

src/scss/6-elements/text-tokens/_sub-body-400.scss

@@ -12,7 +12,7 @@
   letter-spacing: var(--p-letter-spacing);
   font-weight: var(--p-font-weight);
 
-  @media #{$break2open} {
+  @media #{$break3open} {
     --p-font-size: var(--aw-font-size-small);
     --p-letter-spacing: var(--aw-letter-spacing-tight);
   }

src/scss/6-elements/text-tokens/_sub-body-500.scss

@@ -12,7 +12,7 @@
   letter-spacing: var(--p-letter-spacing);
   font-weight: var(--p-font-weight);
 
-  @media #{$break2open} {
+  @media #{$break3open} {
     --p-font-size: var(--aw-font-size-small);
     --p-letter-spacing: var(--aw-letter-spacing-tight);
   }

src/scss/6-elements/text-tokens/_title.scss

@@ -12,7 +12,7 @@
   letter-spacing: var(--p-letter-spacing);
   font-weight: var(--p-font-weight);
 
-  @media #{$break3open} {
+  @media #{$break4open} {
     --p-line-height: var(--aw-line-height-big);
     --p-font-size: var(--aw-font-size-xxxl);
   }

src/scss/7-components/_article.scss

@@ -41,12 +41,12 @@
       position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:pxToRem(16);
       .#{$p}-numeric-badge {
 
-        @media #{$break2open} { position:absolute; transform:translateX(calc(calc(-100% - pxToRem(16) ) * var(--transform-direction) )); }
+        @media #{$break3open} { position:absolute; transform:translateX(calc(calc(-100% - pxToRem(16) ) * var(--transform-direction) )); }
       }
     }
     &-section {
       position:relative; display:flex; flex-direction:column; gap:pxToRem(24);
-      @media #{$break2open} {
+      @media #{$break3open} {
         &.is-with-line::before {
           content:""; display:block;
           position:absolute; inset-block-start:pxToRem(24); inset-inline-start:pxToRem(-30);
@@ -62,13 +62,13 @@
     */
     &-grid-6-4 {
       > * { min-inline-size:0; }
-      @media #{$break1} { display:flex; flex-direction:column; gap:pxToRem(32); }
-      @media #{$break2open} { display:grid; grid-template-columns:6fr 5.7fr; gap:pxToRem(32); }
+      @media #{$break1}, #{$break2} { display:flex; flex-direction:column; gap:pxToRem(32); }
+      @media #{$break3open} { display:grid; grid-template-columns:6fr 5.7fr; gap:pxToRem(32); }
     }
   }
   .tabs-list { block-size:pxToRem(40); }
 
-  @media #{$break1} {
+  @media #{$break1}, #{$break2} {
     &-header {
       position:relative; z-index:1; flex-direction:column-reverse; padding-block-start:pxToRem(16);
       &-end { align-self:initial; }

src/scss/7-components/_big-list-info.scss

@@ -4,5 +4,5 @@
   display:flex; flex-direction:column; gap:pxToRem(64);
   &-item { padding-block-start:pxToRem(16); border-block-start:solid 1px hsl(var(--aw-color-smooth));}
   .text { color:hsl(var(--aw-color-greyscale-300)); }
-  @media #{$break2open} { inline-size:pxToRem(480); max-inline-size:pxToRem(480); }
+  @media #{$break3open} { inline-size:pxToRem(480); max-inline-size:pxToRem(480); }
 }

src/scss/7-components/_compare-table.scss

@@ -10,23 +10,23 @@
     backdrop-filter:blur(pxToRem(8));
 
     &-button { padding-block:pxToRem(16); }
-    @media #{$break1} {
+    @media #{$break1}, #{$break2} {
       inset-block-start:pxToRem(120);
       &-button {
         display:flex; justify-content:space-between; gap:pxToRem(16); inline-size:100%;
         border-block-end:solid pxToRem(1) hsl(var(--aw-color-smooth));
         [class*="icon-"]:last-child { transition:var(--transition); }
       }
     }
-    @media #{$break2open} { z-index:5; max-inline-size:pxToRem(276); }
+    @media #{$break3open} { z-index:5; max-inline-size:pxToRem(276); }
   }
   tr {
     display:grid; gap:pxToRem(32); grid-auto-columns:1fr; grid-auto-flow:column; border-block-start:solid pxToRem(1) hsl(var(--aw-color-smooth));
     &:last-child { border-block-end:solid pxToRem(1) hsl(var(--aw-color-smooth)); }
   }
   th, td {  padding-block:pxToRem(16);  }
   td:nth-child(n + 2) { padding-inline-start:pxToRem(8); }
-  @media #{$break1} {
+  @media #{$break1}, #{$break2} {
     margin-block-start:pxToRem(16);
     &-body { display:none; }
     &.is-open-in-mobile {
@@ -46,7 +46,7 @@
       &.is-selected { display:table-cell; }
     }
   }
-  @media #{$break2open} {
+  @media #{$break3open} {
     margin-block-start:pxToRem(64);
   }
 }

src/scss/7-components/_content-footer.scss

@@ -6,12 +6,12 @@
   &-header {
     display:flex; justify-content:space-between;
     &-start { display:flex; gap:pxToRem(16); }
-    @media #{$break1} { flex-direction:column-reverse; gap:pxToRem(32); }
-    @media #{$break2open} { justify-items:center; gap:pxToRem(16); }
+    @media #{$break1}, #{$break2} { flex-direction:column-reverse; gap:pxToRem(32); }
+    @media #{$break3open} { justify-items:center; gap:pxToRem(16); }
   }
 
   .#{$p}-card {
-    @media #{$break1} { margin-block-start:pxToRem(16); }
-    @media #{$break2open} { margin-block-start:pxToRem(32); }
+    @media #{$break1}, #{$break2} { margin-block-start:pxToRem(16); }
+    @media #{$break3open} { margin-block-start:pxToRem(32); }
   }
 }

src/scss/7-components/_content.scss

@@ -36,7 +36,7 @@
     }
 
   }
-  @media #{$break1} {
+  @media #{$break1}, #{$break2} {
     --p-section-gap: #{pxToRem(24)};
     --p-content-gap: #{pxToRem(16)};
   }

src/scss/7-components/_footer-nav.scss

@@ -15,7 +15,7 @@
     &-item {}
   }
 
-  @media #{$break1} {
+  @media #{$break1}, #{$break2} {
     flex-direction:column; gap:pxToRem(40);
     &-main {
       &-list { display:flex; flex-direction:column; gap:pxToRem(12); flex-basis:0; }

src/scss/7-components/_hero.scss

@@ -7,11 +7,6 @@
   display:flex; flex-direction:column; gap:var(--p-hero-gap); text-align:center;
   max-inline-size:var(--p-hero-max-inline-size); margin-inline:auto;
   .#{$p}-sub-title { margin-block-end:pxToRem(4); }
-
-  :where(.#{$p}-title, .#{$p}-display, .#{$p}-headline):not(:frist-child) {
-    color:hsl(var(--aw-color-primary)); margin-block-start:pxToRem(8);
-  }
-
   .#{$p}-description { margin-block-start:pxToRem(20); color:hsl(var(--aw-color-secondary)); }
 
   &.is-align-start {
@@ -21,15 +16,15 @@
   &.is-horizontal {
     display:flex; flex-direction:column; margin-inline:initial;
     text-align:start;
-    @media #{$break1}     { max-inline-size:initial; }
-    @media #{$break2open} { max-inline-size:pxToRem(650); }
-    @media #{$break3open} {
+    @media #{$break1}, #{$break2} { max-inline-size:initial; }
+    @media #{$break3open} { max-inline-size:pxToRem(650); }
+    @media #{$break4open} {
       flex-direction:row; gap:pxToRem(32); text-align:start;
       margin-inline:0; max-inline-size:none;
       >:nth-child(1) { flex:1.3; }
       >:nth-child(2) { flex:1;   }
     }
-    @media #{$break1}, #{$break2}, #{$break3} { overflow:hidden; }
+    @media #{$break1}, #{$break2}, #{$break3}, #{$break4} { overflow:hidden; }
   }
 
   &.is-no-max-width { max-inline-size:initial; }

src/scss/7-components/_info-boxes.scss

@@ -25,7 +25,10 @@
     margin-block-start:pxToRem(16); color:hsl(var(--aw-color-primary));
   }
   &-content { margin-block-start:pxToRem(4); color:hsl(var(--aw-color-secondary)); }
-  @media #{$break1} {
+  @media (max-width: 450px) {
     grid-template-columns: repeat(auto-fill, minmax(pxToRem(146), 1fr));
   }
+  @media (min-width: 450.1px) and (max-width: 630px) {
+    grid-template-columns: repeat(auto-fill, minmax(pxToRem(210), 1fr));
+  }
 }