npm - @rolster/styles-foundations - Versions diffs - 2.7.1 → 2.7.2 - Mend

@rolster/styles-foundations 2.7.1 → 2.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/styles.css +377 -1362
package/dist/styles.css.map +1 -1
package/dist/styles.min.css +1 -1
package/dist/styles.rtl.css +377 -1362
package/dist/styles.rtl.min.css +1 -1
package/package.json +1 -1
package/scss/utilities/layout.scss +15 -47

package/dist/styles.css CHANGED Viewed

@@ -4042,1971 +4042,986 @@ p {
   margin: 0rem;
   font-weight: var(--rls-font-weight-medium);
 }
-.xs-grid-8,
-.xs-grid-12,
-.xs-grid-16 {
-  --rls-grid-columns: 12;
-  display: grid;
-  grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
-  width: 100%;
-  box-sizing: border-box;
-}
-.xs-grid-8 > *,
-.xs-grid-12 > *,
-.xs-grid-16 > * {
-  min-width: 0;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-.xs-grid-8 {
-  gap: var(--rls-sizing-x4);
-}
-.xs-grid-12 {
-  gap: var(--rls-sizing-x6);
-}
-.xs-grid-16 {
-  gap: var(--rls-sizing-x8);
-}
-.xs-grid-col-12 {
+.rls-flex-xs-grid-col-12 {
   --rls-grid-columns: 12;
 }
-.xs-grid-col-8 {
+.rls-flex-xs-grid-col-8 {
   --rls-grid-columns: 8;
 }
-.xs-grid-col-6 {
+.rls-flex-xs-grid-col-6 {
   --rls-grid-columns: 6;
 }
-.xs-grid-col-4 {
+.rls-flex-xs-grid-col-4 {
   --rls-grid-columns: 4;
 }
-.xs-grid-col-2 {
+.rls-flex-xs-grid-col-2 {
   --rls-grid-columns: 2;
 }
-.xs-grid-col-1 {
+.rls-flex-xs-grid-col-1 {
   --rls-grid-columns: 1;
 }
-.xs-col-1 {
-  grid-column: span 1 / span 1;
-}
-.xs-col-2 {
-  grid-column: span 2 / span 2;
-}
-.xs-col-3 {
-  grid-column: span 3 / span 3;
-}
-.xs-col-4 {
-  grid-column: span 4 / span 4;
-}
-.xs-col-5 {
-  grid-column: span 5 / span 5;
-}
-.xs-col-6 {
-  grid-column: span 6 / span 6;
-}
-.xs-col-7 {
-  grid-column: span 7 / span 7;
-}
-.xs-col-8 {
-  grid-column: span 8 / span 8;
-}
-.xs-col-9 {
-  grid-column: span 9 / span 9;
-}
-.xs-col-10 {
-  grid-column: span 10 / span 10;
-}
-.xs-col-11 {
-  grid-column: span 11 / span 11;
-}
-.xs-col-12 {
-  grid-column: span 12 / span 12;
-}
-.xs-grid-col-8 > .xs-col-9 {
-  grid-column: span 8 / span 8;
-}
-.xs-grid-col-8 > .xs-col-10 {
-  grid-column: span 8 / span 8;
-}
-.xs-grid-col-8 > .xs-col-11 {
-  grid-column: span 8 / span 8;
-}
-.xs-grid-col-8 > .xs-col-12 {
-  grid-column: span 8 / span 8;
-}
-.xs-grid-col-6 > .xs-col-7 {
-  grid-column: span 6 / span 6;
-}
-.xs-grid-col-6 > .xs-col-8 {
-  grid-column: span 6 / span 6;
-}
-.xs-grid-col-6 > .xs-col-9 {
-  grid-column: span 6 / span 6;
-}
-.xs-grid-col-6 > .xs-col-10 {
-  grid-column: span 6 / span 6;
-}
-.xs-grid-col-6 > .xs-col-11 {
-  grid-column: span 6 / span 6;
-}
-.xs-grid-col-6 > .xs-col-12 {
-  grid-column: span 6 / span 6;
-}
-.xs-grid-col-4 > .xs-col-5 {
-  grid-column: span 4 / span 4;
-}
-.xs-grid-col-4 > .xs-col-6 {
-  grid-column: span 4 / span 4;
-}
-.xs-grid-col-4 > .xs-col-7 {
-  grid-column: span 4 / span 4;
-}
-.xs-grid-col-4 > .xs-col-8 {
-  grid-column: span 4 / span 4;
-}
-.xs-grid-col-4 > .xs-col-9 {
-  grid-column: span 4 / span 4;
-}
-.xs-grid-col-4 > .xs-col-10 {
-  grid-column: span 4 / span 4;
-}
-.xs-grid-col-4 > .xs-col-11 {
-  grid-column: span 4 / span 4;
-}
-.xs-grid-col-4 > .xs-col-12 {
-  grid-column: span 4 / span 4;
-}
-.xs-grid-col-2 > .xs-col-3 {
-  grid-column: span 2 / span 2;
-}
-.xs-grid-col-2 > .xs-col-4 {
-  grid-column: span 2 / span 2;
-}
-.xs-grid-col-2 > .xs-col-5 {
-  grid-column: span 2 / span 2;
-}
-.xs-grid-col-2 > .xs-col-6 {
-  grid-column: span 2 / span 2;
-}
-.xs-grid-col-2 > .xs-col-7 {
-  grid-column: span 2 / span 2;
-}
-.xs-grid-col-2 > .xs-col-8 {
-  grid-column: span 2 / span 2;
-}
-.xs-grid-col-2 > .xs-col-9 {
-  grid-column: span 2 / span 2;
-}
-.xs-grid-col-2 > .xs-col-10 {
-  grid-column: span 2 / span 2;
-}
-.xs-grid-col-2 > .xs-col-11 {
-  grid-column: span 2 / span 2;
-}
-.xs-grid-col-2 > .xs-col-12 {
-  grid-column: span 2 / span 2;
-}
-.xs-grid-col-1 > .xs-col-2 {
-  grid-column: span 1 / span 1;
-}
-.xs-grid-col-1 > .xs-col-3 {
-  grid-column: span 1 / span 1;
-}
-.xs-grid-col-1 > .xs-col-4 {
-  grid-column: span 1 / span 1;
-}
-.xs-grid-col-1 > .xs-col-5 {
-  grid-column: span 1 / span 1;
-}
-.xs-grid-col-1 > .xs-col-6 {
-  grid-column: span 1 / span 1;
-}
-.xs-grid-col-1 > .xs-col-7 {
-  grid-column: span 1 / span 1;
-}
-.xs-grid-col-1 > .xs-col-8 {
-  grid-column: span 1 / span 1;
-}
-.xs-grid-col-1 > .xs-col-9 {
-  grid-column: span 1 / span 1;
-}
-.xs-grid-col-1 > .xs-col-10 {
-  grid-column: span 1 / span 1;
-}
-.xs-grid-col-1 > .xs-col-11 {
-  grid-column: span 1 / span 1;
-}
-.xs-grid-col-1 > .xs-col-12 {
-  grid-column: span 1 / span 1;
-}
-.xs-flex-grid-8,
-.xs-flex-grid-12,
-.xs-flex-grid-16 {
-  --rls-grid-columns: 12;
+.rls-flex-xs-grid-8,
+.rls-flex-xs-grid-12,
+.rls-flex-xs-grid-16 {
   display: grid;
   grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
   width: 100%;
   box-sizing: border-box;
 }
-.xs-flex-grid-8 > *,
-.xs-flex-grid-12 > *,
-.xs-flex-grid-16 > * {
+.rls-flex-xs-grid-8 > *,
+.rls-flex-xs-grid-12 > *,
+.rls-flex-xs-grid-16 > * {
   min-width: 0;
   max-width: 100%;
   box-sizing: border-box;
 }
-.xs-flex-grid-8 {
+.rls-flex-xs-grid-8 {
   gap: var(--rls-sizing-x4);
 }
-.xs-flex-grid-12 {
+.rls-flex-xs-grid-12 {
   gap: var(--rls-sizing-x6);
 }
-.xs-flex-grid-16 {
+.rls-flex-xs-grid-16 {
   gap: var(--rls-sizing-x8);
 }
-.xs-flex-grid-col-12 {
-  --rls-grid-columns: 12;
-}
-.xs-flex-grid-col-8 {
-  --rls-grid-columns: 8;
-}
-.xs-flex-grid-col-6 {
-  --rls-grid-columns: 6;
-}
-.xs-flex-grid-col-4 {
-  --rls-grid-columns: 4;
-}
-.xs-flex-grid-col-2 {
-  --rls-grid-columns: 2;
-}
-.xs-flex-grid-col-1 {
-  --rls-grid-columns: 1;
-}
-.xs-flex-col-1 {
+.rls-flex-xs-col-1 {
   grid-column: span 1 / span 1;
 }
-.xs-flex-col-2 {
+.rls-flex-xs-col-2 {
   grid-column: span 2 / span 2;
 }
-.xs-flex-col-3 {
+.rls-flex-xs-col-3 {
   grid-column: span 3 / span 3;
 }
-.xs-flex-col-4 {
+.rls-flex-xs-col-4 {
   grid-column: span 4 / span 4;
 }
-.xs-flex-col-5 {
+.rls-flex-xs-col-5 {
   grid-column: span 5 / span 5;
 }
-.xs-flex-col-6 {
+.rls-flex-xs-col-6 {
   grid-column: span 6 / span 6;
 }
-.xs-flex-col-7 {
+.rls-flex-xs-col-7 {
   grid-column: span 7 / span 7;
 }
-.xs-flex-col-8 {
+.rls-flex-xs-col-8 {
   grid-column: span 8 / span 8;
 }
-.xs-flex-col-9 {
+.rls-flex-xs-col-9 {
   grid-column: span 9 / span 9;
 }
-.xs-flex-col-10 {
+.rls-flex-xs-col-10 {
   grid-column: span 10 / span 10;
 }
-.xs-flex-col-11 {
+.rls-flex-xs-col-11 {
   grid-column: span 11 / span 11;
 }
-.xs-flex-col-12 {
+.rls-flex-xs-col-12 {
   grid-column: span 12 / span 12;
 }
-.xs-flex-grid-col-8 > .xs-flex-col-9 {
+.rls-flex-xs-grid-col-8 > .rls-flex-xs-col-9 {
   grid-column: span 8 / span 8;
 }
-.xs-flex-grid-col-8 > .xs-flex-col-10 {
+.rls-flex-xs-grid-col-8 > .rls-flex-xs-col-10 {
   grid-column: span 8 / span 8;
 }
-.xs-flex-grid-col-8 > .xs-flex-col-11 {
+.rls-flex-xs-grid-col-8 > .rls-flex-xs-col-11 {
   grid-column: span 8 / span 8;
 }
-.xs-flex-grid-col-8 > .xs-flex-col-12 {
+.rls-flex-xs-grid-col-8 > .rls-flex-xs-col-12 {
   grid-column: span 8 / span 8;
 }
-.xs-flex-grid-col-6 > .xs-flex-col-7 {
+.rls-flex-xs-grid-col-6 > .rls-flex-xs-col-7 {
   grid-column: span 6 / span 6;
 }
-.xs-flex-grid-col-6 > .xs-flex-col-8 {
+.rls-flex-xs-grid-col-6 > .rls-flex-xs-col-8 {
   grid-column: span 6 / span 6;
 }
-.xs-flex-grid-col-6 > .xs-flex-col-9 {
+.rls-flex-xs-grid-col-6 > .rls-flex-xs-col-9 {
   grid-column: span 6 / span 6;
 }
-.xs-flex-grid-col-6 > .xs-flex-col-10 {
+.rls-flex-xs-grid-col-6 > .rls-flex-xs-col-10 {
   grid-column: span 6 / span 6;
 }
-.xs-flex-grid-col-6 > .xs-flex-col-11 {
+.rls-flex-xs-grid-col-6 > .rls-flex-xs-col-11 {
   grid-column: span 6 / span 6;
 }
-.xs-flex-grid-col-6 > .xs-flex-col-12 {
+.rls-flex-xs-grid-col-6 > .rls-flex-xs-col-12 {
   grid-column: span 6 / span 6;
 }
-.xs-flex-grid-col-4 > .xs-flex-col-5 {
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-5 {
   grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-4 > .xs-flex-col-6 {
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-6 {
   grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-4 > .xs-flex-col-7 {
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-7 {
   grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-4 > .xs-flex-col-8 {
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-8 {
   grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-4 > .xs-flex-col-9 {
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-9 {
   grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-4 > .xs-flex-col-10 {
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-10 {
   grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-4 > .xs-flex-col-11 {
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-11 {
   grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-4 > .xs-flex-col-12 {
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-12 {
   grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-2 > .xs-flex-col-3 {
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-3 {
   grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-2 > .xs-flex-col-4 {
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-4 {
   grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-2 > .xs-flex-col-5 {
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-5 {
   grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-2 > .xs-flex-col-6 {
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-6 {
   grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-2 > .xs-flex-col-7 {
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-7 {
   grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-2 > .xs-flex-col-8 {
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-8 {
   grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-2 > .xs-flex-col-9 {
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-9 {
   grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-2 > .xs-flex-col-10 {
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-10 {
   grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-2 > .xs-flex-col-11 {
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-11 {
   grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-2 > .xs-flex-col-12 {
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-12 {
   grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-1 > .xs-flex-col-2 {
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-2 {
   grid-column: span 1 / span 1;
 }
-.xs-flex-grid-col-1 > .xs-flex-col-3 {
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-3 {
   grid-column: span 1 / span 1;
 }
-.xs-flex-grid-col-1 > .xs-flex-col-4 {
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-4 {
   grid-column: span 1 / span 1;
 }
-.xs-flex-grid-col-1 > .xs-flex-col-5 {
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-5 {
   grid-column: span 1 / span 1;
 }
-.xs-flex-grid-col-1 > .xs-flex-col-6 {
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-6 {
   grid-column: span 1 / span 1;
 }
-.xs-flex-grid-col-1 > .xs-flex-col-7 {
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-7 {
   grid-column: span 1 / span 1;
 }
-.xs-flex-grid-col-1 > .xs-flex-col-8 {
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-8 {
   grid-column: span 1 / span 1;
 }
-.xs-flex-grid-col-1 > .xs-flex-col-9 {
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-9 {
   grid-column: span 1 / span 1;
 }
-.xs-flex-grid-col-1 > .xs-flex-col-10 {
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-10 {
   grid-column: span 1 / span 1;
 }
-.xs-flex-grid-col-1 > .xs-flex-col-11 {
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-11 {
   grid-column: span 1 / span 1;
 }
-.xs-flex-grid-col-1 > .xs-flex-col-12 {
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-12 {
   grid-column: span 1 / span 1;
 }
 @media screen and (min-width: 420px) {
-  .sm-grid-8,
-  .sm-grid-12,
-  .sm-grid-16 {
+  .rls-flex-sm-grid-col-12 {
     --rls-grid-columns: 12;
+  }
+  .rls-flex-sm-grid-col-8 {
+    --rls-grid-columns: 8;
+  }
+  .rls-flex-sm-grid-col-6 {
+    --rls-grid-columns: 6;
+  }
+  .rls-flex-sm-grid-col-4 {
+    --rls-grid-columns: 4;
+  }
+  .rls-flex-sm-grid-col-2 {
+    --rls-grid-columns: 2;
+  }
+  .rls-flex-sm-grid-col-1 {
+    --rls-grid-columns: 1;
+  }
+  .rls-flex-sm-grid-8,
+  .rls-flex-sm-grid-12,
+  .rls-flex-sm-grid-16 {
     display: grid;
     grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
     width: 100%;
     box-sizing: border-box;
   }
-  .sm-grid-8 > *,
-  .sm-grid-12 > *,
-  .sm-grid-16 > * {
+  .rls-flex-sm-grid-8 > *,
+  .rls-flex-sm-grid-12 > *,
+  .rls-flex-sm-grid-16 > * {
     min-width: 0;
     max-width: 100%;
     box-sizing: border-box;
   }
-  .sm-grid-8 {
+  .rls-flex-sm-grid-8 {
     gap: var(--rls-sizing-x4);
   }
-  .sm-grid-12 {
+  .rls-flex-sm-grid-12 {
     gap: var(--rls-sizing-x6);
   }
-  .sm-grid-16 {
+  .rls-flex-sm-grid-16 {
     gap: var(--rls-sizing-x8);
   }
-  .sm-grid-col-12 {
-    --rls-grid-columns: 12;
-  }
-  .sm-grid-col-8 {
-    --rls-grid-columns: 8;
-  }
-  .sm-grid-col-6 {
-    --rls-grid-columns: 6;
-  }
-  .sm-grid-col-4 {
-    --rls-grid-columns: 4;
-  }
-  .sm-grid-col-2 {
-    --rls-grid-columns: 2;
-  }
-  .sm-grid-col-1 {
-    --rls-grid-columns: 1;
-  }
-  .sm-col-1 {
+  .rls-flex-sm-col-1 {
     grid-column: span 1 / span 1;
   }
-  .sm-col-2 {
+  .rls-flex-sm-col-2 {
     grid-column: span 2 / span 2;
   }
-  .sm-col-3 {
+  .rls-flex-sm-col-3 {
     grid-column: span 3 / span 3;
   }
-  .sm-col-4 {
+  .rls-flex-sm-col-4 {
     grid-column: span 4 / span 4;
   }
-  .sm-col-5 {
+  .rls-flex-sm-col-5 {
     grid-column: span 5 / span 5;
   }
-  .sm-col-6 {
+  .rls-flex-sm-col-6 {
     grid-column: span 6 / span 6;
   }
-  .sm-col-7 {
+  .rls-flex-sm-col-7 {
     grid-column: span 7 / span 7;
   }
-  .sm-col-8 {
+  .rls-flex-sm-col-8 {
     grid-column: span 8 / span 8;
   }
-  .sm-col-9 {
+  .rls-flex-sm-col-9 {
     grid-column: span 9 / span 9;
   }
-  .sm-col-10 {
+  .rls-flex-sm-col-10 {
     grid-column: span 10 / span 10;
   }
-  .sm-col-11 {
+  .rls-flex-sm-col-11 {
     grid-column: span 11 / span 11;
   }
-  .sm-col-12 {
+  .rls-flex-sm-col-12 {
     grid-column: span 12 / span 12;
   }
-  .sm-grid-col-8 > .sm-col-9 {
+  .rls-flex-sm-grid-col-8 > .rls-flex-sm-col-9 {
     grid-column: span 8 / span 8;
   }
-  .sm-grid-col-8 > .sm-col-10 {
+  .rls-flex-sm-grid-col-8 > .rls-flex-sm-col-10 {
     grid-column: span 8 / span 8;
   }
-  .sm-grid-col-8 > .sm-col-11 {
+  .rls-flex-sm-grid-col-8 > .rls-flex-sm-col-11 {
     grid-column: span 8 / span 8;
   }
-  .sm-grid-col-8 > .sm-col-12 {
+  .rls-flex-sm-grid-col-8 > .rls-flex-sm-col-12 {
     grid-column: span 8 / span 8;
   }
-  .sm-grid-col-6 > .sm-col-7 {
+  .rls-flex-sm-grid-col-6 > .rls-flex-sm-col-7 {
     grid-column: span 6 / span 6;
   }
-  .sm-grid-col-6 > .sm-col-8 {
+  .rls-flex-sm-grid-col-6 > .rls-flex-sm-col-8 {
     grid-column: span 6 / span 6;
   }
-  .sm-grid-col-6 > .sm-col-9 {
+  .rls-flex-sm-grid-col-6 > .rls-flex-sm-col-9 {
     grid-column: span 6 / span 6;
   }
-  .sm-grid-col-6 > .sm-col-10 {
+  .rls-flex-sm-grid-col-6 > .rls-flex-sm-col-10 {
     grid-column: span 6 / span 6;
   }
-  .sm-grid-col-6 > .sm-col-11 {
+  .rls-flex-sm-grid-col-6 > .rls-flex-sm-col-11 {
     grid-column: span 6 / span 6;
   }
-  .sm-grid-col-6 > .sm-col-12 {
+  .rls-flex-sm-grid-col-6 > .rls-flex-sm-col-12 {
     grid-column: span 6 / span 6;
   }
-  .sm-grid-col-4 > .sm-col-5 {
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-5 {
     grid-column: span 4 / span 4;
   }
-  .sm-grid-col-4 > .sm-col-6 {
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-6 {
     grid-column: span 4 / span 4;
   }
-  .sm-grid-col-4 > .sm-col-7 {
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-7 {
     grid-column: span 4 / span 4;
   }
-  .sm-grid-col-4 > .sm-col-8 {
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-8 {
     grid-column: span 4 / span 4;
   }
-  .sm-grid-col-4 > .sm-col-9 {
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-9 {
     grid-column: span 4 / span 4;
   }
-  .sm-grid-col-4 > .sm-col-10 {
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-10 {
     grid-column: span 4 / span 4;
   }
-  .sm-grid-col-4 > .sm-col-11 {
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-11 {
     grid-column: span 4 / span 4;
   }
-  .sm-grid-col-4 > .sm-col-12 {
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-12 {
     grid-column: span 4 / span 4;
   }
-  .sm-grid-col-2 > .sm-col-3 {
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-3 {
     grid-column: span 2 / span 2;
   }
-  .sm-grid-col-2 > .sm-col-4 {
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-4 {
     grid-column: span 2 / span 2;
   }
-  .sm-grid-col-2 > .sm-col-5 {
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-5 {
     grid-column: span 2 / span 2;
   }
-  .sm-grid-col-2 > .sm-col-6 {
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-6 {
     grid-column: span 2 / span 2;
   }
-  .sm-grid-col-2 > .sm-col-7 {
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-7 {
     grid-column: span 2 / span 2;
   }
-  .sm-grid-col-2 > .sm-col-8 {
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-8 {
     grid-column: span 2 / span 2;
   }
-  .sm-grid-col-2 > .sm-col-9 {
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-9 {
     grid-column: span 2 / span 2;
   }
-  .sm-grid-col-2 > .sm-col-10 {
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-10 {
     grid-column: span 2 / span 2;
   }
-  .sm-grid-col-2 > .sm-col-11 {
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-11 {
     grid-column: span 2 / span 2;
   }
-  .sm-grid-col-2 > .sm-col-12 {
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-12 {
     grid-column: span 2 / span 2;
   }
-  .sm-grid-col-1 > .sm-col-2 {
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-2 {
     grid-column: span 1 / span 1;
   }
-  .sm-grid-col-1 > .sm-col-3 {
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-3 {
     grid-column: span 1 / span 1;
   }
-  .sm-grid-col-1 > .sm-col-4 {
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-4 {
     grid-column: span 1 / span 1;
   }
-  .sm-grid-col-1 > .sm-col-5 {
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-5 {
     grid-column: span 1 / span 1;
   }
-  .sm-grid-col-1 > .sm-col-6 {
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-6 {
     grid-column: span 1 / span 1;
   }
-  .sm-grid-col-1 > .sm-col-7 {
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-7 {
     grid-column: span 1 / span 1;
   }
-  .sm-grid-col-1 > .sm-col-8 {
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-8 {
     grid-column: span 1 / span 1;
   }
-  .sm-grid-col-1 > .sm-col-9 {
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-9 {
     grid-column: span 1 / span 1;
   }
-  .sm-grid-col-1 > .sm-col-10 {
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-10 {
     grid-column: span 1 / span 1;
   }
-  .sm-grid-col-1 > .sm-col-11 {
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-11 {
     grid-column: span 1 / span 1;
   }
-  .sm-grid-col-1 > .sm-col-12 {
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-12 {
     grid-column: span 1 / span 1;
   }
-  .sm-flex-grid-8,
-  .sm-flex-grid-12,
-  .sm-flex-grid-16 {
+}
+@media screen and (min-width: 720px) {
+  .rls-flex-md-grid-col-12 {
     --rls-grid-columns: 12;
+  }
+  .rls-flex-md-grid-col-8 {
+    --rls-grid-columns: 8;
+  }
+  .rls-flex-md-grid-col-6 {
+    --rls-grid-columns: 6;
+  }
+  .rls-flex-md-grid-col-4 {
+    --rls-grid-columns: 4;
+  }
+  .rls-flex-md-grid-col-2 {
+    --rls-grid-columns: 2;
+  }
+  .rls-flex-md-grid-col-1 {
+    --rls-grid-columns: 1;
+  }
+  .rls-flex-md-grid-8,
+  .rls-flex-md-grid-12,
+  .rls-flex-md-grid-16 {
     display: grid;
     grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
     width: 100%;
     box-sizing: border-box;
   }
-  .sm-flex-grid-8 > *,
-  .sm-flex-grid-12 > *,
-  .sm-flex-grid-16 > * {
+  .rls-flex-md-grid-8 > *,
+  .rls-flex-md-grid-12 > *,
+  .rls-flex-md-grid-16 > * {
     min-width: 0;
     max-width: 100%;
     box-sizing: border-box;
   }
-  .sm-flex-grid-8 {
+  .rls-flex-md-grid-8 {
     gap: var(--rls-sizing-x4);
   }
-  .sm-flex-grid-12 {
+  .rls-flex-md-grid-12 {
     gap: var(--rls-sizing-x6);
   }
-  .sm-flex-grid-16 {
+  .rls-flex-md-grid-16 {
     gap: var(--rls-sizing-x8);
   }
-  .sm-flex-grid-col-12 {
-    --rls-grid-columns: 12;
-  }
-  .sm-flex-grid-col-8 {
-    --rls-grid-columns: 8;
-  }
-  .sm-flex-grid-col-6 {
-    --rls-grid-columns: 6;
-  }
-  .sm-flex-grid-col-4 {
-    --rls-grid-columns: 4;
-  }
-  .sm-flex-grid-col-2 {
-    --rls-grid-columns: 2;
-  }
-  .sm-flex-grid-col-1 {
-    --rls-grid-columns: 1;
-  }
-  .sm-flex-col-1 {
+  .rls-flex-md-col-1 {
     grid-column: span 1 / span 1;
   }
-  .sm-flex-col-2 {
+  .rls-flex-md-col-2 {
     grid-column: span 2 / span 2;
   }
-  .sm-flex-col-3 {
+  .rls-flex-md-col-3 {
     grid-column: span 3 / span 3;
   }
-  .sm-flex-col-4 {
+  .rls-flex-md-col-4 {
     grid-column: span 4 / span 4;
   }
-  .sm-flex-col-5 {
+  .rls-flex-md-col-5 {
     grid-column: span 5 / span 5;
   }
-  .sm-flex-col-6 {
+  .rls-flex-md-col-6 {
     grid-column: span 6 / span 6;
   }
-  .sm-flex-col-7 {
+  .rls-flex-md-col-7 {
     grid-column: span 7 / span 7;
   }
-  .sm-flex-col-8 {
+  .rls-flex-md-col-8 {
     grid-column: span 8 / span 8;
   }
-  .sm-flex-col-9 {
+  .rls-flex-md-col-9 {
     grid-column: span 9 / span 9;
   }
-  .sm-flex-col-10 {
+  .rls-flex-md-col-10 {
     grid-column: span 10 / span 10;
   }
-  .sm-flex-col-11 {
+  .rls-flex-md-col-11 {
     grid-column: span 11 / span 11;
   }
-  .sm-flex-col-12 {
+  .rls-flex-md-col-12 {
     grid-column: span 12 / span 12;
   }
-  .sm-flex-grid-col-8 > .sm-flex-col-9 {
+  .rls-flex-md-grid-col-8 > .rls-flex-md-col-9 {
     grid-column: span 8 / span 8;
   }
-  .sm-flex-grid-col-8 > .sm-flex-col-10 {
+  .rls-flex-md-grid-col-8 > .rls-flex-md-col-10 {
     grid-column: span 8 / span 8;
   }
-  .sm-flex-grid-col-8 > .sm-flex-col-11 {
+  .rls-flex-md-grid-col-8 > .rls-flex-md-col-11 {
     grid-column: span 8 / span 8;
   }
-  .sm-flex-grid-col-8 > .sm-flex-col-12 {
+  .rls-flex-md-grid-col-8 > .rls-flex-md-col-12 {
     grid-column: span 8 / span 8;
   }
-  .sm-flex-grid-col-6 > .sm-flex-col-7 {
+  .rls-flex-md-grid-col-6 > .rls-flex-md-col-7 {
     grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-6 > .sm-flex-col-8 {
+  .rls-flex-md-grid-col-6 > .rls-flex-md-col-8 {
     grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-6 > .sm-flex-col-9 {
+  .rls-flex-md-grid-col-6 > .rls-flex-md-col-9 {
     grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-6 > .sm-flex-col-10 {
+  .rls-flex-md-grid-col-6 > .rls-flex-md-col-10 {
     grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-6 > .sm-flex-col-11 {
+  .rls-flex-md-grid-col-6 > .rls-flex-md-col-11 {
     grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-6 > .sm-flex-col-12 {
+  .rls-flex-md-grid-col-6 > .rls-flex-md-col-12 {
     grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-4 > .sm-flex-col-5 {
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-5 {
     grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-4 > .sm-flex-col-6 {
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-6 {
     grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-4 > .sm-flex-col-7 {
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-7 {
     grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-4 > .sm-flex-col-8 {
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-8 {
     grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-4 > .sm-flex-col-9 {
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-9 {
     grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-4 > .sm-flex-col-10 {
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-10 {
     grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-4 > .sm-flex-col-11 {
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-11 {
     grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-4 > .sm-flex-col-12 {
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-12 {
     grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-2 > .sm-flex-col-3 {
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-3 {
     grid-column: span 2 / span 2;
   }
-  .sm-flex-grid-col-2 > .sm-flex-col-4 {
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-4 {
     grid-column: span 2 / span 2;
   }
-  .sm-flex-grid-col-2 > .sm-flex-col-5 {
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-5 {
     grid-column: span 2 / span 2;
   }
-  .sm-flex-grid-col-2 > .sm-flex-col-6 {
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-6 {
     grid-column: span 2 / span 2;
   }
-  .sm-flex-grid-col-2 > .sm-flex-col-7 {
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-7 {
     grid-column: span 2 / span 2;
   }
-  .sm-flex-grid-col-2 > .sm-flex-col-8 {
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-8 {
     grid-column: span 2 / span 2;
   }
-  .sm-flex-grid-col-2 > .sm-flex-col-9 {
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-9 {
     grid-column: span 2 / span 2;
   }
-  .sm-flex-grid-col-2 > .sm-flex-col-10 {
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-10 {
     grid-column: span 2 / span 2;
   }
-  .sm-flex-grid-col-2 > .sm-flex-col-11 {
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-11 {
     grid-column: span 2 / span 2;
   }
-  .sm-flex-grid-col-2 > .sm-flex-col-12 {
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-12 {
     grid-column: span 2 / span 2;
   }
-  .sm-flex-grid-col-1 > .sm-flex-col-2 {
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-2 {
     grid-column: span 1 / span 1;
   }
-  .sm-flex-grid-col-1 > .sm-flex-col-3 {
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-3 {
     grid-column: span 1 / span 1;
   }
-  .sm-flex-grid-col-1 > .sm-flex-col-4 {
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-4 {
     grid-column: span 1 / span 1;
   }
-  .sm-flex-grid-col-1 > .sm-flex-col-5 {
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-5 {
     grid-column: span 1 / span 1;
   }
-  .sm-flex-grid-col-1 > .sm-flex-col-6 {
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-6 {
     grid-column: span 1 / span 1;
   }
-  .sm-flex-grid-col-1 > .sm-flex-col-7 {
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-7 {
     grid-column: span 1 / span 1;
   }
-  .sm-flex-grid-col-1 > .sm-flex-col-8 {
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-8 {
     grid-column: span 1 / span 1;
   }
-  .sm-flex-grid-col-1 > .sm-flex-col-9 {
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-9 {
     grid-column: span 1 / span 1;
   }
-  .sm-flex-grid-col-1 > .sm-flex-col-10 {
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-10 {
     grid-column: span 1 / span 1;
   }
-  .sm-flex-grid-col-1 > .sm-flex-col-11 {
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-11 {
     grid-column: span 1 / span 1;
   }
-  .sm-flex-grid-col-1 > .sm-flex-col-12 {
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-12 {
     grid-column: span 1 / span 1;
   }
 }
-@media screen and (min-width: 720px) {
-  .md-grid-8,
-  .md-grid-12,
-  .md-grid-16 {
+@media screen and (min-width: 1024px) {
+  .rls-flex-lg-grid-col-12 {
     --rls-grid-columns: 12;
+  }
+  .rls-flex-lg-grid-col-8 {
+    --rls-grid-columns: 8;
+  }
+  .rls-flex-lg-grid-col-6 {
+    --rls-grid-columns: 6;
+  }
+  .rls-flex-lg-grid-col-4 {
+    --rls-grid-columns: 4;
+  }
+  .rls-flex-lg-grid-col-2 {
+    --rls-grid-columns: 2;
+  }
+  .rls-flex-lg-grid-col-1 {
+    --rls-grid-columns: 1;
+  }
+  .rls-flex-lg-grid-8,
+  .rls-flex-lg-grid-12,
+  .rls-flex-lg-grid-16 {
     display: grid;
     grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
     width: 100%;
     box-sizing: border-box;
   }
-  .md-grid-8 > *,
-  .md-grid-12 > *,
-  .md-grid-16 > * {
+  .rls-flex-lg-grid-8 > *,
+  .rls-flex-lg-grid-12 > *,
+  .rls-flex-lg-grid-16 > * {
     min-width: 0;
     max-width: 100%;
     box-sizing: border-box;
   }
-  .md-grid-8 {
+  .rls-flex-lg-grid-8 {
     gap: var(--rls-sizing-x4);
   }
-  .md-grid-12 {
+  .rls-flex-lg-grid-12 {
     gap: var(--rls-sizing-x6);
   }
-  .md-grid-16 {
+  .rls-flex-lg-grid-16 {
     gap: var(--rls-sizing-x8);
   }
-  .md-grid-col-12 {
-    --rls-grid-columns: 12;
-  }
-  .md-grid-col-8 {
-    --rls-grid-columns: 8;
-  }
-  .md-grid-col-6 {
-    --rls-grid-columns: 6;
-  }
-  .md-grid-col-4 {
-    --rls-grid-columns: 4;
-  }
-  .md-grid-col-2 {
-    --rls-grid-columns: 2;
-  }
-  .md-grid-col-1 {
-    --rls-grid-columns: 1;
-  }
-  .md-col-1 {
+  .rls-flex-lg-col-1 {
     grid-column: span 1 / span 1;
   }
-  .md-col-2 {
+  .rls-flex-lg-col-2 {
     grid-column: span 2 / span 2;
   }
-  .md-col-3 {
+  .rls-flex-lg-col-3 {
     grid-column: span 3 / span 3;
   }
-  .md-col-4 {
+  .rls-flex-lg-col-4 {
     grid-column: span 4 / span 4;
   }
-  .md-col-5 {
+  .rls-flex-lg-col-5 {
     grid-column: span 5 / span 5;
   }
-  .md-col-6 {
+  .rls-flex-lg-col-6 {
     grid-column: span 6 / span 6;
   }
-  .md-col-7 {
+  .rls-flex-lg-col-7 {
     grid-column: span 7 / span 7;
   }
-  .md-col-8 {
+  .rls-flex-lg-col-8 {
     grid-column: span 8 / span 8;
   }
-  .md-col-9 {
+  .rls-flex-lg-col-9 {
     grid-column: span 9 / span 9;
   }
-  .md-col-10 {
+  .rls-flex-lg-col-10 {
     grid-column: span 10 / span 10;
   }
-  .md-col-11 {
+  .rls-flex-lg-col-11 {
     grid-column: span 11 / span 11;
   }
-  .md-col-12 {
+  .rls-flex-lg-col-12 {
     grid-column: span 12 / span 12;
   }
-  .md-grid-col-8 > .md-col-9 {
+  .rls-flex-lg-grid-col-8 > .rls-flex-lg-col-9 {
     grid-column: span 8 / span 8;
   }
-  .md-grid-col-8 > .md-col-10 {
+  .rls-flex-lg-grid-col-8 > .rls-flex-lg-col-10 {
     grid-column: span 8 / span 8;
   }
-  .md-grid-col-8 > .md-col-11 {
+  .rls-flex-lg-grid-col-8 > .rls-flex-lg-col-11 {
     grid-column: span 8 / span 8;
   }
-  .md-grid-col-8 > .md-col-12 {
+  .rls-flex-lg-grid-col-8 > .rls-flex-lg-col-12 {
     grid-column: span 8 / span 8;
   }
-  .md-grid-col-6 > .md-col-7 {
+  .rls-flex-lg-grid-col-6 > .rls-flex-lg-col-7 {
     grid-column: span 6 / span 6;
   }
-  .md-grid-col-6 > .md-col-8 {
+  .rls-flex-lg-grid-col-6 > .rls-flex-lg-col-8 {
     grid-column: span 6 / span 6;
   }
-  .md-grid-col-6 > .md-col-9 {
+  .rls-flex-lg-grid-col-6 > .rls-flex-lg-col-9 {
     grid-column: span 6 / span 6;
   }
-  .md-grid-col-6 > .md-col-10 {
+  .rls-flex-lg-grid-col-6 > .rls-flex-lg-col-10 {
     grid-column: span 6 / span 6;
   }
-  .md-grid-col-6 > .md-col-11 {
+  .rls-flex-lg-grid-col-6 > .rls-flex-lg-col-11 {
     grid-column: span 6 / span 6;
   }
-  .md-grid-col-6 > .md-col-12 {
+  .rls-flex-lg-grid-col-6 > .rls-flex-lg-col-12 {
     grid-column: span 6 / span 6;
   }
-  .md-grid-col-4 > .md-col-5 {
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-5 {
     grid-column: span 4 / span 4;
   }
-  .md-grid-col-4 > .md-col-6 {
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-6 {
     grid-column: span 4 / span 4;
   }
-  .md-grid-col-4 > .md-col-7 {
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-7 {
     grid-column: span 4 / span 4;
   }
-  .md-grid-col-4 > .md-col-8 {
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-8 {
     grid-column: span 4 / span 4;
   }
-  .md-grid-col-4 > .md-col-9 {
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-9 {
     grid-column: span 4 / span 4;
   }
-  .md-grid-col-4 > .md-col-10 {
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-10 {
     grid-column: span 4 / span 4;
   }
-  .md-grid-col-4 > .md-col-11 {
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-11 {
     grid-column: span 4 / span 4;
   }
-  .md-grid-col-4 > .md-col-12 {
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-12 {
     grid-column: span 4 / span 4;
   }
-  .md-grid-col-2 > .md-col-3 {
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-3 {
     grid-column: span 2 / span 2;
   }
-  .md-grid-col-2 > .md-col-4 {
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-4 {
     grid-column: span 2 / span 2;
   }
-  .md-grid-col-2 > .md-col-5 {
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-5 {
     grid-column: span 2 / span 2;
   }
-  .md-grid-col-2 > .md-col-6 {
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-6 {
     grid-column: span 2 / span 2;
   }
-  .md-grid-col-2 > .md-col-7 {
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-7 {
     grid-column: span 2 / span 2;
   }
-  .md-grid-col-2 > .md-col-8 {
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-8 {
     grid-column: span 2 / span 2;
   }
-  .md-grid-col-2 > .md-col-9 {
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-9 {
     grid-column: span 2 / span 2;
   }
-  .md-grid-col-2 > .md-col-10 {
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-10 {
     grid-column: span 2 / span 2;
   }
-  .md-grid-col-2 > .md-col-11 {
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-11 {
     grid-column: span 2 / span 2;
   }
-  .md-grid-col-2 > .md-col-12 {
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-12 {
     grid-column: span 2 / span 2;
   }
-  .md-grid-col-1 > .md-col-2 {
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-2 {
     grid-column: span 1 / span 1;
   }
-  .md-grid-col-1 > .md-col-3 {
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-3 {
     grid-column: span 1 / span 1;
   }
-  .md-grid-col-1 > .md-col-4 {
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-4 {
     grid-column: span 1 / span 1;
   }
-  .md-grid-col-1 > .md-col-5 {
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-5 {
     grid-column: span 1 / span 1;
   }
-  .md-grid-col-1 > .md-col-6 {
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-6 {
     grid-column: span 1 / span 1;
   }
-  .md-grid-col-1 > .md-col-7 {
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-7 {
     grid-column: span 1 / span 1;
   }
-  .md-grid-col-1 > .md-col-8 {
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-8 {
     grid-column: span 1 / span 1;
   }
-  .md-grid-col-1 > .md-col-9 {
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-9 {
     grid-column: span 1 / span 1;
   }
-  .md-grid-col-1 > .md-col-10 {
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-10 {
     grid-column: span 1 / span 1;
   }
-  .md-grid-col-1 > .md-col-11 {
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-11 {
     grid-column: span 1 / span 1;
   }
-  .md-grid-col-1 > .md-col-12 {
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-12 {
     grid-column: span 1 / span 1;
   }
-  .md-flex-grid-8,
-  .md-flex-grid-12,
-  .md-flex-grid-16 {
-    --rls-grid-columns: 12;
-    display: grid;
-    grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
-    width: 100%;
-    box-sizing: border-box;
-  }
-  .md-flex-grid-8 > *,
-  .md-flex-grid-12 > *,
-  .md-flex-grid-16 > * {
-    min-width: 0;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-  .md-flex-grid-8 {
-    gap: var(--rls-sizing-x4);
-  }
-  .md-flex-grid-12 {
-    gap: var(--rls-sizing-x6);
-  }
-  .md-flex-grid-16 {
-    gap: var(--rls-sizing-x8);
-  }
-  .md-flex-grid-col-12 {
+}
+@media screen and (min-width: 1440px) {
+  .rls-flex-xl-grid-col-12 {
     --rls-grid-columns: 12;
   }
-  .md-flex-grid-col-8 {
+  .rls-flex-xl-grid-col-8 {
     --rls-grid-columns: 8;
   }
-  .md-flex-grid-col-6 {
+  .rls-flex-xl-grid-col-6 {
     --rls-grid-columns: 6;
   }
-  .md-flex-grid-col-4 {
+  .rls-flex-xl-grid-col-4 {
     --rls-grid-columns: 4;
   }
-  .md-flex-grid-col-2 {
+  .rls-flex-xl-grid-col-2 {
     --rls-grid-columns: 2;
   }
-  .md-flex-grid-col-1 {
+  .rls-flex-xl-grid-col-1 {
     --rls-grid-columns: 1;
   }
-  .md-flex-col-1 {
-    grid-column: span 1 / span 1;
-  }
-  .md-flex-col-2 {
-    grid-column: span 2 / span 2;
-  }
-  .md-flex-col-3 {
-    grid-column: span 3 / span 3;
-  }
-  .md-flex-col-4 {
-    grid-column: span 4 / span 4;
-  }
-  .md-flex-col-5 {
-    grid-column: span 5 / span 5;
-  }
-  .md-flex-col-6 {
-    grid-column: span 6 / span 6;
-  }
-  .md-flex-col-7 {
-    grid-column: span 7 / span 7;
-  }
-  .md-flex-col-8 {
-    grid-column: span 8 / span 8;
-  }
-  .md-flex-col-9 {
-    grid-column: span 9 / span 9;
-  }
-  .md-flex-col-10 {
-    grid-column: span 10 / span 10;
-  }
-  .md-flex-col-11 {
-    grid-column: span 11 / span 11;
+  .rls-flex-xl-grid-8,
+  .rls-flex-xl-grid-12,
+  .rls-flex-xl-grid-16 {
+    display: grid;
+    grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
+    width: 100%;
+    box-sizing: border-box;
   }
-  .md-flex-col-12 {
-    grid-column: span 12 / span 12;
+  .rls-flex-xl-grid-8 > *,
+  .rls-flex-xl-grid-12 > *,
+  .rls-flex-xl-grid-16 > * {
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
   }
-  .md-flex-grid-col-8 > .md-flex-col-9 {
-    grid-column: span 8 / span 8;
+  .rls-flex-xl-grid-8 {
+    gap: var(--rls-sizing-x4);
   }
-  .md-flex-grid-col-8 > .md-flex-col-10 {
-    grid-column: span 8 / span 8;
+  .rls-flex-xl-grid-12 {
+    gap: var(--rls-sizing-x6);
   }
-  .md-flex-grid-col-8 > .md-flex-col-11 {
-    grid-column: span 8 / span 8;
-  }
-  .md-flex-grid-col-8 > .md-flex-col-12 {
-    grid-column: span 8 / span 8;
-  }
-  .md-flex-grid-col-6 > .md-flex-col-7 {
-    grid-column: span 6 / span 6;
-  }
-  .md-flex-grid-col-6 > .md-flex-col-8 {
-    grid-column: span 6 / span 6;
-  }
-  .md-flex-grid-col-6 > .md-flex-col-9 {
-    grid-column: span 6 / span 6;
-  }
-  .md-flex-grid-col-6 > .md-flex-col-10 {
-    grid-column: span 6 / span 6;
-  }
-  .md-flex-grid-col-6 > .md-flex-col-11 {
-    grid-column: span 6 / span 6;
-  }
-  .md-flex-grid-col-6 > .md-flex-col-12 {
-    grid-column: span 6 / span 6;
-  }
-  .md-flex-grid-col-4 > .md-flex-col-5 {
-    grid-column: span 4 / span 4;
-  }
-  .md-flex-grid-col-4 > .md-flex-col-6 {
-    grid-column: span 4 / span 4;
-  }
-  .md-flex-grid-col-4 > .md-flex-col-7 {
-    grid-column: span 4 / span 4;
-  }
-  .md-flex-grid-col-4 > .md-flex-col-8 {
-    grid-column: span 4 / span 4;
-  }
-  .md-flex-grid-col-4 > .md-flex-col-9 {
-    grid-column: span 4 / span 4;
-  }
-  .md-flex-grid-col-4 > .md-flex-col-10 {
-    grid-column: span 4 / span 4;
-  }
-  .md-flex-grid-col-4 > .md-flex-col-11 {
-    grid-column: span 4 / span 4;
-  }
-  .md-flex-grid-col-4 > .md-flex-col-12 {
-    grid-column: span 4 / span 4;
-  }
-  .md-flex-grid-col-2 > .md-flex-col-3 {
-    grid-column: span 2 / span 2;
-  }
-  .md-flex-grid-col-2 > .md-flex-col-4 {
-    grid-column: span 2 / span 2;
-  }
-  .md-flex-grid-col-2 > .md-flex-col-5 {
-    grid-column: span 2 / span 2;
-  }
-  .md-flex-grid-col-2 > .md-flex-col-6 {
-    grid-column: span 2 / span 2;
-  }
-  .md-flex-grid-col-2 > .md-flex-col-7 {
-    grid-column: span 2 / span 2;
-  }
-  .md-flex-grid-col-2 > .md-flex-col-8 {
-    grid-column: span 2 / span 2;
-  }
-  .md-flex-grid-col-2 > .md-flex-col-9 {
-    grid-column: span 2 / span 2;
-  }
-  .md-flex-grid-col-2 > .md-flex-col-10 {
-    grid-column: span 2 / span 2;
-  }
-  .md-flex-grid-col-2 > .md-flex-col-11 {
-    grid-column: span 2 / span 2;
-  }
-  .md-flex-grid-col-2 > .md-flex-col-12 {
-    grid-column: span 2 / span 2;
-  }
-  .md-flex-grid-col-1 > .md-flex-col-2 {
-    grid-column: span 1 / span 1;
-  }
-  .md-flex-grid-col-1 > .md-flex-col-3 {
-    grid-column: span 1 / span 1;
-  }
-  .md-flex-grid-col-1 > .md-flex-col-4 {
-    grid-column: span 1 / span 1;
-  }
-  .md-flex-grid-col-1 > .md-flex-col-5 {
-    grid-column: span 1 / span 1;
-  }
-  .md-flex-grid-col-1 > .md-flex-col-6 {
-    grid-column: span 1 / span 1;
-  }
-  .md-flex-grid-col-1 > .md-flex-col-7 {
-    grid-column: span 1 / span 1;
-  }
-  .md-flex-grid-col-1 > .md-flex-col-8 {
-    grid-column: span 1 / span 1;
-  }
-  .md-flex-grid-col-1 > .md-flex-col-9 {
-    grid-column: span 1 / span 1;
-  }
-  .md-flex-grid-col-1 > .md-flex-col-10 {
-    grid-column: span 1 / span 1;
-  }
-  .md-flex-grid-col-1 > .md-flex-col-11 {
-    grid-column: span 1 / span 1;
-  }
-  .md-flex-grid-col-1 > .md-flex-col-12 {
-    grid-column: span 1 / span 1;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .lg-grid-8,
-  .lg-grid-12,
-  .lg-grid-16 {
-    --rls-grid-columns: 12;
-    display: grid;
-    grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
-    width: 100%;
-    box-sizing: border-box;
-  }
-  .lg-grid-8 > *,
-  .lg-grid-12 > *,
-  .lg-grid-16 > * {
-    min-width: 0;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-  .lg-grid-8 {
-    gap: var(--rls-sizing-x4);
-  }
-  .lg-grid-12 {
-    gap: var(--rls-sizing-x6);
-  }
-  .lg-grid-16 {
+  .rls-flex-xl-grid-16 {
     gap: var(--rls-sizing-x8);
   }
-  .lg-grid-col-12 {
-    --rls-grid-columns: 12;
-  }
-  .lg-grid-col-8 {
-    --rls-grid-columns: 8;
-  }
-  .lg-grid-col-6 {
-    --rls-grid-columns: 6;
-  }
-  .lg-grid-col-4 {
-    --rls-grid-columns: 4;
-  }
-  .lg-grid-col-2 {
-    --rls-grid-columns: 2;
-  }
-  .lg-grid-col-1 {
-    --rls-grid-columns: 1;
-  }
-  .lg-col-1 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-col-2 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-col-3 {
-    grid-column: span 3 / span 3;
-  }
-  .lg-col-4 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-col-5 {
-    grid-column: span 5 / span 5;
-  }
-  .lg-col-6 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-col-7 {
-    grid-column: span 7 / span 7;
-  }
-  .lg-col-8 {
-    grid-column: span 8 / span 8;
-  }
-  .lg-col-9 {
-    grid-column: span 9 / span 9;
-  }
-  .lg-col-10 {
-    grid-column: span 10 / span 10;
-  }
-  .lg-col-11 {
-    grid-column: span 11 / span 11;
-  }
-  .lg-col-12 {
-    grid-column: span 12 / span 12;
-  }
-  .lg-grid-col-8 > .lg-col-9 {
-    grid-column: span 8 / span 8;
-  }
-  .lg-grid-col-8 > .lg-col-10 {
-    grid-column: span 8 / span 8;
-  }
-  .lg-grid-col-8 > .lg-col-11 {
-    grid-column: span 8 / span 8;
-  }
-  .lg-grid-col-8 > .lg-col-12 {
-    grid-column: span 8 / span 8;
-  }
-  .lg-grid-col-6 > .lg-col-7 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-grid-col-6 > .lg-col-8 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-grid-col-6 > .lg-col-9 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-grid-col-6 > .lg-col-10 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-grid-col-6 > .lg-col-11 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-grid-col-6 > .lg-col-12 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-grid-col-4 > .lg-col-5 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-grid-col-4 > .lg-col-6 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-grid-col-4 > .lg-col-7 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-grid-col-4 > .lg-col-8 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-grid-col-4 > .lg-col-9 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-grid-col-4 > .lg-col-10 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-grid-col-4 > .lg-col-11 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-grid-col-4 > .lg-col-12 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-grid-col-2 > .lg-col-3 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-grid-col-2 > .lg-col-4 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-grid-col-2 > .lg-col-5 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-grid-col-2 > .lg-col-6 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-grid-col-2 > .lg-col-7 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-grid-col-2 > .lg-col-8 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-grid-col-2 > .lg-col-9 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-grid-col-2 > .lg-col-10 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-grid-col-2 > .lg-col-11 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-grid-col-2 > .lg-col-12 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-grid-col-1 > .lg-col-2 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-grid-col-1 > .lg-col-3 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-grid-col-1 > .lg-col-4 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-grid-col-1 > .lg-col-5 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-grid-col-1 > .lg-col-6 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-grid-col-1 > .lg-col-7 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-grid-col-1 > .lg-col-8 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-grid-col-1 > .lg-col-9 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-grid-col-1 > .lg-col-10 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-grid-col-1 > .lg-col-11 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-grid-col-1 > .lg-col-12 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-flex-grid-8,
-  .lg-flex-grid-12,
-  .lg-flex-grid-16 {
-    --rls-grid-columns: 12;
-    display: grid;
-    grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
-    width: 100%;
-    box-sizing: border-box;
-  }
-  .lg-flex-grid-8 > *,
-  .lg-flex-grid-12 > *,
-  .lg-flex-grid-16 > * {
-    min-width: 0;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-  .lg-flex-grid-8 {
-    gap: var(--rls-sizing-x4);
-  }
-  .lg-flex-grid-12 {
-    gap: var(--rls-sizing-x6);
-  }
-  .lg-flex-grid-16 {
-    gap: var(--rls-sizing-x8);
-  }
-  .lg-flex-grid-col-12 {
-    --rls-grid-columns: 12;
-  }
-  .lg-flex-grid-col-8 {
-    --rls-grid-columns: 8;
-  }
-  .lg-flex-grid-col-6 {
-    --rls-grid-columns: 6;
-  }
-  .lg-flex-grid-col-4 {
-    --rls-grid-columns: 4;
-  }
-  .lg-flex-grid-col-2 {
-    --rls-grid-columns: 2;
-  }
-  .lg-flex-grid-col-1 {
-    --rls-grid-columns: 1;
-  }
-  .lg-flex-col-1 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-flex-col-2 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-flex-col-3 {
-    grid-column: span 3 / span 3;
-  }
-  .lg-flex-col-4 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-flex-col-5 {
-    grid-column: span 5 / span 5;
-  }
-  .lg-flex-col-6 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-flex-col-7 {
-    grid-column: span 7 / span 7;
-  }
-  .lg-flex-col-8 {
-    grid-column: span 8 / span 8;
-  }
-  .lg-flex-col-9 {
-    grid-column: span 9 / span 9;
-  }
-  .lg-flex-col-10 {
-    grid-column: span 10 / span 10;
-  }
-  .lg-flex-col-11 {
-    grid-column: span 11 / span 11;
-  }
-  .lg-flex-col-12 {
-    grid-column: span 12 / span 12;
-  }
-  .lg-flex-grid-col-8 > .lg-flex-col-9 {
-    grid-column: span 8 / span 8;
-  }
-  .lg-flex-grid-col-8 > .lg-flex-col-10 {
-    grid-column: span 8 / span 8;
-  }
-  .lg-flex-grid-col-8 > .lg-flex-col-11 {
-    grid-column: span 8 / span 8;
-  }
-  .lg-flex-grid-col-8 > .lg-flex-col-12 {
-    grid-column: span 8 / span 8;
-  }
-  .lg-flex-grid-col-6 > .lg-flex-col-7 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-flex-grid-col-6 > .lg-flex-col-8 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-flex-grid-col-6 > .lg-flex-col-9 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-flex-grid-col-6 > .lg-flex-col-10 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-flex-grid-col-6 > .lg-flex-col-11 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-flex-grid-col-6 > .lg-flex-col-12 {
-    grid-column: span 6 / span 6;
-  }
-  .lg-flex-grid-col-4 > .lg-flex-col-5 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-flex-grid-col-4 > .lg-flex-col-6 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-flex-grid-col-4 > .lg-flex-col-7 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-flex-grid-col-4 > .lg-flex-col-8 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-flex-grid-col-4 > .lg-flex-col-9 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-flex-grid-col-4 > .lg-flex-col-10 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-flex-grid-col-4 > .lg-flex-col-11 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-flex-grid-col-4 > .lg-flex-col-12 {
-    grid-column: span 4 / span 4;
-  }
-  .lg-flex-grid-col-2 > .lg-flex-col-3 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-flex-grid-col-2 > .lg-flex-col-4 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-flex-grid-col-2 > .lg-flex-col-5 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-flex-grid-col-2 > .lg-flex-col-6 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-flex-grid-col-2 > .lg-flex-col-7 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-flex-grid-col-2 > .lg-flex-col-8 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-flex-grid-col-2 > .lg-flex-col-9 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-flex-grid-col-2 > .lg-flex-col-10 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-flex-grid-col-2 > .lg-flex-col-11 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-flex-grid-col-2 > .lg-flex-col-12 {
-    grid-column: span 2 / span 2;
-  }
-  .lg-flex-grid-col-1 > .lg-flex-col-2 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-flex-grid-col-1 > .lg-flex-col-3 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-flex-grid-col-1 > .lg-flex-col-4 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-flex-grid-col-1 > .lg-flex-col-5 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-flex-grid-col-1 > .lg-flex-col-6 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-flex-grid-col-1 > .lg-flex-col-7 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-flex-grid-col-1 > .lg-flex-col-8 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-flex-grid-col-1 > .lg-flex-col-9 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-flex-grid-col-1 > .lg-flex-col-10 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-flex-grid-col-1 > .lg-flex-col-11 {
-    grid-column: span 1 / span 1;
-  }
-  .lg-flex-grid-col-1 > .lg-flex-col-12 {
-    grid-column: span 1 / span 1;
-  }
-}
-@media screen and (min-width: 1440px) {
-  .xl-grid-8,
-  .xl-grid-12,
-  .xl-grid-16 {
-    --rls-grid-columns: 12;
-    display: grid;
-    grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
-    width: 100%;
-    box-sizing: border-box;
-  }
-  .xl-grid-8 > *,
-  .xl-grid-12 > *,
-  .xl-grid-16 > * {
-    min-width: 0;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-  .xl-grid-8 {
-    gap: var(--rls-sizing-x4);
-  }
-  .xl-grid-12 {
-    gap: var(--rls-sizing-x6);
-  }
-  .xl-grid-16 {
-    gap: var(--rls-sizing-x8);
-  }
-  .xl-grid-col-12 {
-    --rls-grid-columns: 12;
-  }
-  .xl-grid-col-8 {
-    --rls-grid-columns: 8;
-  }
-  .xl-grid-col-6 {
-    --rls-grid-columns: 6;
-  }
-  .xl-grid-col-4 {
-    --rls-grid-columns: 4;
-  }
-  .xl-grid-col-2 {
-    --rls-grid-columns: 2;
-  }
-  .xl-grid-col-1 {
-    --rls-grid-columns: 1;
-  }
-  .xl-col-1 {
-    grid-column: span 1 / span 1;
-  }
-  .xl-col-2 {
-    grid-column: span 2 / span 2;
-  }
-  .xl-col-3 {
-    grid-column: span 3 / span 3;
-  }
-  .xl-col-4 {
-    grid-column: span 4 / span 4;
-  }
-  .xl-col-5 {
-    grid-column: span 5 / span 5;
-  }
-  .xl-col-6 {
-    grid-column: span 6 / span 6;
-  }
-  .xl-col-7 {
-    grid-column: span 7 / span 7;
-  }
-  .xl-col-8 {
-    grid-column: span 8 / span 8;
-  }
-  .xl-col-9 {
-    grid-column: span 9 / span 9;
-  }
-  .xl-col-10 {
-    grid-column: span 10 / span 10;
-  }
-  .xl-col-11 {
-    grid-column: span 11 / span 11;
-  }
-  .xl-col-12 {
-    grid-column: span 12 / span 12;
-  }
-  .xl-grid-col-8 > .xl-col-9 {
-    grid-column: span 8 / span 8;
-  }
-  .xl-grid-col-8 > .xl-col-10 {
-    grid-column: span 8 / span 8;
-  }
-  .xl-grid-col-8 > .xl-col-11 {
-    grid-column: span 8 / span 8;
-  }
-  .xl-grid-col-8 > .xl-col-12 {
-    grid-column: span 8 / span 8;
-  }
-  .xl-grid-col-6 > .xl-col-7 {
-    grid-column: span 6 / span 6;
-  }
-  .xl-grid-col-6 > .xl-col-8 {
-    grid-column: span 6 / span 6;
-  }
-  .xl-grid-col-6 > .xl-col-9 {
-    grid-column: span 6 / span 6;
-  }
-  .xl-grid-col-6 > .xl-col-10 {
-    grid-column: span 6 / span 6;
-  }
-  .xl-grid-col-6 > .xl-col-11 {
-    grid-column: span 6 / span 6;
-  }
-  .xl-grid-col-6 > .xl-col-12 {
-    grid-column: span 6 / span 6;
-  }
-  .xl-grid-col-4 > .xl-col-5 {
-    grid-column: span 4 / span 4;
-  }
-  .xl-grid-col-4 > .xl-col-6 {
-    grid-column: span 4 / span 4;
-  }
-  .xl-grid-col-4 > .xl-col-7 {
-    grid-column: span 4 / span 4;
-  }
-  .xl-grid-col-4 > .xl-col-8 {
-    grid-column: span 4 / span 4;
-  }
-  .xl-grid-col-4 > .xl-col-9 {
-    grid-column: span 4 / span 4;
-  }
-  .xl-grid-col-4 > .xl-col-10 {
-    grid-column: span 4 / span 4;
-  }
-  .xl-grid-col-4 > .xl-col-11 {
-    grid-column: span 4 / span 4;
-  }
-  .xl-grid-col-4 > .xl-col-12 {
-    grid-column: span 4 / span 4;
-  }
-  .xl-grid-col-2 > .xl-col-3 {
-    grid-column: span 2 / span 2;
-  }
-  .xl-grid-col-2 > .xl-col-4 {
-    grid-column: span 2 / span 2;
-  }
-  .xl-grid-col-2 > .xl-col-5 {
-    grid-column: span 2 / span 2;
-  }
-  .xl-grid-col-2 > .xl-col-6 {
-    grid-column: span 2 / span 2;
-  }
-  .xl-grid-col-2 > .xl-col-7 {
-    grid-column: span 2 / span 2;
-  }
-  .xl-grid-col-2 > .xl-col-8 {
-    grid-column: span 2 / span 2;
-  }
-  .xl-grid-col-2 > .xl-col-9 {
-    grid-column: span 2 / span 2;
-  }
-  .xl-grid-col-2 > .xl-col-10 {
-    grid-column: span 2 / span 2;
-  }
-  .xl-grid-col-2 > .xl-col-11 {
-    grid-column: span 2 / span 2;
-  }
-  .xl-grid-col-2 > .xl-col-12 {
-    grid-column: span 2 / span 2;
-  }
-  .xl-grid-col-1 > .xl-col-2 {
-    grid-column: span 1 / span 1;
-  }
-  .xl-grid-col-1 > .xl-col-3 {
-    grid-column: span 1 / span 1;
-  }
-  .xl-grid-col-1 > .xl-col-4 {
-    grid-column: span 1 / span 1;
-  }
-  .xl-grid-col-1 > .xl-col-5 {
-    grid-column: span 1 / span 1;
-  }
-  .xl-grid-col-1 > .xl-col-6 {
-    grid-column: span 1 / span 1;
-  }
-  .xl-grid-col-1 > .xl-col-7 {
-    grid-column: span 1 / span 1;
-  }
-  .xl-grid-col-1 > .xl-col-8 {
-    grid-column: span 1 / span 1;
-  }
-  .xl-grid-col-1 > .xl-col-9 {
-    grid-column: span 1 / span 1;
-  }
-  .xl-grid-col-1 > .xl-col-10 {
-    grid-column: span 1 / span 1;
-  }
-  .xl-grid-col-1 > .xl-col-11 {
-    grid-column: span 1 / span 1;
-  }
-  .xl-grid-col-1 > .xl-col-12 {
-    grid-column: span 1 / span 1;
-  }
-  .xl-flex-grid-8,
-  .xl-flex-grid-12,
-  .xl-flex-grid-16 {
-    --rls-grid-columns: 12;
-    display: grid;
-    grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
-    width: 100%;
-    box-sizing: border-box;
-  }
-  .xl-flex-grid-8 > *,
-  .xl-flex-grid-12 > *,
-  .xl-flex-grid-16 > * {
-    min-width: 0;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-  .xl-flex-grid-8 {
-    gap: var(--rls-sizing-x4);
-  }
-  .xl-flex-grid-12 {
-    gap: var(--rls-sizing-x6);
-  }
-  .xl-flex-grid-16 {
-    gap: var(--rls-sizing-x8);
-  }
-  .xl-flex-grid-col-12 {
-    --rls-grid-columns: 12;
-  }
-  .xl-flex-grid-col-8 {
-    --rls-grid-columns: 8;
-  }
-  .xl-flex-grid-col-6 {
-    --rls-grid-columns: 6;
-  }
-  .xl-flex-grid-col-4 {
-    --rls-grid-columns: 4;
-  }
-  .xl-flex-grid-col-2 {
-    --rls-grid-columns: 2;
-  }
-  .xl-flex-grid-col-1 {
-    --rls-grid-columns: 1;
-  }
-  .xl-flex-col-1 {
+  .rls-flex-xl-col-1 {
     grid-column: span 1 / span 1;
   }
-  .xl-flex-col-2 {
+  .rls-flex-xl-col-2 {
     grid-column: span 2 / span 2;
   }
-  .xl-flex-col-3 {
+  .rls-flex-xl-col-3 {
     grid-column: span 3 / span 3;
   }
-  .xl-flex-col-4 {
+  .rls-flex-xl-col-4 {
     grid-column: span 4 / span 4;
   }
-  .xl-flex-col-5 {
+  .rls-flex-xl-col-5 {
     grid-column: span 5 / span 5;
   }
-  .xl-flex-col-6 {
+  .rls-flex-xl-col-6 {
     grid-column: span 6 / span 6;
   }
-  .xl-flex-col-7 {
+  .rls-flex-xl-col-7 {
     grid-column: span 7 / span 7;
   }
-  .xl-flex-col-8 {
+  .rls-flex-xl-col-8 {
     grid-column: span 8 / span 8;
   }
-  .xl-flex-col-9 {
+  .rls-flex-xl-col-9 {
     grid-column: span 9 / span 9;
   }
-  .xl-flex-col-10 {
+  .rls-flex-xl-col-10 {
     grid-column: span 10 / span 10;
   }
-  .xl-flex-col-11 {
+  .rls-flex-xl-col-11 {
     grid-column: span 11 / span 11;
   }
-  .xl-flex-col-12 {
+  .rls-flex-xl-col-12 {
     grid-column: span 12 / span 12;
   }
-  .xl-flex-grid-col-8 > .xl-flex-col-9 {
+  .rls-flex-xl-grid-col-8 > .rls-flex-xl-col-9 {
     grid-column: span 8 / span 8;
   }
-  .xl-flex-grid-col-8 > .xl-flex-col-10 {
+  .rls-flex-xl-grid-col-8 > .rls-flex-xl-col-10 {
     grid-column: span 8 / span 8;
   }
-  .xl-flex-grid-col-8 > .xl-flex-col-11 {
+  .rls-flex-xl-grid-col-8 > .rls-flex-xl-col-11 {
     grid-column: span 8 / span 8;
   }
-  .xl-flex-grid-col-8 > .xl-flex-col-12 {
+  .rls-flex-xl-grid-col-8 > .rls-flex-xl-col-12 {
     grid-column: span 8 / span 8;
   }
-  .xl-flex-grid-col-6 > .xl-flex-col-7 {
+  .rls-flex-xl-grid-col-6 > .rls-flex-xl-col-7 {
     grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-6 > .xl-flex-col-8 {
+  .rls-flex-xl-grid-col-6 > .rls-flex-xl-col-8 {
     grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-6 > .xl-flex-col-9 {
+  .rls-flex-xl-grid-col-6 > .rls-flex-xl-col-9 {
     grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-6 > .xl-flex-col-10 {
+  .rls-flex-xl-grid-col-6 > .rls-flex-xl-col-10 {
     grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-6 > .xl-flex-col-11 {
+  .rls-flex-xl-grid-col-6 > .rls-flex-xl-col-11 {
     grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-6 > .xl-flex-col-12 {
+  .rls-flex-xl-grid-col-6 > .rls-flex-xl-col-12 {
     grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-4 > .xl-flex-col-5 {
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-5 {
     grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-4 > .xl-flex-col-6 {
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-6 {
     grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-4 > .xl-flex-col-7 {
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-7 {
     grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-4 > .xl-flex-col-8 {
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-8 {
     grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-4 > .xl-flex-col-9 {
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-9 {
     grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-4 > .xl-flex-col-10 {
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-10 {
     grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-4 > .xl-flex-col-11 {
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-11 {
     grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-4 > .xl-flex-col-12 {
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-12 {
     grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-2 > .xl-flex-col-3 {
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-3 {
     grid-column: span 2 / span 2;
   }
-  .xl-flex-grid-col-2 > .xl-flex-col-4 {
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-4 {
     grid-column: span 2 / span 2;
   }
-  .xl-flex-grid-col-2 > .xl-flex-col-5 {
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-5 {
     grid-column: span 2 / span 2;
   }
-  .xl-flex-grid-col-2 > .xl-flex-col-6 {
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-6 {
     grid-column: span 2 / span 2;
   }
-  .xl-flex-grid-col-2 > .xl-flex-col-7 {
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-7 {
     grid-column: span 2 / span 2;
   }
-  .xl-flex-grid-col-2 > .xl-flex-col-8 {
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-8 {
     grid-column: span 2 / span 2;
   }
-  .xl-flex-grid-col-2 > .xl-flex-col-9 {
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-9 {
     grid-column: span 2 / span 2;
   }
-  .xl-flex-grid-col-2 > .xl-flex-col-10 {
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-10 {
     grid-column: span 2 / span 2;
   }
-  .xl-flex-grid-col-2 > .xl-flex-col-11 {
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-11 {
     grid-column: span 2 / span 2;
   }
-  .xl-flex-grid-col-2 > .xl-flex-col-12 {
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-12 {
     grid-column: span 2 / span 2;
   }
-  .xl-flex-grid-col-1 > .xl-flex-col-2 {
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-2 {
     grid-column: span 1 / span 1;
   }
-  .xl-flex-grid-col-1 > .xl-flex-col-3 {
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-3 {
     grid-column: span 1 / span 1;
   }
-  .xl-flex-grid-col-1 > .xl-flex-col-4 {
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-4 {
     grid-column: span 1 / span 1;
   }
-  .xl-flex-grid-col-1 > .xl-flex-col-5 {
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-5 {
     grid-column: span 1 / span 1;
   }
-  .xl-flex-grid-col-1 > .xl-flex-col-6 {
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-6 {
     grid-column: span 1 / span 1;
   }
-  .xl-flex-grid-col-1 > .xl-flex-col-7 {
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-7 {
     grid-column: span 1 / span 1;
   }
-  .xl-flex-grid-col-1 > .xl-flex-col-8 {
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-8 {
     grid-column: span 1 / span 1;
   }
-  .xl-flex-grid-col-1 > .xl-flex-col-9 {
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-9 {
     grid-column: span 1 / span 1;
   }
-  .xl-flex-grid-col-1 > .xl-flex-col-10 {
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-10 {
     grid-column: span 1 / span 1;
   }
-  .xl-flex-grid-col-1 > .xl-flex-col-11 {
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-11 {
     grid-column: span 1 / span 1;
   }
-  .xl-flex-grid-col-1 > .xl-flex-col-12 {
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-12 {
     grid-column: span 1 / span 1;
   }
 }