@rolster/styles-foundations 1.0.14 → 1.1.0

package/dist/rolster-styles.css

@@ -117,24 +117,24 @@
 }
 
 :root {
-  --sizing-2: 0.125rem;
-  --sizing-4: 0.25rem;
-  --sizing-6: 0.375rem;
-  --sizing-8: 0.5rem;
-  --sizing-12: 0.75rem;
-  --sizing-16: 1rem;
-  --sizing-20: 1.25rem;
-  --sizing-24: 1.5rem;
-  --sizing-28: 1.75rem;
-  --sizing-32: 2rem;
-  --sizing-36: 2.25rem;
-  --sizing-40: 2.5rem;
-  --sizing-44: 2.75rem;
-  --sizing-48: 3rem;
-  --sizing-52: 3.25rem;
-  --sizing-56: 3.5rem;
-  --sizing-60: 3.75rem;
-  --sizing-64: 4rem;
+  --sizing-x1: 1rem;
+  --sizing-x2: 2rem;
+  --sizing-x3: 3rem;
+  --sizing-x4: 4rem;
+  --sizing-x6: 6rem;
+  --sizing-x8: 8rem;
+  --sizing-x10: 10rem;
+  --sizing-x12: 12rem;
+  --sizing-x14: 14rem;
+  --sizing-x16: 16rem;
+  --sizing-x18: 18rem;
+  --sizing-x20: 20rem;
+  --sizing-x22: 22rem;
+  --sizing-x24: 24rem;
+  --sizing-x26: 26rem;
+  --sizing-x28: 28rem;
+  --sizing-x30: 30rem;
+  --sizing-x32: 32rem;
   --border-1: 1px;
   --border-2: 2px;
   --border-4: 4px;
@@ -1176,7 +1176,7 @@
 }
 
 html {
-  font-size: var(--rolster-font-size, 16px);
+  font-size: var(--rolster-font-size, 2px);
   font-family: var(--rolster-font-family);
 }
 
@@ -1223,7 +1223,7 @@ svg:not(:root) {
 }
 
 figure {
-  margin: 1rem 40rem;
+  margin: 8rem 40rem;
 }
 
 hr {
@@ -1241,7 +1241,7 @@ kbd,
 pre,
 samp {
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 8rem;
 }
 
 label,
@@ -1260,7 +1260,7 @@ textarea {
 }
 
 textarea::placeholder {
-  padding-left: 0.125rem;
+  padding-left: 1rem;
 }
 
 form,
@@ -1446,17 +1446,17 @@ p {
 
 .xs-grid-8 {
   display: grid;
-  gap: var(--sizing-8);
+  gap: var(--sizing-x4);
 }
 
 .xs-grid-12 {
   display: grid;
-  gap: var(--sizing-12);
+  gap: var(--sizing-x6);
 }
 
 .xs-grid-16 {
   display: grid;
-  gap: var(--sizing-16);
+  gap: var(--sizing-x8);
 }
 
 .xs-grid-col-12 {
@@ -1486,15 +1486,15 @@ p {
 @media screen and (min-width: 360px) {
   .sm-grid-8 {
     display: grid;
-    gap: var(--sizing-8);
+    gap: var(--sizing-x4);
   }
   .sm-grid-12 {
     display: grid;
-    gap: var(--sizing-12);
+    gap: var(--sizing-x6);
   }
   .sm-grid-16 {
     display: grid;
-    gap: var(--sizing-16);
+    gap: var(--sizing-x8);
   }
   .sm-grid-col-12 {
     grid-template-columns: repeat(12, 1fr);
@@ -1519,15 +1519,15 @@ p {
 @media screen and (min-width: 640px) {
   .md-grid-8 {
     display: grid;
-    gap: var(--sizing-8);
+    gap: var(--sizing-x4);
   }
   .md-grid-12 {
     display: grid;
-    gap: var(--sizing-12);
+    gap: var(--sizing-x6);
   }
   .md-grid-16 {
     display: grid;
-    gap: var(--sizing-16);
+    gap: var(--sizing-x8);
   }
   .md-grid-col-12 {
     grid-template-columns: repeat(12, 1fr);
@@ -1552,15 +1552,15 @@ p {
 @media screen and (min-width: 960px) {
   .lg-grid-8 {
     display: grid;
-    gap: var(--sizing-8);
+    gap: var(--sizing-x4);
   }
   .lg-grid-12 {
     display: grid;
-    gap: var(--sizing-12);
+    gap: var(--sizing-x6);
   }
   .lg-grid-16 {
     display: grid;
-    gap: var(--sizing-16);
+    gap: var(--sizing-x8);
   }
   .lg-grid-col-12 {
     grid-template-columns: repeat(12, 1fr);
@@ -1585,15 +1585,15 @@ p {
 @media screen and (min-width: 1280px) {
   .xl-grid-8 {
     display: grid;
-    gap: var(--sizing-8);
+    gap: var(--sizing-x4);
   }
   .xl-grid-12 {
     display: grid;
-    gap: var(--sizing-12);
+    gap: var(--sizing-x6);
   }
   .xl-grid-16 {
     display: grid;
-    gap: var(--sizing-16);
+    gap: var(--sizing-x8);
   }
   .xl-grid-col-12 {
     grid-template-columns: repeat(12, 1fr);
@@ -1616,75 +1616,75 @@ p {
 }
 
 .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-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-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-4-col-2: 2rem;
+  --flex-grid-4-col-3: 1rem;
   display: inline-flex;
   flex-wrap: wrap;
-  gap: var(--sizing-8);
-  --flex-grid-12-gap: 0.4584rem;
-  --flex-grid-8-gap: 0.4375rem;
-  --flex-grid-6-gap: 0.417rem;
-  --flex-grid-4-gap: 0.375rem;
-  --flex-grid-12-col-2: 0.425rem;
-  --flex-grid-12-col-3: 0.3875rem;
-  --flex-grid-12-col-4: 0.35rem;
-  --flex-grid-12-col-6: 0.2725rem;
-  --flex-grid-12-col-8: 0.375rem;
-  --flex-grid-8-col-2: 0.3875rem;
-  --flex-grid-8-col-3: 0.325rem;
-  --flex-grid-8-col-4: 0.275rem;
-  --flex-grid-8-col-6: 0.225rem;
-  --flex-grid-6-col-2: 0.3525rem;
-  --flex-grid-6-col-3: 0.275rem;
-  --flex-grid-6-col-4: 0.2125rem;
-  --flex-grid-4-col-2: 0.25rem;
-  --flex-grid-4-col-3: 0.125rem;
+  gap: var(--sizing-x4);
 }
 
 .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-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-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-4-col-2: 4rem;
+  --flex-grid-4-col-3: 2, 2rem;
   display: inline-flex;
   flex-wrap: wrap;
-  gap: var(--sizing-12);
-  --flex-grid-12-gap: 0.9140625rem;
-  --flex-grid-8-gap: 0.875rem;
-  --flex-grid-6-gap: 0.8309375rem;
-  --flex-grid-4-gap: 0.75rem;
-  --flex-grid-12-col-2: 0.828rem;
-  --flex-grid-12-col-3: 0.75rem;
-  --flex-grid-12-col-4: 0.6725rem;
-  --flex-grid-12-col-6: 0.5125rem;
-  --flex-grid-12-col-8: 0.375rem;
-  --flex-grid-8-col-2: 0.77275rem;
-  --flex-grid-8-col-3: 0.65rem;
-  --flex-grid-8-col-4: 0.5rem;
-  --flex-grid-8-col-6: 0.275rem;
-  --flex-grid-6-col-2: 0.675rem;
-  --flex-grid-6-col-3: 0.5rem;
-  --flex-grid-6-col-4: 0.355rem;
-  --flex-grid-4-col-2: 0.5rem;
-  --flex-grid-4-col-3: 0.275rem;
+  gap: var(--sizing-x6);
 }
 
 .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-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-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-4-col-2: 4rem;
+  --flex-grid-4-col-3: 2, 2rem;
   display: inline-flex;
   flex-wrap: wrap;
-  gap: var(--sizing-16);
-  --flex-grid-12-gap: 0.9140625rem;
-  --flex-grid-8-gap: 0.875rem;
-  --flex-grid-6-gap: 0.8309375rem;
-  --flex-grid-4-gap: 0.75rem;
-  --flex-grid-12-col-2: 0.8325rem;
-  --flex-grid-12-col-3: 0.75rem;
-  --flex-grid-12-col-4: 0.6725rem;
-  --flex-grid-12-col-6: 0.5125rem;
-  --flex-grid-12-col-8: 0.375rem;
-  --flex-grid-8-col-2: 0.77275rem;
-  --flex-grid-8-col-3: 0.65rem;
-  --flex-grid-8-col-4: 0.5rem;
-  --flex-grid-8-col-6: 0.275rem;
-  --flex-grid-6-col-2: 0.675rem;
-  --flex-grid-6-col-3: 0.5rem;
-  --flex-grid-6-col-4: 0.355rem;
-  --flex-grid-4-col-2: 0.5rem;
-  --flex-grid-4-col-3: 0.275rem;
+  gap: var(--sizing-x8);
 }
 
 .xs-flex-grid-col-4 > * {
@@ -1777,73 +1777,73 @@ p {
 
 @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-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-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-4-col-2: 2rem;
+    --flex-grid-4-col-3: 1rem;
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--sizing-8);
-    --flex-grid-12-gap: 0.4584rem;
-    --flex-grid-8-gap: 0.4375rem;
-    --flex-grid-6-gap: 0.417rem;
-    --flex-grid-4-gap: 0.375rem;
-    --flex-grid-12-col-2: 0.425rem;
-    --flex-grid-12-col-3: 0.3875rem;
-    --flex-grid-12-col-4: 0.35rem;
-    --flex-grid-12-col-6: 0.2725rem;
-    --flex-grid-12-col-8: 0.375rem;
-    --flex-grid-8-col-2: 0.3875rem;
-    --flex-grid-8-col-3: 0.325rem;
-    --flex-grid-8-col-4: 0.275rem;
-    --flex-grid-8-col-6: 0.225rem;
-    --flex-grid-6-col-2: 0.3525rem;
-    --flex-grid-6-col-3: 0.275rem;
-    --flex-grid-6-col-4: 0.2125rem;
-    --flex-grid-4-col-2: 0.25rem;
-    --flex-grid-4-col-3: 0.125rem;
+    gap: var(--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-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-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-4-col-2: 4rem;
+    --flex-grid-4-col-3: 2, 2rem;
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--sizing-12);
-    --flex-grid-12-gap: 0.9140625rem;
-    --flex-grid-8-gap: 0.875rem;
-    --flex-grid-6-gap: 0.8309375rem;
-    --flex-grid-4-gap: 0.75rem;
-    --flex-grid-12-col-2: 0.828rem;
-    --flex-grid-12-col-3: 0.75rem;
-    --flex-grid-12-col-4: 0.6725rem;
-    --flex-grid-12-col-6: 0.5125rem;
-    --flex-grid-12-col-8: 0.375rem;
-    --flex-grid-8-col-2: 0.77275rem;
-    --flex-grid-8-col-3: 0.65rem;
-    --flex-grid-8-col-4: 0.5rem;
-    --flex-grid-8-col-6: 0.275rem;
-    --flex-grid-6-col-2: 0.675rem;
-    --flex-grid-6-col-3: 0.5rem;
-    --flex-grid-6-col-4: 0.355rem;
-    --flex-grid-4-col-2: 0.5rem;
-    --flex-grid-4-col-3: 0.275rem;
+    gap: var(--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-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-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-4-col-2: 4rem;
+    --flex-grid-4-col-3: 2, 2rem;
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--sizing-16);
-    --flex-grid-12-gap: 0.9140625rem;
-    --flex-grid-8-gap: 0.875rem;
-    --flex-grid-6-gap: 0.8309375rem;
-    --flex-grid-4-gap: 0.75rem;
-    --flex-grid-12-col-2: 0.8325rem;
-    --flex-grid-12-col-3: 0.75rem;
-    --flex-grid-12-col-4: 0.6725rem;
-    --flex-grid-12-col-6: 0.5125rem;
-    --flex-grid-12-col-8: 0.375rem;
-    --flex-grid-8-col-2: 0.77275rem;
-    --flex-grid-8-col-3: 0.65rem;
-    --flex-grid-8-col-4: 0.5rem;
-    --flex-grid-8-col-6: 0.275rem;
-    --flex-grid-6-col-2: 0.675rem;
-    --flex-grid-6-col-3: 0.5rem;
-    --flex-grid-6-col-4: 0.355rem;
-    --flex-grid-4-col-2: 0.5rem;
-    --flex-grid-4-col-3: 0.275rem;
+    gap: var(--sizing-x8);
   }
   .sm-flex-grid-col-4 > * {
     width: calc(25% - var(--flex-grid-4-gap));
@@ -1933,73 +1933,73 @@ p {
 
 @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-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-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-4-col-2: 2rem;
+    --flex-grid-4-col-3: 1rem;
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--sizing-8);
-    --flex-grid-12-gap: 0.4584rem;
-    --flex-grid-8-gap: 0.4375rem;
-    --flex-grid-6-gap: 0.417rem;
-    --flex-grid-4-gap: 0.375rem;
-    --flex-grid-12-col-2: 0.425rem;
-    --flex-grid-12-col-3: 0.3875rem;
-    --flex-grid-12-col-4: 0.35rem;
-    --flex-grid-12-col-6: 0.2725rem;
-    --flex-grid-12-col-8: 0.375rem;
-    --flex-grid-8-col-2: 0.3875rem;
-    --flex-grid-8-col-3: 0.325rem;
-    --flex-grid-8-col-4: 0.275rem;
-    --flex-grid-8-col-6: 0.225rem;
-    --flex-grid-6-col-2: 0.3525rem;
-    --flex-grid-6-col-3: 0.275rem;
-    --flex-grid-6-col-4: 0.2125rem;
-    --flex-grid-4-col-2: 0.25rem;
-    --flex-grid-4-col-3: 0.125rem;
+    gap: var(--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-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-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-4-col-2: 4rem;
+    --flex-grid-4-col-3: 2, 2rem;
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--sizing-12);
-    --flex-grid-12-gap: 0.9140625rem;
-    --flex-grid-8-gap: 0.875rem;
-    --flex-grid-6-gap: 0.8309375rem;
-    --flex-grid-4-gap: 0.75rem;
-    --flex-grid-12-col-2: 0.828rem;
-    --flex-grid-12-col-3: 0.75rem;
-    --flex-grid-12-col-4: 0.6725rem;
-    --flex-grid-12-col-6: 0.5125rem;
-    --flex-grid-12-col-8: 0.375rem;
-    --flex-grid-8-col-2: 0.77275rem;
-    --flex-grid-8-col-3: 0.65rem;
-    --flex-grid-8-col-4: 0.5rem;
-    --flex-grid-8-col-6: 0.275rem;
-    --flex-grid-6-col-2: 0.675rem;
-    --flex-grid-6-col-3: 0.5rem;
-    --flex-grid-6-col-4: 0.355rem;
-    --flex-grid-4-col-2: 0.5rem;
-    --flex-grid-4-col-3: 0.275rem;
+    gap: var(--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-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-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-4-col-2: 4rem;
+    --flex-grid-4-col-3: 2, 2rem;
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--sizing-16);
-    --flex-grid-12-gap: 0.9140625rem;
-    --flex-grid-8-gap: 0.875rem;
-    --flex-grid-6-gap: 0.8309375rem;
-    --flex-grid-4-gap: 0.75rem;
-    --flex-grid-12-col-2: 0.8325rem;
-    --flex-grid-12-col-3: 0.75rem;
-    --flex-grid-12-col-4: 0.6725rem;
-    --flex-grid-12-col-6: 0.5125rem;
-    --flex-grid-12-col-8: 0.375rem;
-    --flex-grid-8-col-2: 0.77275rem;
-    --flex-grid-8-col-3: 0.65rem;
-    --flex-grid-8-col-4: 0.5rem;
-    --flex-grid-8-col-6: 0.275rem;
-    --flex-grid-6-col-2: 0.675rem;
-    --flex-grid-6-col-3: 0.5rem;
-    --flex-grid-6-col-4: 0.355rem;
-    --flex-grid-4-col-2: 0.5rem;
-    --flex-grid-4-col-3: 0.275rem;
+    gap: var(--sizing-x8);
   }
   .md-flex-grid-col-4 > * {
     width: calc(25% - var(--flex-grid-4-gap));
@@ -2089,73 +2089,73 @@ p {
 
 @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-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-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-4-col-2: 2rem;
+    --flex-grid-4-col-3: 1rem;
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--sizing-8);
-    --flex-grid-12-gap: 0.4584rem;
-    --flex-grid-8-gap: 0.4375rem;
-    --flex-grid-6-gap: 0.417rem;
-    --flex-grid-4-gap: 0.375rem;
-    --flex-grid-12-col-2: 0.425rem;
-    --flex-grid-12-col-3: 0.3875rem;
-    --flex-grid-12-col-4: 0.35rem;
-    --flex-grid-12-col-6: 0.2725rem;
-    --flex-grid-12-col-8: 0.375rem;
-    --flex-grid-8-col-2: 0.3875rem;
-    --flex-grid-8-col-3: 0.325rem;
-    --flex-grid-8-col-4: 0.275rem;
-    --flex-grid-8-col-6: 0.225rem;
-    --flex-grid-6-col-2: 0.3525rem;
-    --flex-grid-6-col-3: 0.275rem;
-    --flex-grid-6-col-4: 0.2125rem;
-    --flex-grid-4-col-2: 0.25rem;
-    --flex-grid-4-col-3: 0.125rem;
+    gap: var(--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-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-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-4-col-2: 4rem;
+    --flex-grid-4-col-3: 2, 2rem;
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--sizing-12);
-    --flex-grid-12-gap: 0.9140625rem;
-    --flex-grid-8-gap: 0.875rem;
-    --flex-grid-6-gap: 0.8309375rem;
-    --flex-grid-4-gap: 0.75rem;
-    --flex-grid-12-col-2: 0.828rem;
-    --flex-grid-12-col-3: 0.75rem;
-    --flex-grid-12-col-4: 0.6725rem;
-    --flex-grid-12-col-6: 0.5125rem;
-    --flex-grid-12-col-8: 0.375rem;
-    --flex-grid-8-col-2: 0.77275rem;
-    --flex-grid-8-col-3: 0.65rem;
-    --flex-grid-8-col-4: 0.5rem;
-    --flex-grid-8-col-6: 0.275rem;
-    --flex-grid-6-col-2: 0.675rem;
-    --flex-grid-6-col-3: 0.5rem;
-    --flex-grid-6-col-4: 0.355rem;
-    --flex-grid-4-col-2: 0.5rem;
-    --flex-grid-4-col-3: 0.275rem;
+    gap: var(--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-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-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-4-col-2: 4rem;
+    --flex-grid-4-col-3: 2, 2rem;
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--sizing-16);
-    --flex-grid-12-gap: 0.9140625rem;
-    --flex-grid-8-gap: 0.875rem;
-    --flex-grid-6-gap: 0.8309375rem;
-    --flex-grid-4-gap: 0.75rem;
-    --flex-grid-12-col-2: 0.8325rem;
-    --flex-grid-12-col-3: 0.75rem;
-    --flex-grid-12-col-4: 0.6725rem;
-    --flex-grid-12-col-6: 0.5125rem;
-    --flex-grid-12-col-8: 0.375rem;
-    --flex-grid-8-col-2: 0.77275rem;
-    --flex-grid-8-col-3: 0.65rem;
-    --flex-grid-8-col-4: 0.5rem;
-    --flex-grid-8-col-6: 0.275rem;
-    --flex-grid-6-col-2: 0.675rem;
-    --flex-grid-6-col-3: 0.5rem;
-    --flex-grid-6-col-4: 0.355rem;
-    --flex-grid-4-col-2: 0.5rem;
-    --flex-grid-4-col-3: 0.275rem;
+    gap: var(--sizing-x8);
   }
   .lg-flex-grid-col-4 > * {
     width: calc(25% - var(--flex-grid-4-gap));
@@ -2245,73 +2245,73 @@ p {
 
 @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-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-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-4-col-2: 2rem;
+    --flex-grid-4-col-3: 1rem;
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--sizing-8);
-    --flex-grid-12-gap: 0.4584rem;
-    --flex-grid-8-gap: 0.4375rem;
-    --flex-grid-6-gap: 0.417rem;
-    --flex-grid-4-gap: 0.375rem;
-    --flex-grid-12-col-2: 0.425rem;
-    --flex-grid-12-col-3: 0.3875rem;
-    --flex-grid-12-col-4: 0.35rem;
-    --flex-grid-12-col-6: 0.2725rem;
-    --flex-grid-12-col-8: 0.375rem;
-    --flex-grid-8-col-2: 0.3875rem;
-    --flex-grid-8-col-3: 0.325rem;
-    --flex-grid-8-col-4: 0.275rem;
-    --flex-grid-8-col-6: 0.225rem;
-    --flex-grid-6-col-2: 0.3525rem;
-    --flex-grid-6-col-3: 0.275rem;
-    --flex-grid-6-col-4: 0.2125rem;
-    --flex-grid-4-col-2: 0.25rem;
-    --flex-grid-4-col-3: 0.125rem;
+    gap: var(--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-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-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-4-col-2: 4rem;
+    --flex-grid-4-col-3: 2, 2rem;
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--sizing-12);
-    --flex-grid-12-gap: 0.9140625rem;
-    --flex-grid-8-gap: 0.875rem;
-    --flex-grid-6-gap: 0.8309375rem;
-    --flex-grid-4-gap: 0.75rem;
-    --flex-grid-12-col-2: 0.828rem;
-    --flex-grid-12-col-3: 0.75rem;
-    --flex-grid-12-col-4: 0.6725rem;
-    --flex-grid-12-col-6: 0.5125rem;
-    --flex-grid-12-col-8: 0.375rem;
-    --flex-grid-8-col-2: 0.77275rem;
-    --flex-grid-8-col-3: 0.65rem;
-    --flex-grid-8-col-4: 0.5rem;
-    --flex-grid-8-col-6: 0.275rem;
-    --flex-grid-6-col-2: 0.675rem;
-    --flex-grid-6-col-3: 0.5rem;
-    --flex-grid-6-col-4: 0.355rem;
-    --flex-grid-4-col-2: 0.5rem;
-    --flex-grid-4-col-3: 0.275rem;
+    gap: var(--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-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-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-4-col-2: 4rem;
+    --flex-grid-4-col-3: 2, 2rem;
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--sizing-16);
-    --flex-grid-12-gap: 0.9140625rem;
-    --flex-grid-8-gap: 0.875rem;
-    --flex-grid-6-gap: 0.8309375rem;
-    --flex-grid-4-gap: 0.75rem;
-    --flex-grid-12-col-2: 0.8325rem;
-    --flex-grid-12-col-3: 0.75rem;
-    --flex-grid-12-col-4: 0.6725rem;
-    --flex-grid-12-col-6: 0.5125rem;
-    --flex-grid-12-col-8: 0.375rem;
-    --flex-grid-8-col-2: 0.77275rem;
-    --flex-grid-8-col-3: 0.65rem;
-    --flex-grid-8-col-4: 0.5rem;
-    --flex-grid-8-col-6: 0.275rem;
-    --flex-grid-6-col-2: 0.675rem;
-    --flex-grid-6-col-3: 0.5rem;
-    --flex-grid-6-col-4: 0.355rem;
-    --flex-grid-4-col-2: 0.5rem;
-    --flex-grid-4-col-3: 0.275rem;
+    gap: var(--sizing-x8);
   }
   .xl-flex-grid-col-4 > * {
     width: calc(25% - var(--flex-grid-4-gap));
@@ -3493,12 +3493,12 @@ button {
 :root {
   --rls-action-color: var(--color-theme-300);
   --rls-action-ripple-color: var(--rls-action-color);
-  --rls-action-ripple-dimension: var(--sizing-36);
+  --rls-action-ripple-dimension: var(--sizing-x18);
   --rls-action-ripple-position: -1.125rem;
   --rls-avatar-font-size: var(--title-font-size);
-  --rls-avatar-border-radius: var(--sizing-8);
-  --rls-avatar-width: var(--sizing-48);
-  --rls-avatar-height: var(--sizing-48);
+  --rls-avatar-border-radius: var(--sizing-x4);
+  --rls-avatar-width: var(--sizing-x24);
+  --rls-avatar-height: var(--sizing-x24);
   --rls-amount-text-align: start;
   --rls-ballot-subtitle-width: 100%;
   --rls-ballot-subtitle-height: var(--smalltext-line-height);
@@ -3509,33 +3509,33 @@ button {
   --rls-boxfield-body-border: var(--border-1-theme-100);
   --rls-boxfield-body-shadow: none;
   --rls-boxfield-label-font-color: var(--color-theme-300);
-  --rls-breadcrumb-height: var(--sizing-36);
+  --rls-breadcrumb-height: var(--sizing-x18);
   --rls-button-label-text-transform: uppercase;
-  --rls-button-content-padding: 0rem var(--sizing-8);
-  --rls-button-content-radius: var(--sizing-4);
-  --rls-card-content-padding: var(--sizing-16);
+  --rls-button-content-padding: 0rem var(--sizing-x4);
+  --rls-button-content-radius: var(--sizing-x2);
+  --rls-card-content-padding: var(--sizing-x8);
   --rls-datatable-letter-spacing: 0.0625em;
   --rls-datatable-font-size: 0.875rem;
   --rls-form-footer-justify-content: end;
-  --rls-icon-font-size: var(--sizing-24);
-  --rls-icon-width: var(--sizing-24);
-  --rls-icon-height: var(--sizing-24);
+  --rls-icon-font-size: var(--sizing-x12);
+  --rls-icon-width: var(--sizing-x12);
+  --rls-icon-height: var(--sizing-x12);
   --rls-icon-color: inherit;
   --rls-input-font-color: var(--color-theme-500);
   --rls-input-font-size: var(--input-font-size);
   --rls-input-text-align: left;
   --rls-input-letter-spacing: var(--input-letter-spacing);
-  --rls-input-height: var(--sizing-24);
+  --rls-input-height: var(--sizing-x12);
   --rls-input-parent-padding: 0rem;
-  --rls-poster-height: var(--sizing-36);
-  --rls-poster-padding: var(--sizing-8);
+  --rls-poster-height: var(--sizing-x18);
+  --rls-poster-padding: var(--sizing-x4);
   --rls-snackbar-left: 50%;
-  --rls-switch-element-size: var(--sizing-24);
-  --rls-switch-bar-radius: var(--sizing-6);
-  --rls-switch-bar-height: var(--sizing-12);
+  --rls-switch-element-size: var(--sizing-x12);
+  --rls-switch-bar-radius: var(--sizing-x3);
+  --rls-switch-bar-height: var(--sizing-x6);
   --rls-tabulartext-char-width: 0.625rem;
-  --rls-tabulartext-pointer-width: 0.25rem;
-  --rls-toolbar-height: var(--sizing-56);
+  --rls-tabulartext-pointer-width: 2rem;
+  --rls-toolbar-height: var(--sizing-x28);
 }
 
 .rls-app__body {
@@ -3559,14 +3559,14 @@ button {
   --rls-toolbar-height: 100%;
   position: relative;
   width: 100%;
-  height: 3.5rem;
+  height: 28rem;
   box-sizing: border-box;
   z-index: var(--z-index-8);
   background: var(--background-theme-100);
 }
 .rls-app__header + .rls-app__page,
 .rls-app__header + .rls-app__content {
-  height: calc(100vh - 3.5rem);
+  height: calc(100vh - 28rem);
 }
 
 .rls-app__content {
@@ -3597,7 +3597,7 @@ button {
   padding: 0rem;
   overflow: auto;
   box-sizing: border-box;
-  border-radius: 0rem 0rem 2rem 0rem;
+  border-radius: 0rem 0rem 16rem 0rem;
   background: var(--background-theme-100);
 }
 .rls-app__page__nav + .rls-app__page__content {
@@ -3616,14 +3616,14 @@ button {
 }
 
 .rls-divider {
-  height: 0.125rem;
+  height: 1rem;
   background-image: linear-gradient(
     to right,
     var(--border-theme-100) 50%,
     rgba(255, 255, 255, 0) 0%
   );
   background-position: bottom;
-  background-size: var(--sizing-8);
+  background-size: var(--sizing-x4);
   background-repeat: repeat-x;
 }
 
@@ -3634,7 +3634,7 @@ button {
   position: relative;
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-4);
+  row-gap: var(--sizing-x2);
   width: 100%;
   box-sizing: border-box;
   transition: height 160ms 0ms var(--standard-curve);
@@ -3680,7 +3680,7 @@ button {
   box-sizing: border-box;
   overflow: hidden;
   opacity: var(--pvt-body-opacity);
-  border-radius: var(--sizing-4);
+  border-radius: var(--sizing-x2);
   background: var(--pvt-body-background);
   padding: var(--rls-boxfield-body-padding);
   border: var(--rls-boxfield-body-border);
@@ -3700,9 +3700,9 @@ button {
   white-space: nowrap;
 }
 .rls-box-field__error {
-  padding: 0rem var(--sizing-8);
+  padding: 0rem var(--sizing-x4);
   box-sizing: border-box;
-  margin-top: var(--sizing-2);
+  margin-top: var(--sizing-x1);
 }
 
 .rls-datatable {
@@ -3710,13 +3710,13 @@ button {
   --rls-input-letter-spacing: var(--rls-datatable-letter-spacing);
   position: relative;
   width: 100%;
-  border-radius: var(--sizing-8);
+  border-radius: var(--sizing-x4);
   box-sizing: border-box;
 }
 .rls-datatable > table {
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-8);
+  row-gap: var(--sizing-x4);
   border-spacing: 0;
   border-collapse: collapse;
 }
@@ -3725,8 +3725,8 @@ button {
 }
 .rls-datatable__header {
   display: flex;
-  column-gap: var(--sizing-8);
-  padding: 0rem var(--sizing-12);
+  column-gap: var(--sizing-x4);
+  padding: 0rem var(--sizing-x6);
   box-sizing: border-box;
 }
 .rls-datatable__title {
@@ -3735,25 +3735,25 @@ button {
   text-align: left;
   overflow: hidden;
   white-space: nowrap;
-  height: var(--sizing-40);
-  line-height: var(--sizing-40);
+  height: var(--sizing-x20);
+  line-height: var(--sizing-x20);
   color: var(--color-theme-500);
   font-size: var(--rls-datatable-font-size);
   letter-spacing: var(--rls-datatable-letter-spacing);
   font-weight: var(--font-weight-bold);
 }
 .rls-datatable__title--control {
-  --rls-avatar-border-radius: var(--sizing-6);
-  --rls-avatar-width: var(--sizing-32);
-  --rls-avatar-height: var(--sizing-32);
+  --rls-avatar-border-radius: var(--sizing-x3);
+  --rls-avatar-width: var(--sizing-x16);
+  --rls-avatar-height: var(--sizing-x16);
   --rls-avatar-font-size: var(--rls-datatable-font-size);
-  --rls-action-ripple-dimension: var(--sizing-32);
-  --rls-action-ripple-position: -1rem;
-  --rls-switch-element-size: var(--sizing-20);
-  --rls-switch-bar-radius: var(--sizing-4);
-  --rls-switch-bar-height: var(--sizing-8);
+  --rls-action-ripple-dimension: var(--sizing-x16);
+  --rls-action-ripple-position: -8rem;
+  --rls-switch-element-size: var(--sizing-x10);
+  --rls-switch-bar-radius: var(--sizing-x2);
+  --rls-switch-bar-height: var(--sizing-x4);
   display: flex;
-  width: var(--sizing-48);
+  width: var(--sizing-x24);
   padding: 0rem;
 }
 .rls-datatable__title--control > * {
@@ -3770,16 +3770,16 @@ button {
 .rls-datatable__tbody {
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-12);
+  row-gap: var(--sizing-x6);
 }
 .rls-datatable__data {
   position: relative;
   display: flex;
-  column-gap: var(--sizing-8);
-  padding: 0rem var(--sizing-12);
+  column-gap: var(--sizing-x4);
+  padding: 0rem var(--sizing-x6);
   box-sizing: border-box;
   border: var(--border-1-theme-100);
-  border-radius: var(--sizing-8);
+  border-radius: var(--sizing-x4);
   background: #fcfcfc;
 }
 .rls-datatable__data--error {
@@ -3788,8 +3788,8 @@ button {
 .rls-datatable__cell {
   position: relative;
   display: flex;
-  height: var(--sizing-40);
-  line-height: var(--sizing-40);
+  height: var(--sizing-x20);
+  line-height: var(--sizing-x20);
   text-align: left;
   cursor: default;
   overflow: hidden;
@@ -3803,17 +3803,17 @@ button {
   overflow: initial;
 }
 .rls-datatable__cell--control {
-  --rls-avatar-border-radius: var(--sizing-6);
-  --rls-avatar-width: var(--sizing-32);
-  --rls-avatar-height: var(--sizing-32);
+  --rls-avatar-border-radius: var(--sizing-x3);
+  --rls-avatar-width: var(--sizing-x16);
+  --rls-avatar-height: var(--sizing-x16);
   --rls-avatar-font-size: var(--rls-datatable-font-size);
-  --rls-action-ripple-dimension: var(--sizing-32);
-  --rls-action-ripple-position: -1rem;
-  --rls-switch-element-size: var(--sizing-20);
-  --rls-switch-bar-radius: var(--sizing-4);
-  --rls-switch-bar-height: var(--sizing-8);
+  --rls-action-ripple-dimension: var(--sizing-x16);
+  --rls-action-ripple-position: -8rem;
+  --rls-switch-element-size: var(--sizing-x10);
+  --rls-switch-bar-radius: var(--sizing-x2);
+  --rls-switch-bar-height: var(--sizing-x4);
   display: flex;
-  width: var(--sizing-48);
+  width: var(--sizing-x24);
   padding: 0rem;
 }
 .rls-datatable__cell--control > * {
@@ -3838,7 +3838,7 @@ button {
   box-shadow: none;
 }
 .rls-datatable__cell .rls-box-field__body .rls-input-field {
-  padding: var(--sizing-8) 0rem !important;
+  padding: var(--sizing-x4) 0rem !important;
 }
 .rls-datatable__cell .rls-box-field__icon {
   padding: 0rem;
@@ -3847,7 +3847,7 @@ button {
   display: none;
 }
 .rls-datatable__cell .rls-list-field .rls-box-field__body {
-  padding: var(--sizing-8) 0rem;
+  padding: var(--sizing-x4) 0rem;
   border: none;
   box-shadow: none;
 }
@@ -3857,31 +3857,31 @@ button {
   letter-spacing: var(--body-letter-spacing);
 }
 .rls-datatable__cell .rls-list-field__suggestions {
-  top: var(--sizing-48);
+  top: var(--sizing-x24);
 }
 .rls-datatable__cell .rls-list-field__suggestions--higher {
   top: initial;
-  bottom: var(--sizing-48);
+  bottom: var(--sizing-x24);
 }
 .rls-datatable__cell .rls-list-field__action .rls-icon {
-  font-size: var(--sizing-20);
+  font-size: var(--sizing-x10);
 }
 .rls-datatable__cell .rls-input {
-  margin: var(--sizing-8) 0rem;
+  margin: var(--sizing-x4) 0rem;
 }
 .rls-datatable__cell .rls-amount {
   font-size: var(--rls-datatable-font-size);
 }
 .rls-datatable__cell .rls-poster {
   display: flex;
-  width: calc(100% - var(--sizing-4));
+  width: calc(100% - var(--sizing-x2));
   height: 100%;
-  margin: var(--sizing-6) 0rem;
+  margin: var(--sizing-x3) 0rem;
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  height: var(--sizing-28);
-  line-height: var(--sizing-28);
+  height: var(--sizing-x14);
+  line-height: var(--sizing-x14);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3890,21 +3890,21 @@ button {
 }
 .rls-datatable__cell > .rls-ballot {
   padding: 0rem;
-  height: var(--sizing-40);
+  height: var(--sizing-x20);
 }
 .rls-datatable__cell > .rls-ballot .rls-ballot__title {
   font-weight: var(--font-weight-semibold);
   font-size: var(--smalltext-font-size);
   letter-spacing: var(--smalltext-letter-spacing);
-  min-height: 1rem;
-  line-height: 1rem;
+  min-height: 8rem;
+  line-height: 8rem;
 }
 .rls-datatable__cell > .rls-ballot .rls-ballot__subtitle {
   margin-top: 0rem;
   font-size: var(--overline-font-size);
   letter-spacing: var(--overline-letter-spacing);
-  min-height: 1rem;
-  line-height: 1rem;
+  min-height: 8rem;
+  line-height: 8rem;
 }
 .rls-datatable__cell > a:hover {
   color: var(--color-theme-700);
@@ -3915,30 +3915,30 @@ button {
   width: 100%;
   overflow: hidden;
   background: var(--color-theme-100);
-  border-radius: 0rem 0rem var(--sizing-8) var(--sizing-8);
+  border-radius: 0rem 0rem var(--sizing-x4) var(--sizing-x4);
 }
 
 .rls-form {
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-16);
+  row-gap: var(--sizing-x8);
 }
 .rls-form__content {
   position: relative;
-  padding: 0rem var(--sizing-16);
+  padding: 0rem var(--sizing-x8);
   box-sizing: border-box;
 }
 .rls-form__footer {
   position: relative;
   display: flex;
   justify-content: var(--rls-form-footer-justify-content);
-  column-gap: var(--sizing-16);
-  padding: 0rem var(--sizing-16);
+  column-gap: var(--sizing-x8);
+  padding: 0rem var(--sizing-x8);
   box-sizing: border-box;
 }
 
 .rls-list-field {
-  --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
+  --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
   --pvt-action-font-color: var(--color-theme-300);
   --pvt-list-height: 0rem;
   --pvt-list-max-height: 20rem;
@@ -3948,8 +3948,6 @@ button {
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
   position: relative;
-  float: left;
-  width: 100%;
   box-sizing: border-box;
 }
 .rls-list-field.rls-box-field--active {
@@ -3962,16 +3960,15 @@ button {
 }
 .rls-list-field__control {
   position: relative;
-  float: left;
-  width: calc(100% - var(--sizing-28));
-  height: var(--sizing-24);
-  line-height: var(--sizing-24);
+  width: calc(100% - var(--sizing-x14));
+  height: var(--sizing-x12);
+  line-height: var(--sizing-x12);
   padding: 0rem;
   cursor: text;
   border: none;
   outline: none;
-  color: var(--rls-input-font-color);
   background: transparent;
+  color: var(--rls-input-font-color);
   font-size: var(--rls-input-size);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--rls-input-letter-spacing);
@@ -3993,23 +3990,23 @@ button {
 }
 .rls-list-field__action {
   color: var(--pvt-action-font-color);
-  width: var(--sizing-24);
-  height: var(--sizing-24);
+  width: var(--sizing-x12);
+  height: var(--sizing-x12);
   padding: 0rem;
-  margin-left: var(--sizing-4);
+  margin-left: var(--sizing-x2);
   outline: none;
   background: transparent;
 }
 .rls-list-field__suggestions {
   position: absolute;
-  top: 4.25rem;
+  top: calc(100% + var(--sizing-x4));
   left: 0rem;
   width: 100%;
   height: 0rem;
   max-height: var(--pvt-list-max-height);
   overflow: hidden;
-  z-index: var(--z-index-1);
-  padding-bottom: var(--sizing-12);
+  z-index: var(--z-index-2);
+  padding-bottom: var(--sizing-x6);
 }
 .rls-list-field__suggestions--visible {
   --pvt-list-height: auto;
@@ -4023,7 +4020,7 @@ button {
 .rls-list-field__suggestions--higher {
   --pvt-list-transform-origin: 0% 100%;
   top: initial;
-  bottom: var(--sizing-48);
+  bottom: 100%;
 }
 .rls-list-field__suggestions__body {
   display: flex;
@@ -4031,9 +4028,9 @@ button {
   width: 100%;
   height: var(--pvt-list-height);
   max-height: var(--pvt-list-max-height);
-  padding: var(--sizing-8) var(--sizing-4);
+  padding: var(--sizing-x4) var(--sizing-x2);
   box-sizing: border-box;
-  border-radius: 0.5rem;
+  border-radius: 4rem;
   overflow: hidden;
   z-index: var(--z-index-2);
   background: var(--background-theme-500);
@@ -4053,7 +4050,7 @@ button {
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 0rem var(--sizing-8);
+  padding: 0rem var(--sizing-x4);
   box-sizing: border-box;
 }
 .rls-list-field__element {
@@ -4062,8 +4059,8 @@ button {
   --rls-ballot-subtitle-white-space: nowrap;
   box-sizing: border-box;
   outline: none;
-  border-radius: var(--sizing-8);
-  padding: var(--sizing-4);
+  border-radius: var(--sizing-x4);
+  padding: var(--sizing-x2);
   box-sizing: border-box;
 }
 .rls-list-field__element:hover {
@@ -4074,12 +4071,12 @@ button {
 }
 .rls-list-field__empty {
   display: flex;
-  padding: 0rem var(--sizing-8);
+  padding: 0rem var(--sizing-x4);
   box-sizing: border-box;
 }
 .rls-list-field__empty__avatar {
-  width: var(--sizing-40);
-  height: var(--sizing-40);
+  width: var(--sizing-x20);
+  height: var(--sizing-x20);
 }
 .rls-list-field__empty__avatar img {
   width: 100%;
@@ -4087,7 +4084,7 @@ button {
 .rls-list-field__empty__description {
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-4);
+  row-gap: var(--sizing-x2);
   overflow: hidden;
 }
 .rls-list-field__empty__description label {
@@ -4107,7 +4104,7 @@ button {
   right: 0rem;
   bottom: var(--pvt-backdrop-bottom);
   opacity: var(--pvt-backdrop-opacity);
-  z-index: var(--z-index-1);
+  z-index: var(--z-index-2);
   will-change: opacity;
   background: var(--backdrop-rolster-500);
   backdrop-filter: blur(2px);
@@ -4142,22 +4139,22 @@ button {
     width: 100%;
     max-width: 25rem;
     max-height: 75%;
-    padding: var(--sizing-16) var(--sizing-4);
-    border-radius: var(--sizing-8) var(--sizing-8) 0rem 0rem;
+    padding: var(--sizing-x8) var(--sizing-x2);
+    border-radius: var(--sizing-x4) var(--sizing-x4) 0rem 0rem;
     border: none;
     box-shadow: none;
   }
   .rls-list-field__empty {
     flex-direction: column;
     margin: auto;
-    padding: var(--sizing-24) 0rem;
+    padding: var(--sizing-x12) 0rem;
   }
   .rls-list-field__empty__avatar {
     width: 100%;
     height: auto;
     max-width: 8rem;
     margin: auto;
-    padding-bottom: var(--sizing-12);
+    padding-bottom: var(--sizing-x6);
   }
   .rls-list-field__empty__description {
     width: 100%;
@@ -4165,6 +4162,6 @@ button {
   }
   .rls-list-field__empty__description label {
     text-align: center;
-    margin-top: var(--sizing-4);
+    margin-top: var(--sizing-x2);
   }
 }