@rolster/styles-foundations 2.7.0 → 2.7.2

package/dist/styles.css

@@ -102,7 +102,15 @@ body {
   --rls-app-color-050: var(--rls-project-color-050, #ffffff);
   --rls-standard-color-950: #26303b;
   --rls-standard-color-900: #32384e;
-  --rls-standard-backdrop-900: rgba(50, 56, 78, 0.8);
+  --rls-standard-backdrop-900: rgba(50, 56, 78, 0.9);
+  --rls-standard-backdrop-800: rgba(50, 56, 78, 0.8);
+  --rls-standard-backdrop-700: rgba(50, 56, 78, 0.7);
+  --rls-standard-backdrop-600: rgba(50, 56, 78, 0.6);
+  --rls-standard-backdrop-500: rgba(50, 56, 78, 0.5);
+  --rls-standard-backdrop-400: rgba(50, 56, 78, 0.4);
+  --rls-standard-backdrop-300: rgba(50, 56, 78, 0.3);
+  --rls-standard-backdrop-200: rgba(50, 56, 78, 0.2);
+  --rls-standard-backdrop-100: rgba(50, 56, 78, 0.1);
   --rls-standard-color-800: #3f4661;
   --rls-standard-color-700: #515a7d;
   --rls-standard-skeleton-500: rgba(81, 90, 125, 0.5);
@@ -147,7 +155,15 @@ body {
   );
   --rls-primary-color-950: #0b2446;
   --rls-primary-color-900: #103a6a;
-  --rls-primary-backdrop-900: rgba(16, 58, 106, 0.8);
+  --rls-primary-backdrop-900: rgba(16, 58, 106, 0.9);
+  --rls-primary-backdrop-800: rgba(16, 58, 106, 0.8);
+  --rls-primary-backdrop-700: rgba(16, 58, 106, 0.7);
+  --rls-primary-backdrop-600: rgba(16, 58, 106, 0.6);
+  --rls-primary-backdrop-500: rgba(16, 58, 106, 0.5);
+  --rls-primary-backdrop-400: rgba(16, 58, 106, 0.4);
+  --rls-primary-backdrop-300: rgba(16, 58, 106, 0.3);
+  --rls-primary-backdrop-200: rgba(16, 58, 106, 0.2);
+  --rls-primary-backdrop-100: rgba(16, 58, 106, 0.1);
   --rls-primary-color-800: #0c4380;
   --rls-primary-color-700: #094e9b;
   --rls-primary-skeleton-500: rgba(9, 78, 155, 0.5);
@@ -191,7 +207,15 @@ body {
   );
   --rls-secondary-color-950: #003027;
   --rls-secondary-color-900: #005544;
-  --rls-secondary-backdrop-900: rgba(0, 85, 68, 0.8);
+  --rls-secondary-backdrop-900: rgba(0, 85, 68, 0.9);
+  --rls-secondary-backdrop-800: rgba(0, 85, 68, 0.8);
+  --rls-secondary-backdrop-700: rgba(0, 85, 68, 0.7);
+  --rls-secondary-backdrop-600: rgba(0, 85, 68, 0.6);
+  --rls-secondary-backdrop-500: rgba(0, 85, 68, 0.5);
+  --rls-secondary-backdrop-400: rgba(0, 85, 68, 0.4);
+  --rls-secondary-backdrop-300: rgba(0, 85, 68, 0.3);
+  --rls-secondary-backdrop-200: rgba(0, 85, 68, 0.2);
+  --rls-secondary-backdrop-100: rgba(0, 85, 68, 0.1);
   --rls-secondary-color-800: #006751;
   --rls-secondary-color-700: #008365;
   --rls-secondary-skeleton-500: rgba(0, 131, 101, 0.5);
@@ -236,7 +260,15 @@ body {
   );
   --rls-tertiary-color-950: #460404;
   --rls-tertiary-color-900: #82100c;
-  --rls-tertiary-backdrop-900: rgba(130, 16, 12, 0.8);
+  --rls-tertiary-backdrop-900: rgba(130, 16, 12, 0.9);
+  --rls-tertiary-backdrop-800: rgba(130, 16, 12, 0.8);
+  --rls-tertiary-backdrop-700: rgba(130, 16, 12, 0.7);
+  --rls-tertiary-backdrop-600: rgba(130, 16, 12, 0.6);
+  --rls-tertiary-backdrop-500: rgba(130, 16, 12, 0.5);
+  --rls-tertiary-backdrop-400: rgba(130, 16, 12, 0.4);
+  --rls-tertiary-backdrop-300: rgba(130, 16, 12, 0.3);
+  --rls-tertiary-backdrop-200: rgba(130, 16, 12, 0.2);
+  --rls-tertiary-backdrop-100: rgba(130, 16, 12, 0.1);
   --rls-tertiary-color-800: #a1100b;
   --rls-tertiary-color-700: #cc1102;
   --rls-tertiary-skeleton-500: rgba(204, 17, 2, 0.5);
@@ -281,7 +313,15 @@ body {
   );
   --rls-success-color-950: #012d22;
   --rls-success-color-900: #04503b;
-  --rls-success-backdrop-900: rgba(4, 80, 59, 0.8);
+  --rls-success-backdrop-900: rgba(4, 80, 59, 0.9);
+  --rls-success-backdrop-800: rgba(4, 80, 59, 0.8);
+  --rls-success-backdrop-700: rgba(4, 80, 59, 0.7);
+  --rls-success-backdrop-600: rgba(4, 80, 59, 0.6);
+  --rls-success-backdrop-500: rgba(4, 80, 59, 0.5);
+  --rls-success-backdrop-400: rgba(4, 80, 59, 0.4);
+  --rls-success-backdrop-300: rgba(4, 80, 59, 0.3);
+  --rls-success-backdrop-200: rgba(4, 80, 59, 0.2);
+  --rls-success-backdrop-100: rgba(4, 80, 59, 0.1);
   --rls-success-color-800: #046146;
   --rls-success-color-700: #017b56;
   --rls-success-skeleton-500: rgba(1, 123, 86, 0.5);
@@ -325,7 +365,15 @@ body {
   );
   --rls-info-color-950: #063852;
   --rls-info-color-900: #085172;
-  --rls-info-backdrop-900: rgba(8, 81, 114, 0.8);
+  --rls-info-backdrop-900: rgba(8, 81, 114, 0.9);
+  --rls-info-backdrop-800: rgba(8, 81, 114, 0.8);
+  --rls-info-backdrop-700: rgba(8, 81, 114, 0.7);
+  --rls-info-backdrop-600: rgba(8, 81, 114, 0.6);
+  --rls-info-backdrop-500: rgba(8, 81, 114, 0.5);
+  --rls-info-backdrop-400: rgba(8, 81, 114, 0.4);
+  --rls-info-backdrop-300: rgba(8, 81, 114, 0.3);
+  --rls-info-backdrop-200: rgba(8, 81, 114, 0.2);
+  --rls-info-backdrop-100: rgba(8, 81, 114, 0.1);
   --rls-info-color-800: #02628a;
   --rls-info-color-700: #0075a7;
   --rls-info-skeleton-500: rgba(0, 117, 167, 0.5);
@@ -369,7 +417,15 @@ body {
   );
   --rls-warning-color-950: #411607;
   --rls-warning-color-900: #722f15;
-  --rls-warning-backdrop-900: rgba(114, 47, 21, 0.8);
+  --rls-warning-backdrop-900: rgba(114, 47, 21, 0.9);
+  --rls-warning-backdrop-800: rgba(114, 47, 21, 0.8);
+  --rls-warning-backdrop-700: rgba(114, 47, 21, 0.7);
+  --rls-warning-backdrop-600: rgba(114, 47, 21, 0.6);
+  --rls-warning-backdrop-500: rgba(114, 47, 21, 0.5);
+  --rls-warning-backdrop-400: rgba(114, 47, 21, 0.4);
+  --rls-warning-backdrop-300: rgba(114, 47, 21, 0.3);
+  --rls-warning-backdrop-200: rgba(114, 47, 21, 0.2);
+  --rls-warning-backdrop-100: rgba(114, 47, 21, 0.1);
   --rls-warning-color-800: #8a3816;
   --rls-warning-color-700: #aa4713;
   --rls-warning-skeleton-500: rgba(170, 71, 19, 0.5);
@@ -413,7 +469,15 @@ body {
   );
   --rls-danger-color-950: #4b0404;
   --rls-danger-color-900: #881415;
-  --rls-danger-backdrop-900: rgba(136, 20, 21, 0.8);
+  --rls-danger-backdrop-900: rgba(136, 20, 21, 0.9);
+  --rls-danger-backdrop-800: rgba(136, 20, 21, 0.8);
+  --rls-danger-backdrop-700: rgba(136, 20, 21, 0.7);
+  --rls-danger-backdrop-600: rgba(136, 20, 21, 0.6);
+  --rls-danger-backdrop-500: rgba(136, 20, 21, 0.5);
+  --rls-danger-backdrop-400: rgba(136, 20, 21, 0.4);
+  --rls-danger-backdrop-300: rgba(136, 20, 21, 0.3);
+  --rls-danger-backdrop-200: rgba(136, 20, 21, 0.2);
+  --rls-danger-backdrop-100: rgba(136, 20, 21, 0.1);
   --rls-danger-color-800: #a50f10;
   --rls-danger-color-700: #c80d0e;
   --rls-danger-skeleton-500: rgba(200, 13, 14, 0.5);
@@ -457,7 +521,15 @@ body {
   );
   --rls-berry-color-950: #430e1e;
   --rls-berry-color-900: #78233f;
-  --rls-berry-backdrop-900: rgba(120, 35, 63, 0.8);
+  --rls-berry-backdrop-900: rgba(120, 35, 63, 0.9);
+  --rls-berry-backdrop-800: rgba(120, 35, 63, 0.8);
+  --rls-berry-backdrop-700: rgba(120, 35, 63, 0.7);
+  --rls-berry-backdrop-600: rgba(120, 35, 63, 0.6);
+  --rls-berry-backdrop-500: rgba(120, 35, 63, 0.5);
+  --rls-berry-backdrop-400: rgba(120, 35, 63, 0.4);
+  --rls-berry-backdrop-300: rgba(120, 35, 63, 0.3);
+  --rls-berry-backdrop-200: rgba(120, 35, 63, 0.2);
+  --rls-berry-backdrop-100: rgba(120, 35, 63, 0.1);
   --rls-berry-color-800: #8c2543;
   --rls-berry-color-700: #a7294a;
   --rls-berry-skeleton-500: rgba(167, 41, 74, 0.5);
@@ -501,7 +573,15 @@ body {
   );
   --rls-ross-color-950: #500119;
   --rls-ross-color-900: #8f0c37;
-  --rls-ross-backdrop-900: rgba(143, 12, 55, 0.8);
+  --rls-ross-backdrop-900: rgba(143, 12, 55, 0.9);
+  --rls-ross-backdrop-800: rgba(143, 12, 55, 0.8);
+  --rls-ross-backdrop-700: rgba(143, 12, 55, 0.7);
+  --rls-ross-backdrop-600: rgba(143, 12, 55, 0.6);
+  --rls-ross-backdrop-500: rgba(143, 12, 55, 0.5);
+  --rls-ross-backdrop-400: rgba(143, 12, 55, 0.4);
+  --rls-ross-backdrop-300: rgba(143, 12, 55, 0.3);
+  --rls-ross-backdrop-200: rgba(143, 12, 55, 0.2);
+  --rls-ross-backdrop-100: rgba(143, 12, 55, 0.1);
   --rls-ross-color-800: #a80939;
   --rls-ross-color-700: #c8083b;
   --rls-ross-skeleton-500: rgba(200, 8, 59, 0.5);
@@ -545,7 +625,15 @@ body {
   );
   --rls-hope-color-950: #02312c;
   --rls-hope-color-900: #105146;
-  --rls-hope-backdrop-900: rgba(16, 81, 70, 0.8);
+  --rls-hope-backdrop-900: rgba(16, 81, 70, 0.9);
+  --rls-hope-backdrop-800: rgba(16, 81, 70, 0.8);
+  --rls-hope-backdrop-700: rgba(16, 81, 70, 0.7);
+  --rls-hope-backdrop-600: rgba(16, 81, 70, 0.6);
+  --rls-hope-backdrop-500: rgba(16, 81, 70, 0.5);
+  --rls-hope-backdrop-400: rgba(16, 81, 70, 0.4);
+  --rls-hope-backdrop-300: rgba(16, 81, 70, 0.3);
+  --rls-hope-backdrop-200: rgba(16, 81, 70, 0.2);
+  --rls-hope-backdrop-100: rgba(16, 81, 70, 0.1);
   --rls-hope-color-800: #0d6255;
   --rls-hope-color-700: #0a7b68;
   --rls-hope-skeleton-500: rgba(10, 123, 104, 0.5);
@@ -589,7 +677,15 @@ body {
   );
   --rls-mountains-color-950: #161d18;
   --rls-mountains-color-900: #2c352f;
-  --rls-mountains-backdrop-900: rgba(44, 53, 47, 0.8);
+  --rls-mountains-backdrop-900: rgba(44, 53, 47, 0.9);
+  --rls-mountains-backdrop-800: rgba(44, 53, 47, 0.8);
+  --rls-mountains-backdrop-700: rgba(44, 53, 47, 0.7);
+  --rls-mountains-backdrop-600: rgba(44, 53, 47, 0.6);
+  --rls-mountains-backdrop-500: rgba(44, 53, 47, 0.5);
+  --rls-mountains-backdrop-400: rgba(44, 53, 47, 0.4);
+  --rls-mountains-backdrop-300: rgba(44, 53, 47, 0.3);
+  --rls-mountains-backdrop-200: rgba(44, 53, 47, 0.2);
+  --rls-mountains-backdrop-100: rgba(44, 53, 47, 0.1);
   --rls-mountains-color-800: #323d36;
   --rls-mountains-color-700: #3b4a41;
   --rls-mountains-skeleton-500: rgba(59, 74, 65, 0.5);
@@ -634,7 +730,15 @@ body {
   );
   --rls-amaizing-color-950: #3f133f;
   --rls-amaizing-color-900: #632c63;
-  --rls-amaizing-backdrop-900: rgba(99, 44, 99, 0.8);
+  --rls-amaizing-backdrop-900: rgba(99, 44, 99, 0.9);
+  --rls-amaizing-backdrop-800: rgba(99, 44, 99, 0.8);
+  --rls-amaizing-backdrop-700: rgba(99, 44, 99, 0.7);
+  --rls-amaizing-backdrop-600: rgba(99, 44, 99, 0.6);
+  --rls-amaizing-backdrop-500: rgba(99, 44, 99, 0.5);
+  --rls-amaizing-backdrop-400: rgba(99, 44, 99, 0.4);
+  --rls-amaizing-backdrop-300: rgba(99, 44, 99, 0.3);
+  --rls-amaizing-backdrop-200: rgba(99, 44, 99, 0.2);
+  --rls-amaizing-backdrop-100: rgba(99, 44, 99, 0.1);
   --rls-amaizing-color-800: #763177;
   --rls-amaizing-color-700: #8e3a91;
   --rls-amaizing-skeleton-500: rgba(142, 58, 145, 0.5);
@@ -679,7 +783,15 @@ body {
   );
   --rls-purple-color-950: #201f47;
   --rls-purple-color-900: #35347b;
-  --rls-purple-backdrop-900: rgba(53, 52, 123, 0.8);
+  --rls-purple-backdrop-900: rgba(53, 52, 123, 0.9);
+  --rls-purple-backdrop-800: rgba(53, 52, 123, 0.8);
+  --rls-purple-backdrop-700: rgba(53, 52, 123, 0.7);
+  --rls-purple-backdrop-600: rgba(53, 52, 123, 0.6);
+  --rls-purple-backdrop-500: rgba(53, 52, 123, 0.5);
+  --rls-purple-backdrop-400: rgba(53, 52, 123, 0.4);
+  --rls-purple-backdrop-300: rgba(53, 52, 123, 0.3);
+  --rls-purple-backdrop-200: rgba(53, 52, 123, 0.2);
+  --rls-purple-backdrop-100: rgba(53, 52, 123, 0.1);
   --rls-purple-color-800: #3c399a;
   --rls-purple-color-700: #4843bf;
   --rls-purple-skeleton-500: rgba(72, 67, 191, 0.5);
@@ -723,7 +835,15 @@ body {
   );
   --rls-amber-color-950: #40150a;
   --rls-amber-color-900: #772c17;
-  --rls-amber-backdrop-900: rgba(119, 44, 23, 0.8);
+  --rls-amber-backdrop-900: rgba(119, 44, 23, 0.9);
+  --rls-amber-backdrop-800: rgba(119, 44, 23, 0.8);
+  --rls-amber-backdrop-700: rgba(119, 44, 23, 0.7);
+  --rls-amber-backdrop-600: rgba(119, 44, 23, 0.6);
+  --rls-amber-backdrop-500: rgba(119, 44, 23, 0.5);
+  --rls-amber-backdrop-400: rgba(119, 44, 23, 0.4);
+  --rls-amber-backdrop-300: rgba(119, 44, 23, 0.3);
+  --rls-amber-backdrop-200: rgba(119, 44, 23, 0.2);
+  --rls-amber-backdrop-100: rgba(119, 44, 23, 0.1);
   --rls-amber-color-800: #943418;
   --rls-amber-color-700: #ba4014;
   --rls-amber-skeleton-500: rgba(186, 64, 20, 0.5);
@@ -767,7 +887,15 @@ body {
   );
   --rls-smartness-color-950: #321816;
   --rls-smartness-color-900: #5a302d;
-  --rls-smartness-backdrop-900: rgba(90, 48, 45, 0.8);
+  --rls-smartness-backdrop-900: rgba(90, 48, 45, 0.9);
+  --rls-smartness-backdrop-800: rgba(90, 48, 45, 0.8);
+  --rls-smartness-backdrop-700: rgba(90, 48, 45, 0.7);
+  --rls-smartness-backdrop-600: rgba(90, 48, 45, 0.6);
+  --rls-smartness-backdrop-500: rgba(90, 48, 45, 0.5);
+  --rls-smartness-backdrop-400: rgba(90, 48, 45, 0.4);
+  --rls-smartness-backdrop-300: rgba(90, 48, 45, 0.3);
+  --rls-smartness-backdrop-200: rgba(90, 48, 45, 0.2);
+  --rls-smartness-backdrop-100: rgba(90, 48, 45, 0.1);
   --rls-smartness-color-800: #6c3934;
   --rls-smartness-color-700: #83453a;
   --rls-smartness-skeleton-500: rgba(131, 69, 58, 0.5);
@@ -812,7 +940,15 @@ body {
   );
   --rls-obsidian-color-950: #29221f;
   --rls-obsidian-color-900: #4a3f39;
-  --rls-obsidian-backdrop-900: rgba(74, 63, 57, 0.8);
+  --rls-obsidian-backdrop-900: rgba(74, 63, 57, 0.9);
+  --rls-obsidian-backdrop-800: rgba(74, 63, 57, 0.8);
+  --rls-obsidian-backdrop-700: rgba(74, 63, 57, 0.7);
+  --rls-obsidian-backdrop-600: rgba(74, 63, 57, 0.6);
+  --rls-obsidian-backdrop-500: rgba(74, 63, 57, 0.5);
+  --rls-obsidian-backdrop-400: rgba(74, 63, 57, 0.4);
+  --rls-obsidian-backdrop-300: rgba(74, 63, 57, 0.3);
+  --rls-obsidian-backdrop-200: rgba(74, 63, 57, 0.2);
+  --rls-obsidian-backdrop-100: rgba(74, 63, 57, 0.1);
   --rls-obsidian-color-800: #54483f;
   --rls-obsidian-color-700: #625346;
   --rls-obsidian-skeleton-500: rgba(98, 83, 70, 0.5);
@@ -1568,6 +1704,7 @@ body {
 }
 body {
   --rls-app-shadow-color: rgba(173, 186, 230, 0.6);
+  --rls-z-index-2: 1;
   --rls-z-index-2: 2;
   --rls-z-index-4: 4;
   --rls-z-index-6: 6;
@@ -1579,7 +1716,8 @@ body {
   --rls-app-shadow-1: 0px 4px 2px -2px rgba(173, 186, 230, 0.02);
   --rls-app-shadow-2: 0px 4px 8px -2px rgba(173, 186, 230, 0.04);
   --rls-app-shadow-3: 0px 2px 4px -2px rgba(173, 186, 230, 0.08);
-  --rls-app-shadow-4: 0px 4px 8px -6px rgba(173, 186, 230, 0.03),
+  --rls-app-shadow-4:
+    0px 4px 8px -6px rgba(173, 186, 230, 0.03),
     0px 16px 8px -4px rgba(173, 186, 230, 0.03);
   --rls-app-shadow-5: 0px 8px 24px -4px rgba(173, 186, 230, 0.08);
   --rls-app-shadow-6: 0px 8px 24px -4px rgba(173, 186, 230, 0.12);
@@ -1624,7 +1762,8 @@ body {
   --rls-app-shadow-1: 0px 4px 2px -2px rgba(50, 44, 47, 0.02);
   --rls-app-shadow-2: 0px 4px 8px -2px rgba(50, 44, 47, 0.04);
   --rls-app-shadow-3: 0px 2px 4px -2px rgba(50, 44, 47, 0.08);
-  --rls-app-shadow-4: 0px 4px 8px -6px rgba(50, 44, 47, 0.03),
+  --rls-app-shadow-4:
+    0px 4px 8px -6px rgba(50, 44, 47, 0.03),
     0px 16px 8px -4px rgba(50, 44, 47, 0.03);
   --rls-app-shadow-5: 0px 8px 24px -4px rgba(50, 44, 47, 0.08);
   --rls-app-shadow-6: 0px 8px 24px -4px rgba(50, 44, 47, 0.12);
@@ -3730,8 +3869,9 @@ body {
   --rls-font-weight-black: 900;
 }
 :root {
-  --rls-app-font-family: -rolster-system-font, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, Helvetica;
+  --rls-app-font-family:
+    -rolster-system-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Helvetica;
 }
 html {
   font-size: var(--rls-app-font-size, 2px);
@@ -3902,1045 +4042,987 @@ p {
   margin: 0rem;
   font-weight: var(--rls-font-weight-medium);
 }
-body {
-  --flex-grid-12-gap: 0rem;
-  --flex-grid-8-gap: 0rem;
-  --flex-grid-6-gap: 0rem;
-  --flex-grid-4-gap: 0rem;
-  --flex-grid-12-col-2: 0rem;
-  --flex-grid-12-col-3: 0rem;
-  --flex-grid-12-col-4: 0rem;
-  --flex-grid-12-col-6: 0rem;
-  --flex-grid-12-col-8: 0rem;
-  --flex-grid-8-col-2: 0rem;
-  --flex-grid-8-col-3: 0rem;
-  --flex-grid-8-col-4: 0rem;
-  --flex-grid-8-col-6: 0rem;
-  --flex-grid-6-col-2: 0rem;
-  --flex-grid-6-col-3: 0rem;
-  --flex-grid-6-col-4: 0rem;
-  --flex-grid-4-col-2: 0rem;
-  --flex-grid-4-col-3: 0rem;
-}
-.xs-grid-8 {
+.rls-flex-xs-grid-col-12 {
+  --rls-grid-columns: 12;
+}
+.rls-flex-xs-grid-col-8 {
+  --rls-grid-columns: 8;
+}
+.rls-flex-xs-grid-col-6 {
+  --rls-grid-columns: 6;
+}
+.rls-flex-xs-grid-col-4 {
+  --rls-grid-columns: 4;
+}
+.rls-flex-xs-grid-col-2 {
+  --rls-grid-columns: 2;
+}
+.rls-flex-xs-grid-col-1 {
+  --rls-grid-columns: 1;
+}
+.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;
+}
+.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;
+}
+.rls-flex-xs-grid-8 {
   gap: var(--rls-sizing-x4);
 }
-.xs-grid-12 {
-  display: grid;
+.rls-flex-xs-grid-12 {
   gap: var(--rls-sizing-x6);
 }
-.xs-grid-16 {
-  display: grid;
+.rls-flex-xs-grid-16 {
   gap: var(--rls-sizing-x8);
 }
-.xs-grid-col-12 {
-  grid-template-columns: repeat(12, 1fr);
+.rls-flex-xs-col-1 {
+  grid-column: span 1 / span 1;
 }
-.xs-grid-col-8 {
-  grid-template-columns: repeat(8, 1fr);
+.rls-flex-xs-col-2 {
+  grid-column: span 2 / span 2;
 }
-.xs-grid-col-6 {
-  grid-template-columns: repeat(6, 1fr);
+.rls-flex-xs-col-3 {
+  grid-column: span 3 / span 3;
 }
-.xs-grid-col-4 {
-  grid-template-columns: repeat(4, 1fr);
+.rls-flex-xs-col-4 {
+  grid-column: span 4 / span 4;
 }
-.xs-grid-col-2 {
-  grid-template-columns: repeat(2, 1fr);
+.rls-flex-xs-col-5 {
+  grid-column: span 5 / span 5;
 }
-.xs-grid-col-1 {
-  grid-template-columns: repeat(1, 1fr);
+.rls-flex-xs-col-6 {
+  grid-column: span 6 / span 6;
 }
-@media screen and (min-width: 360px) {
-  .sm-grid-8 {
-    display: grid;
-    gap: var(--rls-sizing-x4);
-  }
-  .sm-grid-12 {
-    display: grid;
-    gap: var(--rls-sizing-x6);
-  }
-  .sm-grid-16 {
-    display: grid;
-    gap: var(--rls-sizing-x8);
-  }
-  .sm-grid-col-12 {
-    grid-template-columns: repeat(12, 1fr);
-  }
-  .sm-grid-col-8 {
-    grid-template-columns: repeat(8, 1fr);
-  }
-  .sm-grid-col-6 {
-    grid-template-columns: repeat(6, 1fr);
-  }
-  .sm-grid-col-4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-  .sm-grid-col-2 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .sm-grid-col-1 {
-    grid-template-columns: repeat(1, 1fr);
-  }
+.rls-flex-xs-col-7 {
+  grid-column: span 7 / span 7;
 }
-@media screen and (min-width: 640px) {
-  .md-grid-8 {
-    display: grid;
-    gap: var(--rls-sizing-x4);
-  }
-  .md-grid-12 {
-    display: grid;
-    gap: var(--rls-sizing-x6);
-  }
-  .md-grid-16 {
-    display: grid;
-    gap: var(--rls-sizing-x8);
-  }
-  .md-grid-col-12 {
-    grid-template-columns: repeat(12, 1fr);
-  }
-  .md-grid-col-8 {
-    grid-template-columns: repeat(8, 1fr);
-  }
-  .md-grid-col-6 {
-    grid-template-columns: repeat(6, 1fr);
-  }
-  .md-grid-col-4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-  .md-grid-col-2 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .md-grid-col-1 {
-    grid-template-columns: repeat(1, 1fr);
-  }
+.rls-flex-xs-col-8 {
+  grid-column: span 8 / span 8;
 }
-@media screen and (min-width: 960px) {
-  .lg-grid-8 {
-    display: grid;
-    gap: var(--rls-sizing-x4);
-  }
-  .lg-grid-12 {
-    display: grid;
-    gap: var(--rls-sizing-x6);
-  }
-  .lg-grid-16 {
-    display: grid;
-    gap: var(--rls-sizing-x8);
-  }
-  .lg-grid-col-12 {
-    grid-template-columns: repeat(12, 1fr);
-  }
-  .lg-grid-col-8 {
-    grid-template-columns: repeat(8, 1fr);
-  }
-  .lg-grid-col-6 {
-    grid-template-columns: repeat(6, 1fr);
-  }
-  .lg-grid-col-4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-  .lg-grid-col-2 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .lg-grid-col-1 {
-    grid-template-columns: repeat(1, 1fr);
-  }
+.rls-flex-xs-col-9 {
+  grid-column: span 9 / span 9;
 }
-@media screen and (min-width: 1280px) {
-  .xl-grid-8 {
-    display: grid;
-    gap: var(--rls-sizing-x4);
-  }
-  .xl-grid-12 {
-    display: grid;
-    gap: var(--rls-sizing-x6);
-  }
-  .xl-grid-16 {
-    display: grid;
-    gap: var(--rls-sizing-x8);
-  }
-  .xl-grid-col-12 {
-    grid-template-columns: repeat(12, 1fr);
-  }
-  .xl-grid-col-8 {
-    grid-template-columns: repeat(8, 1fr);
-  }
-  .xl-grid-col-6 {
-    grid-template-columns: repeat(6, 1fr);
-  }
-  .xl-grid-col-4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-  .xl-grid-col-2 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .xl-grid-col-1 {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}
-.xs-flex-grid-8 {
-  --flex-grid-12-gap: 3.6672rem;
-  --flex-grid-8-gap: 28rem;
-  --flex-grid-6-gap: 3.336rem;
-  --flex-grid-4-gap: 3rem;
-  --flex-grid-12-col-2: 3.4rem;
-  --flex-grid-12-col-3: 3.1rem;
-  --flex-grid-12-col-4: 2.8rem;
-  --flex-grid-12-col-5: 2.8rem;
-  --flex-grid-12-col-6: 2.18rem;
-  --flex-grid-12-col-8: 3rem;
-  --flex-grid-8-col-2: 3.1rem;
-  --flex-grid-8-col-3: 2.6rem;
-  --flex-grid-8-col-4: 2.2rem;
-  --flex-grid-8-col-5: 2.2rem;
-  --flex-grid-8-col-6: 1.8rem;
-  --flex-grid-6-col-2: 2.82rem;
-  --flex-grid-6-col-3: 2.2rem;
-  --flex-grid-6-col-4: 1.7rem;
-  --flex-grid-6-col-5: 1.7rem;
-  --flex-grid-4-col-2: 2rem;
-  --flex-grid-4-col-3: 1rem;
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: var(--rls-sizing-x4);
+.rls-flex-xs-col-10 {
+  grid-column: span 10 / span 10;
 }
-.xs-flex-grid-12 {
-  --flex-grid-12-gap: 7.3125rem;
-  --flex-grid-8-gap: 7rem;
-  --flex-grid-6-gap: 6.6475rem;
-  --flex-grid-4-gap: 6rem;
-  --flex-grid-12-col-2: 6.624rem;
-  --flex-grid-12-col-3: 6rem;
-  --flex-grid-12-col-4: 5.38rem;
-  --flex-grid-12-col-5: 5.38rem;
-  --flex-grid-12-col-6: 4.1rem;
-  --flex-grid-12-col-8: 3rem;
-  --flex-grid-8-col-2: 6.182rem;
-  --flex-grid-8-col-3: 5.2rem;
-  --flex-grid-8-col-4: 4rem;
-  --flex-grid-8-col-5: 4rem;
-  --flex-grid-8-col-6: 2.2rem;
-  --flex-grid-6-col-2: 5.4rem;
-  --flex-grid-6-col-3: 4rem;
-  --flex-grid-6-col-4: 2.84rem;
-  --flex-grid-6-col-5: 2.84rem;
-  --flex-grid-4-col-2: 4rem;
-  --flex-grid-4-col-3: 2.2rem;
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: var(--rls-sizing-x6);
+.rls-flex-xs-col-11 {
+  grid-column: span 11 / span 11;
 }
-.xs-flex-grid-16 {
-  --flex-grid-12-gap: 7.3125rem;
-  --flex-grid-8-gap: 7rem;
-  --flex-grid-6-gap: 6.6475rem;
-  --flex-grid-4-gap: 6rem;
-  --flex-grid-12-col-2: 6.66rem;
-  --flex-grid-12-col-3: 6rem;
-  --flex-grid-12-col-4: 5.38rem;
-  --flex-grid-12-col-5: 5.38rem;
-  --flex-grid-12-col-6: 4.1rem;
-  --flex-grid-12-col-8: 3rem;
-  --flex-grid-8-col-2: 6.182rem;
-  --flex-grid-8-col-3: 5.2rem;
-  --flex-grid-8-col-4: 4rem;
-  --flex-grid-8-col-5: 4rem;
-  --flex-grid-8-col-6: 2.2rem;
-  --flex-grid-6-col-2: 5.4rem;
-  --flex-grid-6-col-3: 4rem;
-  --flex-grid-6-col-4: 2.84rem;
-  --flex-grid-6-col-5: 2.84rem;
-  --flex-grid-4-col-2: 4rem;
-  --flex-grid-4-col-3: 2.2rem;
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: var(--rls-sizing-x8);
+.rls-flex-xs-col-12 {
+  grid-column: span 12 / span 12;
 }
-.xs-flex-grid-col-4 > * {
-  width: calc(25% - var(--flex-grid-4-gap));
+.rls-flex-xs-grid-col-8 > .rls-flex-xs-col-9 {
+  grid-column: span 8 / span 8;
 }
-.xs-flex-grid-col-4 > *.xs-flex-col-1 {
-  width: calc(25% - var(--flex-grid-4-gap));
+.rls-flex-xs-grid-col-8 > .rls-flex-xs-col-10 {
+  grid-column: span 8 / span 8;
 }
-.xs-flex-grid-col-4 > *.xs-flex-col-2 {
-  width: calc(50% - var(--flex-grid-4-col-2));
+.rls-flex-xs-grid-col-8 > .rls-flex-xs-col-11 {
+  grid-column: span 8 / span 8;
 }
-.xs-flex-grid-col-4 > *.xs-flex-col-3 {
-  width: calc(75% - var(--flex-grid-4-col-3));
+.rls-flex-xs-grid-col-8 > .rls-flex-xs-col-12 {
+  grid-column: span 8 / span 8;
 }
-.xs-flex-grid-col-4 > *.xs-flex-col-4,
-.xs-flex-grid-col-4 > *.xs-flex-col-6,
-.xs-flex-grid-col-4 > *.xs-flex-col-8,
-.xs-flex-grid-col-4 > *.xs-flex-col-12 {
-  width: 100%;
+.rls-flex-xs-grid-col-6 > .rls-flex-xs-col-7 {
+  grid-column: span 6 / span 6;
 }
-.xs-flex-grid-col-6 > * {
-  width: calc(16.66% - var(--flex-grid-6-gap));
+.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-1 {
-  width: calc(16.66% - var(--flex-grid-6-gap));
+.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-2 {
-  width: calc(33.34% - var(--flex-grid-6-col-2));
+.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-3 {
-  width: calc(50% - var(--flex-grid-6-col-3));
+.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-4 {
-  width: calc(66.67% - var(--flex-grid-6-col-4));
+.rls-flex-xs-grid-col-6 > .rls-flex-xs-col-12 {
+  grid-column: span 6 / span 6;
 }
-.xs-flex-grid-col-6 > *.xs-flex-col-5 {
-  width: calc(83.34% - var(--flex-grid-6-col-5));
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-5 {
+  grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-6 > *.xs-flex-col-6,
-.xs-flex-grid-col-6 > *.xs-flex-col-8,
-.xs-flex-grid-col-6 > *.xs-flex-col-12 {
-  width: 100%;
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-6 {
+  grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-8 > * {
-  width: calc(12.5% - var(--flex-grid-8-gap));
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-7 {
+  grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-8 > *.xs-flex-col-1 {
-  width: calc(12.5% - var(--flex-grid-8-gap));
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-8 {
+  grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-8 > *.xs-flex-col-2 {
-  width: calc(25% - var(--flex-grid-8-col-2));
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-9 {
+  grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-8 > *.xs-flex-col-3 {
-  width: calc(37.5% - var(--flex-grid-8-col-3));
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-10 {
+  grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-8 > *.xs-flex-col-4 {
-  width: calc(50% - var(--flex-grid-8-col-4));
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-11 {
+  grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-8 > *.xs-flex-col-5 {
-  width: calc(62.75% - var(--flex-grid-8-col-5));
+.rls-flex-xs-grid-col-4 > .rls-flex-xs-col-12 {
+  grid-column: span 4 / span 4;
 }
-.xs-flex-grid-col-8 > *.xs-flex-col-6 {
-  width: calc(75% - var(--flex-grid-8-col-6));
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-3 {
+  grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-8 > *.xs-flex-col-8,
-.xs-flex-grid-col-8 > *.xs-flex-col-12 {
-  width: 100%;
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-4 {
+  grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-12 > * {
-  width: calc(8.33% - var(--flex-grid-12-gap));
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-5 {
+  grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-12 > *.xs-flex-col-1 {
-  width: calc(8.33% - var(--flex-grid-12-gap));
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-6 {
+  grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-12 > *.xs-flex-col-2 {
-  width: calc(16.66% - var(--flex-grid-12-col-2));
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-7 {
+  grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-12 > *.xs-flex-col-3 {
-  width: calc(25% - var(--flex-grid-12-col-3));
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-8 {
+  grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-12 > *.xs-flex-col-4 {
-  width: calc(33.33% - var(--flex-grid-12-col-4));
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-9 {
+  grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-12 > *.xs-flex-col-5 {
-  width: calc(41.66% - var(--flex-grid-12-col-5));
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-10 {
+  grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-12 > *.xs-flex-col-6 {
-  width: calc(50% - var(--flex-grid-12-col-6));
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-11 {
+  grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-12 > *.xs-flex-col-8 {
-  width: calc(66.66% - var(--flex-grid-12-col-8));
+.rls-flex-xs-grid-col-2 > .rls-flex-xs-col-12 {
+  grid-column: span 2 / span 2;
 }
-.xs-flex-grid-col-12 > *.xs-flex-col-12 {
-  width: 100%;
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-2 {
+  grid-column: span 1 / span 1;
+}
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-3 {
+  grid-column: span 1 / span 1;
+}
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-4 {
+  grid-column: span 1 / span 1;
+}
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-5 {
+  grid-column: span 1 / span 1;
+}
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-6 {
+  grid-column: span 1 / span 1;
+}
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-7 {
+  grid-column: span 1 / span 1;
+}
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-8 {
+  grid-column: span 1 / span 1;
+}
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-9 {
+  grid-column: span 1 / span 1;
+}
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-10 {
+  grid-column: span 1 / span 1;
+}
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-11 {
+  grid-column: span 1 / span 1;
 }
-@media screen and (min-width: 360px) {
-  .sm-flex-grid-8 {
-    --flex-grid-12-gap: 3.6672rem;
-    --flex-grid-8-gap: 28rem;
-    --flex-grid-6-gap: 3.336rem;
-    --flex-grid-4-gap: 3rem;
-    --flex-grid-12-col-2: 3.4rem;
-    --flex-grid-12-col-3: 3.1rem;
-    --flex-grid-12-col-4: 2.8rem;
-    --flex-grid-12-col-5: 2.8rem;
-    --flex-grid-12-col-6: 2.18rem;
-    --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 3.1rem;
-    --flex-grid-8-col-3: 2.6rem;
-    --flex-grid-8-col-4: 2.2rem;
-    --flex-grid-8-col-5: 2.2rem;
-    --flex-grid-8-col-6: 1.8rem;
-    --flex-grid-6-col-2: 2.82rem;
-    --flex-grid-6-col-3: 2.2rem;
-    --flex-grid-6-col-4: 1.7rem;
-    --flex-grid-6-col-5: 1.7rem;
-    --flex-grid-4-col-2: 2rem;
-    --flex-grid-4-col-3: 1rem;
-    display: inline-flex;
-    flex-wrap: wrap;
+.rls-flex-xs-grid-col-1 > .rls-flex-xs-col-12 {
+  grid-column: span 1 / span 1;
+}
+@media screen and (min-width: 420px) {
+  .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;
+  }
+  .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;
+  }
+  .rls-flex-sm-grid-8 {
     gap: var(--rls-sizing-x4);
   }
-  .sm-flex-grid-12 {
-    --flex-grid-12-gap: 7.3125rem;
-    --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6.6475rem;
-    --flex-grid-4-gap: 6rem;
-    --flex-grid-12-col-2: 6.624rem;
-    --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5.38rem;
-    --flex-grid-12-col-5: 5.38rem;
-    --flex-grid-12-col-6: 4.1rem;
-    --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6.182rem;
-    --flex-grid-8-col-3: 5.2rem;
-    --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-5: 4rem;
-    --flex-grid-8-col-6: 2.2rem;
-    --flex-grid-6-col-2: 5.4rem;
-    --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2.84rem;
-    --flex-grid-6-col-5: 2.84rem;
-    --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2.2rem;
-    display: inline-flex;
-    flex-wrap: wrap;
+  .rls-flex-sm-grid-12 {
     gap: var(--rls-sizing-x6);
   }
-  .sm-flex-grid-16 {
-    --flex-grid-12-gap: 7.3125rem;
-    --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6.6475rem;
-    --flex-grid-4-gap: 6rem;
-    --flex-grid-12-col-2: 6.66rem;
-    --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5.38rem;
-    --flex-grid-12-col-5: 5.38rem;
-    --flex-grid-12-col-6: 4.1rem;
-    --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6.182rem;
-    --flex-grid-8-col-3: 5.2rem;
-    --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-5: 4rem;
-    --flex-grid-8-col-6: 2.2rem;
-    --flex-grid-6-col-2: 5.4rem;
-    --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2.84rem;
-    --flex-grid-6-col-5: 2.84rem;
-    --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2.2rem;
-    display: inline-flex;
-    flex-wrap: wrap;
+  .rls-flex-sm-grid-16 {
     gap: var(--rls-sizing-x8);
   }
-  .sm-flex-grid-col-4 > * {
-    width: calc(25% - var(--flex-grid-4-gap));
+  .rls-flex-sm-col-1 {
+    grid-column: span 1 / span 1;
   }
-  .sm-flex-grid-col-4 > *.sm-flex-col-1 {
-    width: calc(25% - var(--flex-grid-4-gap));
+  .rls-flex-sm-col-2 {
+    grid-column: span 2 / span 2;
   }
-  .sm-flex-grid-col-4 > *.sm-flex-col-2 {
-    width: calc(50% - var(--flex-grid-4-col-2));
+  .rls-flex-sm-col-3 {
+    grid-column: span 3 / span 3;
   }
-  .sm-flex-grid-col-4 > *.sm-flex-col-3 {
-    width: calc(75% - var(--flex-grid-4-col-3));
+  .rls-flex-sm-col-4 {
+    grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-4 > *.sm-flex-col-4,
-  .sm-flex-grid-col-4 > *.sm-flex-col-6,
-  .sm-flex-grid-col-4 > *.sm-flex-col-8,
-  .sm-flex-grid-col-4 > *.sm-flex-col-12 {
-    width: 100%;
+  .rls-flex-sm-col-5 {
+    grid-column: span 5 / span 5;
   }
-  .sm-flex-grid-col-6 > * {
-    width: calc(16.66% - var(--flex-grid-6-gap));
+  .rls-flex-sm-col-6 {
+    grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-6 > *.sm-flex-col-1 {
-    width: calc(16.66% - var(--flex-grid-6-gap));
+  .rls-flex-sm-col-7 {
+    grid-column: span 7 / span 7;
   }
-  .sm-flex-grid-col-6 > *.sm-flex-col-2 {
-    width: calc(33.34% - var(--flex-grid-6-col-2));
+  .rls-flex-sm-col-8 {
+    grid-column: span 8 / span 8;
   }
-  .sm-flex-grid-col-6 > *.sm-flex-col-3 {
-    width: calc(50% - var(--flex-grid-6-col-3));
+  .rls-flex-sm-col-9 {
+    grid-column: span 9 / span 9;
   }
-  .sm-flex-grid-col-6 > *.sm-flex-col-4 {
-    width: calc(66.67% - var(--flex-grid-6-col-4));
+  .rls-flex-sm-col-10 {
+    grid-column: span 10 / span 10;
   }
-  .sm-flex-grid-col-6 > *.sm-flex-col-5 {
-    width: calc(83.34% - var(--flex-grid-6-col-5));
+  .rls-flex-sm-col-11 {
+    grid-column: span 11 / span 11;
   }
-  .sm-flex-grid-col-6 > *.sm-flex-col-6,
-  .sm-flex-grid-col-6 > *.sm-flex-col-8,
-  .sm-flex-grid-col-6 > *.sm-flex-col-12 {
-    width: 100%;
+  .rls-flex-sm-col-12 {
+    grid-column: span 12 / span 12;
   }
-  .sm-flex-grid-col-8 > * {
-    width: calc(12.5% - var(--flex-grid-8-gap));
+  .rls-flex-sm-grid-col-8 > .rls-flex-sm-col-9 {
+    grid-column: span 8 / span 8;
   }
-  .sm-flex-grid-col-8 > *.sm-flex-col-1 {
-    width: calc(12.5% - var(--flex-grid-8-gap));
+  .rls-flex-sm-grid-col-8 > .rls-flex-sm-col-10 {
+    grid-column: span 8 / span 8;
   }
-  .sm-flex-grid-col-8 > *.sm-flex-col-2 {
-    width: calc(25% - var(--flex-grid-8-col-2));
+  .rls-flex-sm-grid-col-8 > .rls-flex-sm-col-11 {
+    grid-column: span 8 / span 8;
   }
-  .sm-flex-grid-col-8 > *.sm-flex-col-3 {
-    width: calc(37.5% - var(--flex-grid-8-col-3));
+  .rls-flex-sm-grid-col-8 > .rls-flex-sm-col-12 {
+    grid-column: span 8 / span 8;
   }
-  .sm-flex-grid-col-8 > *.sm-flex-col-4 {
-    width: calc(50% - var(--flex-grid-8-col-4));
+  .rls-flex-sm-grid-col-6 > .rls-flex-sm-col-7 {
+    grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-8 > *.sm-flex-col-5 {
-    width: calc(62.75% - var(--flex-grid-8-col-5));
+  .rls-flex-sm-grid-col-6 > .rls-flex-sm-col-8 {
+    grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-8 > *.sm-flex-col-6 {
-    width: calc(75% - var(--flex-grid-8-col-6));
+  .rls-flex-sm-grid-col-6 > .rls-flex-sm-col-9 {
+    grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-8 > *.sm-flex-col-8,
-  .sm-flex-grid-col-8 > *.sm-flex-col-12 {
-    width: 100%;
+  .rls-flex-sm-grid-col-6 > .rls-flex-sm-col-10 {
+    grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-12 > * {
-    width: calc(8.33% - var(--flex-grid-12-gap));
+  .rls-flex-sm-grid-col-6 > .rls-flex-sm-col-11 {
+    grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-12 > *.sm-flex-col-1 {
-    width: calc(8.33% - var(--flex-grid-12-gap));
+  .rls-flex-sm-grid-col-6 > .rls-flex-sm-col-12 {
+    grid-column: span 6 / span 6;
   }
-  .sm-flex-grid-col-12 > *.sm-flex-col-2 {
-    width: calc(16.66% - var(--flex-grid-12-col-2));
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-5 {
+    grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-12 > *.sm-flex-col-3 {
-    width: calc(25% - var(--flex-grid-12-col-3));
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-6 {
+    grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-12 > *.sm-flex-col-4 {
-    width: calc(33.33% - var(--flex-grid-12-col-4));
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-7 {
+    grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-12 > *.sm-flex-col-5 {
-    width: calc(41.66% - var(--flex-grid-12-col-5));
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-8 {
+    grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-12 > *.sm-flex-col-6 {
-    width: calc(50% - var(--flex-grid-12-col-6));
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-9 {
+    grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-12 > *.sm-flex-col-8 {
-    width: calc(66.66% - var(--flex-grid-12-col-8));
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-10 {
+    grid-column: span 4 / span 4;
   }
-  .sm-flex-grid-col-12 > *.sm-flex-col-12 {
-    width: 100%;
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-11 {
+    grid-column: span 4 / span 4;
+  }
+  .rls-flex-sm-grid-col-4 > .rls-flex-sm-col-12 {
+    grid-column: span 4 / span 4;
+  }
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-3 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-4 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-5 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-6 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-7 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-8 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-9 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-10 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-11 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-sm-grid-col-2 > .rls-flex-sm-col-12 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-2 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-3 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-4 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-5 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-6 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-7 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-8 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-9 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-10 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-11 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-sm-grid-col-1 > .rls-flex-sm-col-12 {
+    grid-column: span 1 / span 1;
   }
 }
-@media screen and (min-width: 640px) {
-  .md-flex-grid-8 {
-    --flex-grid-12-gap: 3.6672rem;
-    --flex-grid-8-gap: 28rem;
-    --flex-grid-6-gap: 3.336rem;
-    --flex-grid-4-gap: 3rem;
-    --flex-grid-12-col-2: 3.4rem;
-    --flex-grid-12-col-3: 3.1rem;
-    --flex-grid-12-col-4: 2.8rem;
-    --flex-grid-12-col-5: 2.8rem;
-    --flex-grid-12-col-6: 2.18rem;
-    --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 3.1rem;
-    --flex-grid-8-col-3: 2.6rem;
-    --flex-grid-8-col-4: 2.2rem;
-    --flex-grid-8-col-5: 2.2rem;
-    --flex-grid-8-col-6: 1.8rem;
-    --flex-grid-6-col-2: 2.82rem;
-    --flex-grid-6-col-3: 2.2rem;
-    --flex-grid-6-col-4: 1.7rem;
-    --flex-grid-6-col-5: 1.7rem;
-    --flex-grid-4-col-2: 2rem;
-    --flex-grid-4-col-3: 1rem;
-    display: inline-flex;
-    flex-wrap: wrap;
+@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;
+  }
+  .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;
+  }
+  .rls-flex-md-grid-8 {
     gap: var(--rls-sizing-x4);
   }
-  .md-flex-grid-12 {
-    --flex-grid-12-gap: 7.3125rem;
-    --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6.6475rem;
-    --flex-grid-4-gap: 6rem;
-    --flex-grid-12-col-2: 6.624rem;
-    --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5.38rem;
-    --flex-grid-12-col-5: 5.38rem;
-    --flex-grid-12-col-6: 4.1rem;
-    --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6.182rem;
-    --flex-grid-8-col-3: 5.2rem;
-    --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-5: 4rem;
-    --flex-grid-8-col-6: 2.2rem;
-    --flex-grid-6-col-2: 5.4rem;
-    --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2.84rem;
-    --flex-grid-6-col-5: 2.84rem;
-    --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2.2rem;
-    display: inline-flex;
-    flex-wrap: wrap;
+  .rls-flex-md-grid-12 {
     gap: var(--rls-sizing-x6);
   }
-  .md-flex-grid-16 {
-    --flex-grid-12-gap: 7.3125rem;
-    --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6.6475rem;
-    --flex-grid-4-gap: 6rem;
-    --flex-grid-12-col-2: 6.66rem;
-    --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5.38rem;
-    --flex-grid-12-col-5: 5.38rem;
-    --flex-grid-12-col-6: 4.1rem;
-    --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6.182rem;
-    --flex-grid-8-col-3: 5.2rem;
-    --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-5: 4rem;
-    --flex-grid-8-col-6: 2.2rem;
-    --flex-grid-6-col-2: 5.4rem;
-    --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2.84rem;
-    --flex-grid-6-col-5: 2.84rem;
-    --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2.2rem;
-    display: inline-flex;
-    flex-wrap: wrap;
+  .rls-flex-md-grid-16 {
     gap: var(--rls-sizing-x8);
   }
-  .md-flex-grid-col-4 > * {
-    width: calc(25% - var(--flex-grid-4-gap));
+  .rls-flex-md-col-1 {
+    grid-column: span 1 / span 1;
   }
-  .md-flex-grid-col-4 > *.md-flex-col-1 {
-    width: calc(25% - var(--flex-grid-4-gap));
+  .rls-flex-md-col-2 {
+    grid-column: span 2 / span 2;
   }
-  .md-flex-grid-col-4 > *.md-flex-col-2 {
-    width: calc(50% - var(--flex-grid-4-col-2));
+  .rls-flex-md-col-3 {
+    grid-column: span 3 / span 3;
   }
-  .md-flex-grid-col-4 > *.md-flex-col-3 {
-    width: calc(75% - var(--flex-grid-4-col-3));
+  .rls-flex-md-col-4 {
+    grid-column: span 4 / span 4;
   }
-  .md-flex-grid-col-4 > *.md-flex-col-4,
-  .md-flex-grid-col-4 > *.md-flex-col-6,
-  .md-flex-grid-col-4 > *.md-flex-col-8,
-  .md-flex-grid-col-4 > *.md-flex-col-12 {
-    width: 100%;
+  .rls-flex-md-col-5 {
+    grid-column: span 5 / span 5;
   }
-  .md-flex-grid-col-6 > * {
-    width: calc(16.66% - var(--flex-grid-6-gap));
+  .rls-flex-md-col-6 {
+    grid-column: span 6 / span 6;
   }
-  .md-flex-grid-col-6 > *.md-flex-col-1 {
-    width: calc(16.66% - var(--flex-grid-6-gap));
+  .rls-flex-md-col-7 {
+    grid-column: span 7 / span 7;
   }
-  .md-flex-grid-col-6 > *.md-flex-col-2 {
-    width: calc(33.34% - var(--flex-grid-6-col-2));
+  .rls-flex-md-col-8 {
+    grid-column: span 8 / span 8;
   }
-  .md-flex-grid-col-6 > *.md-flex-col-3 {
-    width: calc(50% - var(--flex-grid-6-col-3));
+  .rls-flex-md-col-9 {
+    grid-column: span 9 / span 9;
   }
-  .md-flex-grid-col-6 > *.md-flex-col-4 {
-    width: calc(66.67% - var(--flex-grid-6-col-4));
+  .rls-flex-md-col-10 {
+    grid-column: span 10 / span 10;
   }
-  .md-flex-grid-col-6 > *.md-flex-col-5 {
-    width: calc(83.34% - var(--flex-grid-6-col-5));
+  .rls-flex-md-col-11 {
+    grid-column: span 11 / span 11;
   }
-  .md-flex-grid-col-6 > *.md-flex-col-6,
-  .md-flex-grid-col-6 > *.md-flex-col-8,
-  .md-flex-grid-col-6 > *.md-flex-col-12 {
-    width: 100%;
+  .rls-flex-md-col-12 {
+    grid-column: span 12 / span 12;
   }
-  .md-flex-grid-col-8 > * {
-    width: calc(12.5% - var(--flex-grid-8-gap));
+  .rls-flex-md-grid-col-8 > .rls-flex-md-col-9 {
+    grid-column: span 8 / span 8;
   }
-  .md-flex-grid-col-8 > *.md-flex-col-1 {
-    width: calc(12.5% - var(--flex-grid-8-gap));
+  .rls-flex-md-grid-col-8 > .rls-flex-md-col-10 {
+    grid-column: span 8 / span 8;
   }
-  .md-flex-grid-col-8 > *.md-flex-col-2 {
-    width: calc(25% - var(--flex-grid-8-col-2));
+  .rls-flex-md-grid-col-8 > .rls-flex-md-col-11 {
+    grid-column: span 8 / span 8;
   }
-  .md-flex-grid-col-8 > *.md-flex-col-3 {
-    width: calc(37.5% - var(--flex-grid-8-col-3));
+  .rls-flex-md-grid-col-8 > .rls-flex-md-col-12 {
+    grid-column: span 8 / span 8;
   }
-  .md-flex-grid-col-8 > *.md-flex-col-4 {
-    width: calc(50% - var(--flex-grid-8-col-4));
+  .rls-flex-md-grid-col-6 > .rls-flex-md-col-7 {
+    grid-column: span 6 / span 6;
   }
-  .md-flex-grid-col-8 > *.md-flex-col-5 {
-    width: calc(62.75% - var(--flex-grid-8-col-5));
+  .rls-flex-md-grid-col-6 > .rls-flex-md-col-8 {
+    grid-column: span 6 / span 6;
   }
-  .md-flex-grid-col-8 > *.md-flex-col-6 {
-    width: calc(75% - var(--flex-grid-8-col-6));
+  .rls-flex-md-grid-col-6 > .rls-flex-md-col-9 {
+    grid-column: span 6 / span 6;
   }
-  .md-flex-grid-col-8 > *.md-flex-col-8,
-  .md-flex-grid-col-8 > *.md-flex-col-12 {
-    width: 100%;
+  .rls-flex-md-grid-col-6 > .rls-flex-md-col-10 {
+    grid-column: span 6 / span 6;
   }
-  .md-flex-grid-col-12 > * {
-    width: calc(8.33% - var(--flex-grid-12-gap));
+  .rls-flex-md-grid-col-6 > .rls-flex-md-col-11 {
+    grid-column: span 6 / span 6;
   }
-  .md-flex-grid-col-12 > *.md-flex-col-1 {
-    width: calc(8.33% - var(--flex-grid-12-gap));
+  .rls-flex-md-grid-col-6 > .rls-flex-md-col-12 {
+    grid-column: span 6 / span 6;
   }
-  .md-flex-grid-col-12 > *.md-flex-col-2 {
-    width: calc(16.66% - var(--flex-grid-12-col-2));
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-5 {
+    grid-column: span 4 / span 4;
   }
-  .md-flex-grid-col-12 > *.md-flex-col-3 {
-    width: calc(25% - var(--flex-grid-12-col-3));
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-6 {
+    grid-column: span 4 / span 4;
   }
-  .md-flex-grid-col-12 > *.md-flex-col-4 {
-    width: calc(33.33% - var(--flex-grid-12-col-4));
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-7 {
+    grid-column: span 4 / span 4;
   }
-  .md-flex-grid-col-12 > *.md-flex-col-5 {
-    width: calc(41.66% - var(--flex-grid-12-col-5));
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-8 {
+    grid-column: span 4 / span 4;
   }
-  .md-flex-grid-col-12 > *.md-flex-col-6 {
-    width: calc(50% - var(--flex-grid-12-col-6));
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-9 {
+    grid-column: span 4 / span 4;
   }
-  .md-flex-grid-col-12 > *.md-flex-col-8 {
-    width: calc(66.66% - var(--flex-grid-12-col-8));
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-10 {
+    grid-column: span 4 / span 4;
   }
-  .md-flex-grid-col-12 > *.md-flex-col-12 {
-    width: 100%;
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-11 {
+    grid-column: span 4 / span 4;
+  }
+  .rls-flex-md-grid-col-4 > .rls-flex-md-col-12 {
+    grid-column: span 4 / span 4;
+  }
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-3 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-4 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-5 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-6 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-7 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-8 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-9 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-10 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-11 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-md-grid-col-2 > .rls-flex-md-col-12 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-2 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-3 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-4 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-5 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-6 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-7 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-8 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-9 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-10 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-11 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-md-grid-col-1 > .rls-flex-md-col-12 {
+    grid-column: span 1 / span 1;
   }
 }
-@media screen and (min-width: 960px) {
-  .lg-flex-grid-8 {
-    --flex-grid-12-gap: 3.6672rem;
-    --flex-grid-8-gap: 28rem;
-    --flex-grid-6-gap: 3.336rem;
-    --flex-grid-4-gap: 3rem;
-    --flex-grid-12-col-2: 3.4rem;
-    --flex-grid-12-col-3: 3.1rem;
-    --flex-grid-12-col-4: 2.8rem;
-    --flex-grid-12-col-5: 2.8rem;
-    --flex-grid-12-col-6: 2.18rem;
-    --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 3.1rem;
-    --flex-grid-8-col-3: 2.6rem;
-    --flex-grid-8-col-4: 2.2rem;
-    --flex-grid-8-col-5: 2.2rem;
-    --flex-grid-8-col-6: 1.8rem;
-    --flex-grid-6-col-2: 2.82rem;
-    --flex-grid-6-col-3: 2.2rem;
-    --flex-grid-6-col-4: 1.7rem;
-    --flex-grid-6-col-5: 1.7rem;
-    --flex-grid-4-col-2: 2rem;
-    --flex-grid-4-col-3: 1rem;
-    display: inline-flex;
-    flex-wrap: wrap;
+@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;
+  }
+  .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;
+  }
+  .rls-flex-lg-grid-8 {
     gap: var(--rls-sizing-x4);
   }
-  .lg-flex-grid-12 {
-    --flex-grid-12-gap: 7.3125rem;
-    --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6.6475rem;
-    --flex-grid-4-gap: 6rem;
-    --flex-grid-12-col-2: 6.624rem;
-    --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5.38rem;
-    --flex-grid-12-col-5: 5.38rem;
-    --flex-grid-12-col-6: 4.1rem;
-    --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6.182rem;
-    --flex-grid-8-col-3: 5.2rem;
-    --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-5: 4rem;
-    --flex-grid-8-col-6: 2.2rem;
-    --flex-grid-6-col-2: 5.4rem;
-    --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2.84rem;
-    --flex-grid-6-col-5: 2.84rem;
-    --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2.2rem;
-    display: inline-flex;
-    flex-wrap: wrap;
+  .rls-flex-lg-grid-12 {
     gap: var(--rls-sizing-x6);
   }
-  .lg-flex-grid-16 {
-    --flex-grid-12-gap: 7.3125rem;
-    --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6.6475rem;
-    --flex-grid-4-gap: 6rem;
-    --flex-grid-12-col-2: 6.66rem;
-    --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5.38rem;
-    --flex-grid-12-col-5: 5.38rem;
-    --flex-grid-12-col-6: 4.1rem;
-    --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6.182rem;
-    --flex-grid-8-col-3: 5.2rem;
-    --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-5: 4rem;
-    --flex-grid-8-col-6: 2.2rem;
-    --flex-grid-6-col-2: 5.4rem;
-    --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2.84rem;
-    --flex-grid-6-col-5: 2.84rem;
-    --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2.2rem;
-    display: inline-flex;
-    flex-wrap: wrap;
+  .rls-flex-lg-grid-16 {
     gap: var(--rls-sizing-x8);
   }
-  .lg-flex-grid-col-4 > * {
-    width: calc(25% - var(--flex-grid-4-gap));
+  .rls-flex-lg-col-1 {
+    grid-column: span 1 / span 1;
   }
-  .lg-flex-grid-col-4 > *.lg-flex-col-1 {
-    width: calc(25% - var(--flex-grid-4-gap));
+  .rls-flex-lg-col-2 {
+    grid-column: span 2 / span 2;
   }
-  .lg-flex-grid-col-4 > *.lg-flex-col-2 {
-    width: calc(50% - var(--flex-grid-4-col-2));
+  .rls-flex-lg-col-3 {
+    grid-column: span 3 / span 3;
   }
-  .lg-flex-grid-col-4 > *.lg-flex-col-3 {
-    width: calc(75% - var(--flex-grid-4-col-3));
+  .rls-flex-lg-col-4 {
+    grid-column: span 4 / span 4;
   }
-  .lg-flex-grid-col-4 > *.lg-flex-col-4,
-  .lg-flex-grid-col-4 > *.lg-flex-col-6,
-  .lg-flex-grid-col-4 > *.lg-flex-col-8,
-  .lg-flex-grid-col-4 > *.lg-flex-col-12 {
-    width: 100%;
+  .rls-flex-lg-col-5 {
+    grid-column: span 5 / span 5;
   }
-  .lg-flex-grid-col-6 > * {
-    width: calc(16.66% - var(--flex-grid-6-gap));
+  .rls-flex-lg-col-6 {
+    grid-column: span 6 / span 6;
   }
-  .lg-flex-grid-col-6 > *.lg-flex-col-1 {
-    width: calc(16.66% - var(--flex-grid-6-gap));
+  .rls-flex-lg-col-7 {
+    grid-column: span 7 / span 7;
   }
-  .lg-flex-grid-col-6 > *.lg-flex-col-2 {
-    width: calc(33.34% - var(--flex-grid-6-col-2));
+  .rls-flex-lg-col-8 {
+    grid-column: span 8 / span 8;
   }
-  .lg-flex-grid-col-6 > *.lg-flex-col-3 {
-    width: calc(50% - var(--flex-grid-6-col-3));
+  .rls-flex-lg-col-9 {
+    grid-column: span 9 / span 9;
   }
-  .lg-flex-grid-col-6 > *.lg-flex-col-4 {
-    width: calc(66.67% - var(--flex-grid-6-col-4));
+  .rls-flex-lg-col-10 {
+    grid-column: span 10 / span 10;
   }
-  .lg-flex-grid-col-6 > *.lg-flex-col-5 {
-    width: calc(83.34% - var(--flex-grid-6-col-5));
+  .rls-flex-lg-col-11 {
+    grid-column: span 11 / span 11;
   }
-  .lg-flex-grid-col-6 > *.lg-flex-col-6,
-  .lg-flex-grid-col-6 > *.lg-flex-col-8,
-  .lg-flex-grid-col-6 > *.lg-flex-col-12 {
-    width: 100%;
+  .rls-flex-lg-col-12 {
+    grid-column: span 12 / span 12;
   }
-  .lg-flex-grid-col-8 > * {
-    width: calc(12.5% - var(--flex-grid-8-gap));
+  .rls-flex-lg-grid-col-8 > .rls-flex-lg-col-9 {
+    grid-column: span 8 / span 8;
   }
-  .lg-flex-grid-col-8 > *.lg-flex-col-1 {
-    width: calc(12.5% - var(--flex-grid-8-gap));
+  .rls-flex-lg-grid-col-8 > .rls-flex-lg-col-10 {
+    grid-column: span 8 / span 8;
   }
-  .lg-flex-grid-col-8 > *.lg-flex-col-2 {
-    width: calc(25% - var(--flex-grid-8-col-2));
+  .rls-flex-lg-grid-col-8 > .rls-flex-lg-col-11 {
+    grid-column: span 8 / span 8;
   }
-  .lg-flex-grid-col-8 > *.lg-flex-col-3 {
-    width: calc(37.5% - var(--flex-grid-8-col-3));
+  .rls-flex-lg-grid-col-8 > .rls-flex-lg-col-12 {
+    grid-column: span 8 / span 8;
   }
-  .lg-flex-grid-col-8 > *.lg-flex-col-4 {
-    width: calc(50% - var(--flex-grid-8-col-4));
+  .rls-flex-lg-grid-col-6 > .rls-flex-lg-col-7 {
+    grid-column: span 6 / span 6;
   }
-  .lg-flex-grid-col-8 > *.lg-flex-col-5 {
-    width: calc(62.75% - var(--flex-grid-8-col-5));
+  .rls-flex-lg-grid-col-6 > .rls-flex-lg-col-8 {
+    grid-column: span 6 / span 6;
   }
-  .lg-flex-grid-col-8 > *.lg-flex-col-6 {
-    width: calc(75% - var(--flex-grid-8-col-6));
+  .rls-flex-lg-grid-col-6 > .rls-flex-lg-col-9 {
+    grid-column: span 6 / span 6;
   }
-  .lg-flex-grid-col-8 > *.lg-flex-col-8,
-  .lg-flex-grid-col-8 > *.lg-flex-col-12 {
-    width: 100%;
+  .rls-flex-lg-grid-col-6 > .rls-flex-lg-col-10 {
+    grid-column: span 6 / span 6;
   }
-  .lg-flex-grid-col-12 > * {
-    width: calc(8.33% - var(--flex-grid-12-gap));
+  .rls-flex-lg-grid-col-6 > .rls-flex-lg-col-11 {
+    grid-column: span 6 / span 6;
   }
-  .lg-flex-grid-col-12 > *.lg-flex-col-1 {
-    width: calc(8.33% - var(--flex-grid-12-gap));
+  .rls-flex-lg-grid-col-6 > .rls-flex-lg-col-12 {
+    grid-column: span 6 / span 6;
   }
-  .lg-flex-grid-col-12 > *.lg-flex-col-2 {
-    width: calc(16.66% - var(--flex-grid-12-col-2));
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-5 {
+    grid-column: span 4 / span 4;
   }
-  .lg-flex-grid-col-12 > *.lg-flex-col-3 {
-    width: calc(25% - var(--flex-grid-12-col-3));
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-6 {
+    grid-column: span 4 / span 4;
   }
-  .lg-flex-grid-col-12 > *.lg-flex-col-4 {
-    width: calc(33.33% - var(--flex-grid-12-col-4));
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-7 {
+    grid-column: span 4 / span 4;
   }
-  .lg-flex-grid-col-12 > *.lg-flex-col-5 {
-    width: calc(41.66% - var(--flex-grid-12-col-5));
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-8 {
+    grid-column: span 4 / span 4;
   }
-  .lg-flex-grid-col-12 > *.lg-flex-col-6 {
-    width: calc(50% - var(--flex-grid-12-col-6));
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-9 {
+    grid-column: span 4 / span 4;
   }
-  .lg-flex-grid-col-12 > *.lg-flex-col-8 {
-    width: calc(66.66% - var(--flex-grid-12-col-8));
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-10 {
+    grid-column: span 4 / span 4;
   }
-  .lg-flex-grid-col-12 > *.lg-flex-col-12 {
-    width: 100%;
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-11 {
+    grid-column: span 4 / span 4;
+  }
+  .rls-flex-lg-grid-col-4 > .rls-flex-lg-col-12 {
+    grid-column: span 4 / span 4;
+  }
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-3 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-4 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-5 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-6 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-7 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-8 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-9 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-10 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-11 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-lg-grid-col-2 > .rls-flex-lg-col-12 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-2 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-3 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-4 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-5 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-6 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-7 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-8 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-9 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-10 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-11 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-lg-grid-col-1 > .rls-flex-lg-col-12 {
+    grid-column: span 1 / span 1;
   }
 }
-@media screen and (min-width: 1280px) {
-  .xl-flex-grid-8 {
-    --flex-grid-12-gap: 3.6672rem;
-    --flex-grid-8-gap: 28rem;
-    --flex-grid-6-gap: 3.336rem;
-    --flex-grid-4-gap: 3rem;
-    --flex-grid-12-col-2: 3.4rem;
-    --flex-grid-12-col-3: 3.1rem;
-    --flex-grid-12-col-4: 2.8rem;
-    --flex-grid-12-col-5: 2.8rem;
-    --flex-grid-12-col-6: 2.18rem;
-    --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 3.1rem;
-    --flex-grid-8-col-3: 2.6rem;
-    --flex-grid-8-col-4: 2.2rem;
-    --flex-grid-8-col-5: 2.2rem;
-    --flex-grid-8-col-6: 1.8rem;
-    --flex-grid-6-col-2: 2.82rem;
-    --flex-grid-6-col-3: 2.2rem;
-    --flex-grid-6-col-4: 1.7rem;
-    --flex-grid-6-col-5: 1.7rem;
-    --flex-grid-4-col-2: 2rem;
-    --flex-grid-4-col-3: 1rem;
-    display: inline-flex;
-    flex-wrap: wrap;
+@media screen and (min-width: 1440px) {
+  .rls-flex-xl-grid-col-12 {
+    --rls-grid-columns: 12;
+  }
+  .rls-flex-xl-grid-col-8 {
+    --rls-grid-columns: 8;
+  }
+  .rls-flex-xl-grid-col-6 {
+    --rls-grid-columns: 6;
+  }
+  .rls-flex-xl-grid-col-4 {
+    --rls-grid-columns: 4;
+  }
+  .rls-flex-xl-grid-col-2 {
+    --rls-grid-columns: 2;
+  }
+  .rls-flex-xl-grid-col-1 {
+    --rls-grid-columns: 1;
+  }
+  .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;
+  }
+  .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;
+  }
+  .rls-flex-xl-grid-8 {
     gap: var(--rls-sizing-x4);
   }
-  .xl-flex-grid-12 {
-    --flex-grid-12-gap: 7.3125rem;
-    --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6.6475rem;
-    --flex-grid-4-gap: 6rem;
-    --flex-grid-12-col-2: 6.624rem;
-    --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5.38rem;
-    --flex-grid-12-col-5: 5.38rem;
-    --flex-grid-12-col-6: 4.1rem;
-    --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6.182rem;
-    --flex-grid-8-col-3: 5.2rem;
-    --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-5: 4rem;
-    --flex-grid-8-col-6: 2.2rem;
-    --flex-grid-6-col-2: 5.4rem;
-    --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2.84rem;
-    --flex-grid-6-col-5: 2.84rem;
-    --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2.2rem;
-    display: inline-flex;
-    flex-wrap: wrap;
+  .rls-flex-xl-grid-12 {
     gap: var(--rls-sizing-x6);
   }
-  .xl-flex-grid-16 {
-    --flex-grid-12-gap: 7.3125rem;
-    --flex-grid-8-gap: 7rem;
-    --flex-grid-6-gap: 6.6475rem;
-    --flex-grid-4-gap: 6rem;
-    --flex-grid-12-col-2: 6.66rem;
-    --flex-grid-12-col-3: 6rem;
-    --flex-grid-12-col-4: 5.38rem;
-    --flex-grid-12-col-5: 5.38rem;
-    --flex-grid-12-col-6: 4.1rem;
-    --flex-grid-12-col-8: 3rem;
-    --flex-grid-8-col-2: 6.182rem;
-    --flex-grid-8-col-3: 5.2rem;
-    --flex-grid-8-col-4: 4rem;
-    --flex-grid-8-col-5: 4rem;
-    --flex-grid-8-col-6: 2.2rem;
-    --flex-grid-6-col-2: 5.4rem;
-    --flex-grid-6-col-3: 4rem;
-    --flex-grid-6-col-4: 2.84rem;
-    --flex-grid-6-col-5: 2.84rem;
-    --flex-grid-4-col-2: 4rem;
-    --flex-grid-4-col-3: 2.2rem;
-    display: inline-flex;
-    flex-wrap: wrap;
+  .rls-flex-xl-grid-16 {
     gap: var(--rls-sizing-x8);
   }
-  .xl-flex-grid-col-4 > * {
-    width: calc(25% - var(--flex-grid-4-gap));
+  .rls-flex-xl-col-1 {
+    grid-column: span 1 / span 1;
   }
-  .xl-flex-grid-col-4 > *.xl-flex-col-1 {
-    width: calc(25% - var(--flex-grid-4-gap));
+  .rls-flex-xl-col-2 {
+    grid-column: span 2 / span 2;
   }
-  .xl-flex-grid-col-4 > *.xl-flex-col-2 {
-    width: calc(50% - var(--flex-grid-4-col-2));
+  .rls-flex-xl-col-3 {
+    grid-column: span 3 / span 3;
   }
-  .xl-flex-grid-col-4 > *.xl-flex-col-3 {
-    width: calc(75% - var(--flex-grid-4-col-3));
+  .rls-flex-xl-col-4 {
+    grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-4 > *.xl-flex-col-4,
-  .xl-flex-grid-col-4 > *.xl-flex-col-6,
-  .xl-flex-grid-col-4 > *.xl-flex-col-8,
-  .xl-flex-grid-col-4 > *.xl-flex-col-12 {
-    width: 100%;
+  .rls-flex-xl-col-5 {
+    grid-column: span 5 / span 5;
   }
-  .xl-flex-grid-col-6 > * {
-    width: calc(16.66% - var(--flex-grid-6-gap));
+  .rls-flex-xl-col-6 {
+    grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-6 > *.xl-flex-col-1 {
-    width: calc(16.66% - var(--flex-grid-6-gap));
+  .rls-flex-xl-col-7 {
+    grid-column: span 7 / span 7;
   }
-  .xl-flex-grid-col-6 > *.xl-flex-col-2 {
-    width: calc(33.34% - var(--flex-grid-6-col-2));
+  .rls-flex-xl-col-8 {
+    grid-column: span 8 / span 8;
   }
-  .xl-flex-grid-col-6 > *.xl-flex-col-3 {
-    width: calc(50% - var(--flex-grid-6-col-3));
+  .rls-flex-xl-col-9 {
+    grid-column: span 9 / span 9;
   }
-  .xl-flex-grid-col-6 > *.xl-flex-col-4 {
-    width: calc(66.67% - var(--flex-grid-6-col-4));
+  .rls-flex-xl-col-10 {
+    grid-column: span 10 / span 10;
   }
-  .xl-flex-grid-col-6 > *.xl-flex-col-5 {
-    width: calc(83.34% - var(--flex-grid-6-col-5));
+  .rls-flex-xl-col-11 {
+    grid-column: span 11 / span 11;
   }
-  .xl-flex-grid-col-6 > *.xl-flex-col-6,
-  .xl-flex-grid-col-6 > *.xl-flex-col-8,
-  .xl-flex-grid-col-6 > *.xl-flex-col-12 {
-    width: 100%;
+  .rls-flex-xl-col-12 {
+    grid-column: span 12 / span 12;
   }
-  .xl-flex-grid-col-8 > * {
-    width: calc(12.5% - var(--flex-grid-8-gap));
+  .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-1 {
-    width: calc(12.5% - var(--flex-grid-8-gap));
+  .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-2 {
-    width: calc(25% - var(--flex-grid-8-col-2));
+  .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-3 {
-    width: calc(37.5% - var(--flex-grid-8-col-3));
+  .rls-flex-xl-grid-col-8 > .rls-flex-xl-col-12 {
+    grid-column: span 8 / span 8;
   }
-  .xl-flex-grid-col-8 > *.xl-flex-col-4 {
-    width: calc(50% - var(--flex-grid-8-col-4));
+  .rls-flex-xl-grid-col-6 > .rls-flex-xl-col-7 {
+    grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-8 > *.xl-flex-col-5 {
-    width: calc(62.75% - var(--flex-grid-8-col-5));
+  .rls-flex-xl-grid-col-6 > .rls-flex-xl-col-8 {
+    grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-8 > *.xl-flex-col-6 {
-    width: calc(75% - var(--flex-grid-8-col-6));
+  .rls-flex-xl-grid-col-6 > .rls-flex-xl-col-9 {
+    grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-8 > *.xl-flex-col-8,
-  .xl-flex-grid-col-8 > *.xl-flex-col-12 {
-    width: 100%;
+  .rls-flex-xl-grid-col-6 > .rls-flex-xl-col-10 {
+    grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-12 > * {
-    width: calc(8.33% - var(--flex-grid-12-gap));
+  .rls-flex-xl-grid-col-6 > .rls-flex-xl-col-11 {
+    grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-12 > *.xl-flex-col-1 {
-    width: calc(8.33% - var(--flex-grid-12-gap));
+  .rls-flex-xl-grid-col-6 > .rls-flex-xl-col-12 {
+    grid-column: span 6 / span 6;
   }
-  .xl-flex-grid-col-12 > *.xl-flex-col-2 {
-    width: calc(16.66% - var(--flex-grid-12-col-2));
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-5 {
+    grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-12 > *.xl-flex-col-3 {
-    width: calc(25% - var(--flex-grid-12-col-3));
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-6 {
+    grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-12 > *.xl-flex-col-4 {
-    width: calc(33.33% - var(--flex-grid-12-col-4));
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-7 {
+    grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-12 > *.xl-flex-col-5 {
-    width: calc(41.66% - var(--flex-grid-12-col-5));
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-8 {
+    grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-12 > *.xl-flex-col-6 {
-    width: calc(50% - var(--flex-grid-12-col-6));
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-9 {
+    grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-12 > *.xl-flex-col-8 {
-    width: calc(66.66% - var(--flex-grid-12-col-8));
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-10 {
+    grid-column: span 4 / span 4;
   }
-  .xl-flex-grid-col-12 > *.xl-flex-col-12 {
-    width: 100%;
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-11 {
+    grid-column: span 4 / span 4;
+  }
+  .rls-flex-xl-grid-col-4 > .rls-flex-xl-col-12 {
+    grid-column: span 4 / span 4;
+  }
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-3 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-4 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-5 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-6 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-7 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-8 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-9 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-10 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-11 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-xl-grid-col-2 > .rls-flex-xl-col-12 {
+    grid-column: span 2 / span 2;
+  }
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-2 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-3 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-4 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-5 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-6 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-7 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-8 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-9 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-10 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-11 {
+    grid-column: span 1 / span 1;
+  }
+  .rls-flex-xl-grid-col-1 > .rls-flex-xl-col-12 {
+    grid-column: span 1 / span 1;
   }
 }
 .rls-align-center {
@@ -5314,6 +5396,28 @@ button {
 .rls-input-bold {
   font-weight: var(--rls-font-weight-bold);
 }
+.rls-button-default,
+.rls-button-bold,
+.rls-button-semibold,
+.rls-button-medium,
+.rls-button-regular {
+  font-size: var(--rls-button-font-size);
+  letter-spacing: var(--rls-button-letter-spacing);
+  min-height: var(--rls-button-line-height);
+  line-height: var(--rls-button-line-height);
+}
+.rls-button-regular {
+  font-weight: var(--rls-font-weight-regular);
+}
+.rls-button-medium {
+  font-weight: var(--rls-font-weight-medium);
+}
+.rls-button-semibold {
+  font-weight: var(--rls-font-weight-semibold);
+}
+.rls-button-bold {
+  font-weight: var(--rls-font-weight-bold);
+}
 .rls-paragraph-default,
 .rls-paragraph-bold,
 .rls-paragraph-semibold,
@@ -5358,26 +5462,26 @@ button {
 .rls-label-bold {
   font-weight: var(--rls-font-weight-bold);
 }
-.rls-button-default,
-.rls-button-bold,
-.rls-button-semibold,
-.rls-button-medium,
-.rls-button-regular {
-  font-size: var(--rls-button-font-size);
-  letter-spacing: var(--rls-button-letter-spacing);
-  min-height: var(--rls-button-line-height);
-  line-height: var(--rls-button-line-height);
-}
-.rls-button-regular {
+.rls-span-default,
+.rls-span-bold,
+.rls-span-semibold,
+.rls-span-medium,
+.rls-span-regular {
+  font-size: var(--rls-span-font-size);
+  letter-spacing: var(--rls-span-letter-spacing);
+  min-height: var(--rls-span-line-height);
+  line-height: var(--rls-span-line-height);
+}
+.rls-span-regular {
   font-weight: var(--rls-font-weight-regular);
 }
-.rls-button-medium {
+.rls-span-medium {
   font-weight: var(--rls-font-weight-medium);
 }
-.rls-button-semibold {
+.rls-span-semibold {
   font-weight: var(--rls-font-weight-semibold);
 }
-.rls-button-bold {
+.rls-span-bold {
   font-weight: var(--rls-font-weight-bold);
 }
 .rls-smalltext-default,
@@ -5921,7 +6025,7 @@ button {
   height: var(--pvt-header-height);
   box-sizing: border-box;
   z-index: var(--rls-z-index-8);
-  background: var(--rlc-app-header-background, var(--rls-app-color-100));
+  background: var(--rlc-app-header-background, var(--rls-app-color-050));
 }
 .rls-app__header + .rls-app__page,
 .rls-app__header + .rls-app__content {