@nuvoui/core 1.3.3 → 1.3.5

package/dist/nuvoui.css

@@ -215,7 +215,7 @@ input[type=number],
 input[type=search],
 textarea {
   padding: 0.5rem;
-  border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
+  border: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
   border-radius: 0.25rem;
   width: 100%;
   font-family: var(--font-family-base);
@@ -238,7 +238,7 @@ input[type=radio] {
 
 select {
   padding: 0.5rem;
-  border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
+  border: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
   border-radius: 0.25rem;
   width: 100%;
   font-family: var(--font-family-base);
@@ -252,13 +252,13 @@ select:focus {
 blockquote {
   margin: 1rem 0;
   padding: 0.5rem 1rem;
-  border-left: var(--border-size, 4px) var(--border-style, solid) var(--border-color, var(--secondary));
+  border-left: var(--border-size, 4px) var(--border-style, solid) var(--border-base, var(--secondary));
   font-style: italic;
 }
 
 hr {
   border: none;
-  border-top: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
+  border-top: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
   margin: 1rem 0;
 }
 
@@ -571,73 +571,73 @@ code {
   align-self: auto;
 }
 .flex > .fill-1, .flex\@xs > .fill-1, .flex\@sm > .fill-1, .flex\@md > .fill-1, .flex\@lg > .fill-1, .flex\@xl > .fill-1, .flex\@2xl > .fill-1 {
-  flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+  flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
 }
 .flex > .order-1, .flex\@xs > .order-1, .flex\@sm > .order-1, .flex\@md > .order-1, .flex\@lg > .order-1, .flex\@xl > .order-1, .flex\@2xl > .order-1 {
   order: 1;
 }
 .flex > .fill-2, .flex\@xs > .fill-2, .flex\@sm > .fill-2, .flex\@md > .fill-2, .flex\@lg > .fill-2, .flex\@xl > .fill-2, .flex\@2xl > .fill-2 {
-  flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+  flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
 }
 .flex > .order-2, .flex\@xs > .order-2, .flex\@sm > .order-2, .flex\@md > .order-2, .flex\@lg > .order-2, .flex\@xl > .order-2, .flex\@2xl > .order-2 {
   order: 2;
 }
 .flex > .fill-3, .flex\@xs > .fill-3, .flex\@sm > .fill-3, .flex\@md > .fill-3, .flex\@lg > .fill-3, .flex\@xl > .fill-3, .flex\@2xl > .fill-3 {
-  flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+  flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
 }
 .flex > .order-3, .flex\@xs > .order-3, .flex\@sm > .order-3, .flex\@md > .order-3, .flex\@lg > .order-3, .flex\@xl > .order-3, .flex\@2xl > .order-3 {
   order: 3;
 }
 .flex > .fill-4, .flex\@xs > .fill-4, .flex\@sm > .fill-4, .flex\@md > .fill-4, .flex\@lg > .fill-4, .flex\@xl > .fill-4, .flex\@2xl > .fill-4 {
-  flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+  flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
 }
 .flex > .order-4, .flex\@xs > .order-4, .flex\@sm > .order-4, .flex\@md > .order-4, .flex\@lg > .order-4, .flex\@xl > .order-4, .flex\@2xl > .order-4 {
   order: 4;
 }
 .flex > .fill-5, .flex\@xs > .fill-5, .flex\@sm > .fill-5, .flex\@md > .fill-5, .flex\@lg > .fill-5, .flex\@xl > .fill-5, .flex\@2xl > .fill-5 {
-  flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+  flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
 }
 .flex > .order-5, .flex\@xs > .order-5, .flex\@sm > .order-5, .flex\@md > .order-5, .flex\@lg > .order-5, .flex\@xl > .order-5, .flex\@2xl > .order-5 {
   order: 5;
 }
 .flex > .fill-6, .flex\@xs > .fill-6, .flex\@sm > .fill-6, .flex\@md > .fill-6, .flex\@lg > .fill-6, .flex\@xl > .fill-6, .flex\@2xl > .fill-6 {
-  flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+  flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
 }
 .flex > .order-6, .flex\@xs > .order-6, .flex\@sm > .order-6, .flex\@md > .order-6, .flex\@lg > .order-6, .flex\@xl > .order-6, .flex\@2xl > .order-6 {
   order: 6;
 }
 .flex > .fill-7, .flex\@xs > .fill-7, .flex\@sm > .fill-7, .flex\@md > .fill-7, .flex\@lg > .fill-7, .flex\@xl > .fill-7, .flex\@2xl > .fill-7 {
-  flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+  flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
 }
 .flex > .order-7, .flex\@xs > .order-7, .flex\@sm > .order-7, .flex\@md > .order-7, .flex\@lg > .order-7, .flex\@xl > .order-7, .flex\@2xl > .order-7 {
   order: 7;
 }
 .flex > .fill-8, .flex\@xs > .fill-8, .flex\@sm > .fill-8, .flex\@md > .fill-8, .flex\@lg > .fill-8, .flex\@xl > .fill-8, .flex\@2xl > .fill-8 {
-  flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+  flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
 }
 .flex > .order-8, .flex\@xs > .order-8, .flex\@sm > .order-8, .flex\@md > .order-8, .flex\@lg > .order-8, .flex\@xl > .order-8, .flex\@2xl > .order-8 {
   order: 8;
 }
 .flex > .fill-9, .flex\@xs > .fill-9, .flex\@sm > .fill-9, .flex\@md > .fill-9, .flex\@lg > .fill-9, .flex\@xl > .fill-9, .flex\@2xl > .fill-9 {
-  flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+  flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
 }
 .flex > .order-9, .flex\@xs > .order-9, .flex\@sm > .order-9, .flex\@md > .order-9, .flex\@lg > .order-9, .flex\@xl > .order-9, .flex\@2xl > .order-9 {
   order: 9;
 }
 .flex > .fill-10, .flex\@xs > .fill-10, .flex\@sm > .fill-10, .flex\@md > .fill-10, .flex\@lg > .fill-10, .flex\@xl > .fill-10, .flex\@2xl > .fill-10 {
-  flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+  flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
 }
 .flex > .order-10, .flex\@xs > .order-10, .flex\@sm > .order-10, .flex\@md > .order-10, .flex\@lg > .order-10, .flex\@xl > .order-10, .flex\@2xl > .order-10 {
   order: 10;
 }
 .flex > .fill-11, .flex\@xs > .fill-11, .flex\@sm > .fill-11, .flex\@md > .fill-11, .flex\@lg > .fill-11, .flex\@xl > .fill-11, .flex\@2xl > .fill-11 {
-  flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+  flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
 }
 .flex > .order-11, .flex\@xs > .order-11, .flex\@sm > .order-11, .flex\@md > .order-11, .flex\@lg > .order-11, .flex\@xl > .order-11, .flex\@2xl > .order-11 {
   order: 11;
 }
 .flex > .fill-12, .flex\@xs > .fill-12, .flex\@sm > .fill-12, .flex\@md > .fill-12, .flex\@lg > .fill-12, .flex\@xl > .fill-12, .flex\@2xl > .fill-12 {
-  flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+  flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
 }
 .flex > .order-12, .flex\@xs > .order-12, .flex\@sm > .order-12, .flex\@md > .order-12, .flex\@lg > .order-12, .flex\@xl > .order-12, .flex\@2xl > .order-12 {
   order: 12;
@@ -771,73 +771,73 @@ code {
     align-self: auto;
   }
   .flex > .fill-1\@xs, .flex\@xs > .fill-1\@xs, .flex\@sm > .fill-1\@xs, .flex\@md > .fill-1\@xs, .flex\@lg > .fill-1\@xs, .flex\@xl > .fill-1\@xs, .flex\@2xl > .fill-1\@xs {
-    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
   }
   .flex > .order-1\@xs, .flex\@xs > .order-1\@xs, .flex\@sm > .order-1\@xs, .flex\@md > .order-1\@xs, .flex\@lg > .order-1\@xs, .flex\@xl > .order-1\@xs, .flex\@2xl > .order-1\@xs {
     order: 1;
   }
   .flex > .fill-2\@xs, .flex\@xs > .fill-2\@xs, .flex\@sm > .fill-2\@xs, .flex\@md > .fill-2\@xs, .flex\@lg > .fill-2\@xs, .flex\@xl > .fill-2\@xs, .flex\@2xl > .fill-2\@xs {
-    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
   }
   .flex > .order-2\@xs, .flex\@xs > .order-2\@xs, .flex\@sm > .order-2\@xs, .flex\@md > .order-2\@xs, .flex\@lg > .order-2\@xs, .flex\@xl > .order-2\@xs, .flex\@2xl > .order-2\@xs {
     order: 2;
   }
   .flex > .fill-3\@xs, .flex\@xs > .fill-3\@xs, .flex\@sm > .fill-3\@xs, .flex\@md > .fill-3\@xs, .flex\@lg > .fill-3\@xs, .flex\@xl > .fill-3\@xs, .flex\@2xl > .fill-3\@xs {
-    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
   }
   .flex > .order-3\@xs, .flex\@xs > .order-3\@xs, .flex\@sm > .order-3\@xs, .flex\@md > .order-3\@xs, .flex\@lg > .order-3\@xs, .flex\@xl > .order-3\@xs, .flex\@2xl > .order-3\@xs {
     order: 3;
   }
   .flex > .fill-4\@xs, .flex\@xs > .fill-4\@xs, .flex\@sm > .fill-4\@xs, .flex\@md > .fill-4\@xs, .flex\@lg > .fill-4\@xs, .flex\@xl > .fill-4\@xs, .flex\@2xl > .fill-4\@xs {
-    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
   }
   .flex > .order-4\@xs, .flex\@xs > .order-4\@xs, .flex\@sm > .order-4\@xs, .flex\@md > .order-4\@xs, .flex\@lg > .order-4\@xs, .flex\@xl > .order-4\@xs, .flex\@2xl > .order-4\@xs {
     order: 4;
   }
   .flex > .fill-5\@xs, .flex\@xs > .fill-5\@xs, .flex\@sm > .fill-5\@xs, .flex\@md > .fill-5\@xs, .flex\@lg > .fill-5\@xs, .flex\@xl > .fill-5\@xs, .flex\@2xl > .fill-5\@xs {
-    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
   }
   .flex > .order-5\@xs, .flex\@xs > .order-5\@xs, .flex\@sm > .order-5\@xs, .flex\@md > .order-5\@xs, .flex\@lg > .order-5\@xs, .flex\@xl > .order-5\@xs, .flex\@2xl > .order-5\@xs {
     order: 5;
   }
   .flex > .fill-6\@xs, .flex\@xs > .fill-6\@xs, .flex\@sm > .fill-6\@xs, .flex\@md > .fill-6\@xs, .flex\@lg > .fill-6\@xs, .flex\@xl > .fill-6\@xs, .flex\@2xl > .fill-6\@xs {
-    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
   }
   .flex > .order-6\@xs, .flex\@xs > .order-6\@xs, .flex\@sm > .order-6\@xs, .flex\@md > .order-6\@xs, .flex\@lg > .order-6\@xs, .flex\@xl > .order-6\@xs, .flex\@2xl > .order-6\@xs {
     order: 6;
   }
   .flex > .fill-7\@xs, .flex\@xs > .fill-7\@xs, .flex\@sm > .fill-7\@xs, .flex\@md > .fill-7\@xs, .flex\@lg > .fill-7\@xs, .flex\@xl > .fill-7\@xs, .flex\@2xl > .fill-7\@xs {
-    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
   }
   .flex > .order-7\@xs, .flex\@xs > .order-7\@xs, .flex\@sm > .order-7\@xs, .flex\@md > .order-7\@xs, .flex\@lg > .order-7\@xs, .flex\@xl > .order-7\@xs, .flex\@2xl > .order-7\@xs {
     order: 7;
   }
   .flex > .fill-8\@xs, .flex\@xs > .fill-8\@xs, .flex\@sm > .fill-8\@xs, .flex\@md > .fill-8\@xs, .flex\@lg > .fill-8\@xs, .flex\@xl > .fill-8\@xs, .flex\@2xl > .fill-8\@xs {
-    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
   }
   .flex > .order-8\@xs, .flex\@xs > .order-8\@xs, .flex\@sm > .order-8\@xs, .flex\@md > .order-8\@xs, .flex\@lg > .order-8\@xs, .flex\@xl > .order-8\@xs, .flex\@2xl > .order-8\@xs {
     order: 8;
   }
   .flex > .fill-9\@xs, .flex\@xs > .fill-9\@xs, .flex\@sm > .fill-9\@xs, .flex\@md > .fill-9\@xs, .flex\@lg > .fill-9\@xs, .flex\@xl > .fill-9\@xs, .flex\@2xl > .fill-9\@xs {
-    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
   }
   .flex > .order-9\@xs, .flex\@xs > .order-9\@xs, .flex\@sm > .order-9\@xs, .flex\@md > .order-9\@xs, .flex\@lg > .order-9\@xs, .flex\@xl > .order-9\@xs, .flex\@2xl > .order-9\@xs {
     order: 9;
   }
   .flex > .fill-10\@xs, .flex\@xs > .fill-10\@xs, .flex\@sm > .fill-10\@xs, .flex\@md > .fill-10\@xs, .flex\@lg > .fill-10\@xs, .flex\@xl > .fill-10\@xs, .flex\@2xl > .fill-10\@xs {
-    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
   }
   .flex > .order-10\@xs, .flex\@xs > .order-10\@xs, .flex\@sm > .order-10\@xs, .flex\@md > .order-10\@xs, .flex\@lg > .order-10\@xs, .flex\@xl > .order-10\@xs, .flex\@2xl > .order-10\@xs {
     order: 10;
   }
   .flex > .fill-11\@xs, .flex\@xs > .fill-11\@xs, .flex\@sm > .fill-11\@xs, .flex\@md > .fill-11\@xs, .flex\@lg > .fill-11\@xs, .flex\@xl > .fill-11\@xs, .flex\@2xl > .fill-11\@xs {
-    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
   }
   .flex > .order-11\@xs, .flex\@xs > .order-11\@xs, .flex\@sm > .order-11\@xs, .flex\@md > .order-11\@xs, .flex\@lg > .order-11\@xs, .flex\@xl > .order-11\@xs, .flex\@2xl > .order-11\@xs {
     order: 11;
   }
   .flex > .fill-12\@xs, .flex\@xs > .fill-12\@xs, .flex\@sm > .fill-12\@xs, .flex\@md > .fill-12\@xs, .flex\@lg > .fill-12\@xs, .flex\@xl > .fill-12\@xs, .flex\@2xl > .fill-12\@xs {
-    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
   }
   .flex > .order-12\@xs, .flex\@xs > .order-12\@xs, .flex\@sm > .order-12\@xs, .flex\@md > .order-12\@xs, .flex\@lg > .order-12\@xs, .flex\@xl > .order-12\@xs, .flex\@2xl > .order-12\@xs {
     order: 12;
@@ -971,73 +971,73 @@ code {
     align-self: auto;
   }
   .flex > .fill-1\@sm, .flex\@xs > .fill-1\@sm, .flex\@sm > .fill-1\@sm, .flex\@md > .fill-1\@sm, .flex\@lg > .fill-1\@sm, .flex\@xl > .fill-1\@sm, .flex\@2xl > .fill-1\@sm {
-    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
   }
   .flex > .order-1\@sm, .flex\@xs > .order-1\@sm, .flex\@sm > .order-1\@sm, .flex\@md > .order-1\@sm, .flex\@lg > .order-1\@sm, .flex\@xl > .order-1\@sm, .flex\@2xl > .order-1\@sm {
     order: 1;
   }
   .flex > .fill-2\@sm, .flex\@xs > .fill-2\@sm, .flex\@sm > .fill-2\@sm, .flex\@md > .fill-2\@sm, .flex\@lg > .fill-2\@sm, .flex\@xl > .fill-2\@sm, .flex\@2xl > .fill-2\@sm {
-    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
   }
   .flex > .order-2\@sm, .flex\@xs > .order-2\@sm, .flex\@sm > .order-2\@sm, .flex\@md > .order-2\@sm, .flex\@lg > .order-2\@sm, .flex\@xl > .order-2\@sm, .flex\@2xl > .order-2\@sm {
     order: 2;
   }
   .flex > .fill-3\@sm, .flex\@xs > .fill-3\@sm, .flex\@sm > .fill-3\@sm, .flex\@md > .fill-3\@sm, .flex\@lg > .fill-3\@sm, .flex\@xl > .fill-3\@sm, .flex\@2xl > .fill-3\@sm {
-    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
   }
   .flex > .order-3\@sm, .flex\@xs > .order-3\@sm, .flex\@sm > .order-3\@sm, .flex\@md > .order-3\@sm, .flex\@lg > .order-3\@sm, .flex\@xl > .order-3\@sm, .flex\@2xl > .order-3\@sm {
     order: 3;
   }
   .flex > .fill-4\@sm, .flex\@xs > .fill-4\@sm, .flex\@sm > .fill-4\@sm, .flex\@md > .fill-4\@sm, .flex\@lg > .fill-4\@sm, .flex\@xl > .fill-4\@sm, .flex\@2xl > .fill-4\@sm {
-    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
   }
   .flex > .order-4\@sm, .flex\@xs > .order-4\@sm, .flex\@sm > .order-4\@sm, .flex\@md > .order-4\@sm, .flex\@lg > .order-4\@sm, .flex\@xl > .order-4\@sm, .flex\@2xl > .order-4\@sm {
     order: 4;
   }
   .flex > .fill-5\@sm, .flex\@xs > .fill-5\@sm, .flex\@sm > .fill-5\@sm, .flex\@md > .fill-5\@sm, .flex\@lg > .fill-5\@sm, .flex\@xl > .fill-5\@sm, .flex\@2xl > .fill-5\@sm {
-    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
   }
   .flex > .order-5\@sm, .flex\@xs > .order-5\@sm, .flex\@sm > .order-5\@sm, .flex\@md > .order-5\@sm, .flex\@lg > .order-5\@sm, .flex\@xl > .order-5\@sm, .flex\@2xl > .order-5\@sm {
     order: 5;
   }
   .flex > .fill-6\@sm, .flex\@xs > .fill-6\@sm, .flex\@sm > .fill-6\@sm, .flex\@md > .fill-6\@sm, .flex\@lg > .fill-6\@sm, .flex\@xl > .fill-6\@sm, .flex\@2xl > .fill-6\@sm {
-    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
   }
   .flex > .order-6\@sm, .flex\@xs > .order-6\@sm, .flex\@sm > .order-6\@sm, .flex\@md > .order-6\@sm, .flex\@lg > .order-6\@sm, .flex\@xl > .order-6\@sm, .flex\@2xl > .order-6\@sm {
     order: 6;
   }
   .flex > .fill-7\@sm, .flex\@xs > .fill-7\@sm, .flex\@sm > .fill-7\@sm, .flex\@md > .fill-7\@sm, .flex\@lg > .fill-7\@sm, .flex\@xl > .fill-7\@sm, .flex\@2xl > .fill-7\@sm {
-    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
   }
   .flex > .order-7\@sm, .flex\@xs > .order-7\@sm, .flex\@sm > .order-7\@sm, .flex\@md > .order-7\@sm, .flex\@lg > .order-7\@sm, .flex\@xl > .order-7\@sm, .flex\@2xl > .order-7\@sm {
     order: 7;
   }
   .flex > .fill-8\@sm, .flex\@xs > .fill-8\@sm, .flex\@sm > .fill-8\@sm, .flex\@md > .fill-8\@sm, .flex\@lg > .fill-8\@sm, .flex\@xl > .fill-8\@sm, .flex\@2xl > .fill-8\@sm {
-    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
   }
   .flex > .order-8\@sm, .flex\@xs > .order-8\@sm, .flex\@sm > .order-8\@sm, .flex\@md > .order-8\@sm, .flex\@lg > .order-8\@sm, .flex\@xl > .order-8\@sm, .flex\@2xl > .order-8\@sm {
     order: 8;
   }
   .flex > .fill-9\@sm, .flex\@xs > .fill-9\@sm, .flex\@sm > .fill-9\@sm, .flex\@md > .fill-9\@sm, .flex\@lg > .fill-9\@sm, .flex\@xl > .fill-9\@sm, .flex\@2xl > .fill-9\@sm {
-    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
   }
   .flex > .order-9\@sm, .flex\@xs > .order-9\@sm, .flex\@sm > .order-9\@sm, .flex\@md > .order-9\@sm, .flex\@lg > .order-9\@sm, .flex\@xl > .order-9\@sm, .flex\@2xl > .order-9\@sm {
     order: 9;
   }
   .flex > .fill-10\@sm, .flex\@xs > .fill-10\@sm, .flex\@sm > .fill-10\@sm, .flex\@md > .fill-10\@sm, .flex\@lg > .fill-10\@sm, .flex\@xl > .fill-10\@sm, .flex\@2xl > .fill-10\@sm {
-    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
   }
   .flex > .order-10\@sm, .flex\@xs > .order-10\@sm, .flex\@sm > .order-10\@sm, .flex\@md > .order-10\@sm, .flex\@lg > .order-10\@sm, .flex\@xl > .order-10\@sm, .flex\@2xl > .order-10\@sm {
     order: 10;
   }
   .flex > .fill-11\@sm, .flex\@xs > .fill-11\@sm, .flex\@sm > .fill-11\@sm, .flex\@md > .fill-11\@sm, .flex\@lg > .fill-11\@sm, .flex\@xl > .fill-11\@sm, .flex\@2xl > .fill-11\@sm {
-    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
   }
   .flex > .order-11\@sm, .flex\@xs > .order-11\@sm, .flex\@sm > .order-11\@sm, .flex\@md > .order-11\@sm, .flex\@lg > .order-11\@sm, .flex\@xl > .order-11\@sm, .flex\@2xl > .order-11\@sm {
     order: 11;
   }
   .flex > .fill-12\@sm, .flex\@xs > .fill-12\@sm, .flex\@sm > .fill-12\@sm, .flex\@md > .fill-12\@sm, .flex\@lg > .fill-12\@sm, .flex\@xl > .fill-12\@sm, .flex\@2xl > .fill-12\@sm {
-    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
   }
   .flex > .order-12\@sm, .flex\@xs > .order-12\@sm, .flex\@sm > .order-12\@sm, .flex\@md > .order-12\@sm, .flex\@lg > .order-12\@sm, .flex\@xl > .order-12\@sm, .flex\@2xl > .order-12\@sm {
     order: 12;
@@ -1171,73 +1171,73 @@ code {
     align-self: auto;
   }
   .flex > .fill-1\@md, .flex\@xs > .fill-1\@md, .flex\@sm > .fill-1\@md, .flex\@md > .fill-1\@md, .flex\@lg > .fill-1\@md, .flex\@xl > .fill-1\@md, .flex\@2xl > .fill-1\@md {
-    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
   }
   .flex > .order-1\@md, .flex\@xs > .order-1\@md, .flex\@sm > .order-1\@md, .flex\@md > .order-1\@md, .flex\@lg > .order-1\@md, .flex\@xl > .order-1\@md, .flex\@2xl > .order-1\@md {
     order: 1;
   }
   .flex > .fill-2\@md, .flex\@xs > .fill-2\@md, .flex\@sm > .fill-2\@md, .flex\@md > .fill-2\@md, .flex\@lg > .fill-2\@md, .flex\@xl > .fill-2\@md, .flex\@2xl > .fill-2\@md {
-    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
   }
   .flex > .order-2\@md, .flex\@xs > .order-2\@md, .flex\@sm > .order-2\@md, .flex\@md > .order-2\@md, .flex\@lg > .order-2\@md, .flex\@xl > .order-2\@md, .flex\@2xl > .order-2\@md {
     order: 2;
   }
   .flex > .fill-3\@md, .flex\@xs > .fill-3\@md, .flex\@sm > .fill-3\@md, .flex\@md > .fill-3\@md, .flex\@lg > .fill-3\@md, .flex\@xl > .fill-3\@md, .flex\@2xl > .fill-3\@md {
-    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
   }
   .flex > .order-3\@md, .flex\@xs > .order-3\@md, .flex\@sm > .order-3\@md, .flex\@md > .order-3\@md, .flex\@lg > .order-3\@md, .flex\@xl > .order-3\@md, .flex\@2xl > .order-3\@md {
     order: 3;
   }
   .flex > .fill-4\@md, .flex\@xs > .fill-4\@md, .flex\@sm > .fill-4\@md, .flex\@md > .fill-4\@md, .flex\@lg > .fill-4\@md, .flex\@xl > .fill-4\@md, .flex\@2xl > .fill-4\@md {
-    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
   }
   .flex > .order-4\@md, .flex\@xs > .order-4\@md, .flex\@sm > .order-4\@md, .flex\@md > .order-4\@md, .flex\@lg > .order-4\@md, .flex\@xl > .order-4\@md, .flex\@2xl > .order-4\@md {
     order: 4;
   }
   .flex > .fill-5\@md, .flex\@xs > .fill-5\@md, .flex\@sm > .fill-5\@md, .flex\@md > .fill-5\@md, .flex\@lg > .fill-5\@md, .flex\@xl > .fill-5\@md, .flex\@2xl > .fill-5\@md {
-    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
   }
   .flex > .order-5\@md, .flex\@xs > .order-5\@md, .flex\@sm > .order-5\@md, .flex\@md > .order-5\@md, .flex\@lg > .order-5\@md, .flex\@xl > .order-5\@md, .flex\@2xl > .order-5\@md {
     order: 5;
   }
   .flex > .fill-6\@md, .flex\@xs > .fill-6\@md, .flex\@sm > .fill-6\@md, .flex\@md > .fill-6\@md, .flex\@lg > .fill-6\@md, .flex\@xl > .fill-6\@md, .flex\@2xl > .fill-6\@md {
-    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
   }
   .flex > .order-6\@md, .flex\@xs > .order-6\@md, .flex\@sm > .order-6\@md, .flex\@md > .order-6\@md, .flex\@lg > .order-6\@md, .flex\@xl > .order-6\@md, .flex\@2xl > .order-6\@md {
     order: 6;
   }
   .flex > .fill-7\@md, .flex\@xs > .fill-7\@md, .flex\@sm > .fill-7\@md, .flex\@md > .fill-7\@md, .flex\@lg > .fill-7\@md, .flex\@xl > .fill-7\@md, .flex\@2xl > .fill-7\@md {
-    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
   }
   .flex > .order-7\@md, .flex\@xs > .order-7\@md, .flex\@sm > .order-7\@md, .flex\@md > .order-7\@md, .flex\@lg > .order-7\@md, .flex\@xl > .order-7\@md, .flex\@2xl > .order-7\@md {
     order: 7;
   }
   .flex > .fill-8\@md, .flex\@xs > .fill-8\@md, .flex\@sm > .fill-8\@md, .flex\@md > .fill-8\@md, .flex\@lg > .fill-8\@md, .flex\@xl > .fill-8\@md, .flex\@2xl > .fill-8\@md {
-    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
   }
   .flex > .order-8\@md, .flex\@xs > .order-8\@md, .flex\@sm > .order-8\@md, .flex\@md > .order-8\@md, .flex\@lg > .order-8\@md, .flex\@xl > .order-8\@md, .flex\@2xl > .order-8\@md {
     order: 8;
   }
   .flex > .fill-9\@md, .flex\@xs > .fill-9\@md, .flex\@sm > .fill-9\@md, .flex\@md > .fill-9\@md, .flex\@lg > .fill-9\@md, .flex\@xl > .fill-9\@md, .flex\@2xl > .fill-9\@md {
-    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
   }
   .flex > .order-9\@md, .flex\@xs > .order-9\@md, .flex\@sm > .order-9\@md, .flex\@md > .order-9\@md, .flex\@lg > .order-9\@md, .flex\@xl > .order-9\@md, .flex\@2xl > .order-9\@md {
     order: 9;
   }
   .flex > .fill-10\@md, .flex\@xs > .fill-10\@md, .flex\@sm > .fill-10\@md, .flex\@md > .fill-10\@md, .flex\@lg > .fill-10\@md, .flex\@xl > .fill-10\@md, .flex\@2xl > .fill-10\@md {
-    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
   }
   .flex > .order-10\@md, .flex\@xs > .order-10\@md, .flex\@sm > .order-10\@md, .flex\@md > .order-10\@md, .flex\@lg > .order-10\@md, .flex\@xl > .order-10\@md, .flex\@2xl > .order-10\@md {
     order: 10;
   }
   .flex > .fill-11\@md, .flex\@xs > .fill-11\@md, .flex\@sm > .fill-11\@md, .flex\@md > .fill-11\@md, .flex\@lg > .fill-11\@md, .flex\@xl > .fill-11\@md, .flex\@2xl > .fill-11\@md {
-    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
   }
   .flex > .order-11\@md, .flex\@xs > .order-11\@md, .flex\@sm > .order-11\@md, .flex\@md > .order-11\@md, .flex\@lg > .order-11\@md, .flex\@xl > .order-11\@md, .flex\@2xl > .order-11\@md {
     order: 11;
   }
   .flex > .fill-12\@md, .flex\@xs > .fill-12\@md, .flex\@sm > .fill-12\@md, .flex\@md > .fill-12\@md, .flex\@lg > .fill-12\@md, .flex\@xl > .fill-12\@md, .flex\@2xl > .fill-12\@md {
-    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
   }
   .flex > .order-12\@md, .flex\@xs > .order-12\@md, .flex\@sm > .order-12\@md, .flex\@md > .order-12\@md, .flex\@lg > .order-12\@md, .flex\@xl > .order-12\@md, .flex\@2xl > .order-12\@md {
     order: 12;
@@ -1371,73 +1371,73 @@ code {
     align-self: auto;
   }
   .flex > .fill-1\@lg, .flex\@xs > .fill-1\@lg, .flex\@sm > .fill-1\@lg, .flex\@md > .fill-1\@lg, .flex\@lg > .fill-1\@lg, .flex\@xl > .fill-1\@lg, .flex\@2xl > .fill-1\@lg {
-    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
   }
   .flex > .order-1\@lg, .flex\@xs > .order-1\@lg, .flex\@sm > .order-1\@lg, .flex\@md > .order-1\@lg, .flex\@lg > .order-1\@lg, .flex\@xl > .order-1\@lg, .flex\@2xl > .order-1\@lg {
     order: 1;
   }
   .flex > .fill-2\@lg, .flex\@xs > .fill-2\@lg, .flex\@sm > .fill-2\@lg, .flex\@md > .fill-2\@lg, .flex\@lg > .fill-2\@lg, .flex\@xl > .fill-2\@lg, .flex\@2xl > .fill-2\@lg {
-    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
   }
   .flex > .order-2\@lg, .flex\@xs > .order-2\@lg, .flex\@sm > .order-2\@lg, .flex\@md > .order-2\@lg, .flex\@lg > .order-2\@lg, .flex\@xl > .order-2\@lg, .flex\@2xl > .order-2\@lg {
     order: 2;
   }
   .flex > .fill-3\@lg, .flex\@xs > .fill-3\@lg, .flex\@sm > .fill-3\@lg, .flex\@md > .fill-3\@lg, .flex\@lg > .fill-3\@lg, .flex\@xl > .fill-3\@lg, .flex\@2xl > .fill-3\@lg {
-    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
   }
   .flex > .order-3\@lg, .flex\@xs > .order-3\@lg, .flex\@sm > .order-3\@lg, .flex\@md > .order-3\@lg, .flex\@lg > .order-3\@lg, .flex\@xl > .order-3\@lg, .flex\@2xl > .order-3\@lg {
     order: 3;
   }
   .flex > .fill-4\@lg, .flex\@xs > .fill-4\@lg, .flex\@sm > .fill-4\@lg, .flex\@md > .fill-4\@lg, .flex\@lg > .fill-4\@lg, .flex\@xl > .fill-4\@lg, .flex\@2xl > .fill-4\@lg {
-    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
   }
   .flex > .order-4\@lg, .flex\@xs > .order-4\@lg, .flex\@sm > .order-4\@lg, .flex\@md > .order-4\@lg, .flex\@lg > .order-4\@lg, .flex\@xl > .order-4\@lg, .flex\@2xl > .order-4\@lg {
     order: 4;
   }
   .flex > .fill-5\@lg, .flex\@xs > .fill-5\@lg, .flex\@sm > .fill-5\@lg, .flex\@md > .fill-5\@lg, .flex\@lg > .fill-5\@lg, .flex\@xl > .fill-5\@lg, .flex\@2xl > .fill-5\@lg {
-    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
   }
   .flex > .order-5\@lg, .flex\@xs > .order-5\@lg, .flex\@sm > .order-5\@lg, .flex\@md > .order-5\@lg, .flex\@lg > .order-5\@lg, .flex\@xl > .order-5\@lg, .flex\@2xl > .order-5\@lg {
     order: 5;
   }
   .flex > .fill-6\@lg, .flex\@xs > .fill-6\@lg, .flex\@sm > .fill-6\@lg, .flex\@md > .fill-6\@lg, .flex\@lg > .fill-6\@lg, .flex\@xl > .fill-6\@lg, .flex\@2xl > .fill-6\@lg {
-    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
   }
   .flex > .order-6\@lg, .flex\@xs > .order-6\@lg, .flex\@sm > .order-6\@lg, .flex\@md > .order-6\@lg, .flex\@lg > .order-6\@lg, .flex\@xl > .order-6\@lg, .flex\@2xl > .order-6\@lg {
     order: 6;
   }
   .flex > .fill-7\@lg, .flex\@xs > .fill-7\@lg, .flex\@sm > .fill-7\@lg, .flex\@md > .fill-7\@lg, .flex\@lg > .fill-7\@lg, .flex\@xl > .fill-7\@lg, .flex\@2xl > .fill-7\@lg {
-    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
   }
   .flex > .order-7\@lg, .flex\@xs > .order-7\@lg, .flex\@sm > .order-7\@lg, .flex\@md > .order-7\@lg, .flex\@lg > .order-7\@lg, .flex\@xl > .order-7\@lg, .flex\@2xl > .order-7\@lg {
     order: 7;
   }
   .flex > .fill-8\@lg, .flex\@xs > .fill-8\@lg, .flex\@sm > .fill-8\@lg, .flex\@md > .fill-8\@lg, .flex\@lg > .fill-8\@lg, .flex\@xl > .fill-8\@lg, .flex\@2xl > .fill-8\@lg {
-    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
   }
   .flex > .order-8\@lg, .flex\@xs > .order-8\@lg, .flex\@sm > .order-8\@lg, .flex\@md > .order-8\@lg, .flex\@lg > .order-8\@lg, .flex\@xl > .order-8\@lg, .flex\@2xl > .order-8\@lg {
     order: 8;
   }
   .flex > .fill-9\@lg, .flex\@xs > .fill-9\@lg, .flex\@sm > .fill-9\@lg, .flex\@md > .fill-9\@lg, .flex\@lg > .fill-9\@lg, .flex\@xl > .fill-9\@lg, .flex\@2xl > .fill-9\@lg {
-    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
   }
   .flex > .order-9\@lg, .flex\@xs > .order-9\@lg, .flex\@sm > .order-9\@lg, .flex\@md > .order-9\@lg, .flex\@lg > .order-9\@lg, .flex\@xl > .order-9\@lg, .flex\@2xl > .order-9\@lg {
     order: 9;
   }
   .flex > .fill-10\@lg, .flex\@xs > .fill-10\@lg, .flex\@sm > .fill-10\@lg, .flex\@md > .fill-10\@lg, .flex\@lg > .fill-10\@lg, .flex\@xl > .fill-10\@lg, .flex\@2xl > .fill-10\@lg {
-    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
   }
   .flex > .order-10\@lg, .flex\@xs > .order-10\@lg, .flex\@sm > .order-10\@lg, .flex\@md > .order-10\@lg, .flex\@lg > .order-10\@lg, .flex\@xl > .order-10\@lg, .flex\@2xl > .order-10\@lg {
     order: 10;
   }
   .flex > .fill-11\@lg, .flex\@xs > .fill-11\@lg, .flex\@sm > .fill-11\@lg, .flex\@md > .fill-11\@lg, .flex\@lg > .fill-11\@lg, .flex\@xl > .fill-11\@lg, .flex\@2xl > .fill-11\@lg {
-    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
   }
   .flex > .order-11\@lg, .flex\@xs > .order-11\@lg, .flex\@sm > .order-11\@lg, .flex\@md > .order-11\@lg, .flex\@lg > .order-11\@lg, .flex\@xl > .order-11\@lg, .flex\@2xl > .order-11\@lg {
     order: 11;
   }
   .flex > .fill-12\@lg, .flex\@xs > .fill-12\@lg, .flex\@sm > .fill-12\@lg, .flex\@md > .fill-12\@lg, .flex\@lg > .fill-12\@lg, .flex\@xl > .fill-12\@lg, .flex\@2xl > .fill-12\@lg {
-    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
   }
   .flex > .order-12\@lg, .flex\@xs > .order-12\@lg, .flex\@sm > .order-12\@lg, .flex\@md > .order-12\@lg, .flex\@lg > .order-12\@lg, .flex\@xl > .order-12\@lg, .flex\@2xl > .order-12\@lg {
     order: 12;
@@ -1571,73 +1571,73 @@ code {
     align-self: auto;
   }
   .flex > .fill-1\@xl, .flex\@xs > .fill-1\@xl, .flex\@sm > .fill-1\@xl, .flex\@md > .fill-1\@xl, .flex\@lg > .fill-1\@xl, .flex\@xl > .fill-1\@xl, .flex\@2xl > .fill-1\@xl {
-    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
   }
   .flex > .order-1\@xl, .flex\@xs > .order-1\@xl, .flex\@sm > .order-1\@xl, .flex\@md > .order-1\@xl, .flex\@lg > .order-1\@xl, .flex\@xl > .order-1\@xl, .flex\@2xl > .order-1\@xl {
     order: 1;
   }
   .flex > .fill-2\@xl, .flex\@xs > .fill-2\@xl, .flex\@sm > .fill-2\@xl, .flex\@md > .fill-2\@xl, .flex\@lg > .fill-2\@xl, .flex\@xl > .fill-2\@xl, .flex\@2xl > .fill-2\@xl {
-    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
   }
   .flex > .order-2\@xl, .flex\@xs > .order-2\@xl, .flex\@sm > .order-2\@xl, .flex\@md > .order-2\@xl, .flex\@lg > .order-2\@xl, .flex\@xl > .order-2\@xl, .flex\@2xl > .order-2\@xl {
     order: 2;
   }
   .flex > .fill-3\@xl, .flex\@xs > .fill-3\@xl, .flex\@sm > .fill-3\@xl, .flex\@md > .fill-3\@xl, .flex\@lg > .fill-3\@xl, .flex\@xl > .fill-3\@xl, .flex\@2xl > .fill-3\@xl {
-    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
   }
   .flex > .order-3\@xl, .flex\@xs > .order-3\@xl, .flex\@sm > .order-3\@xl, .flex\@md > .order-3\@xl, .flex\@lg > .order-3\@xl, .flex\@xl > .order-3\@xl, .flex\@2xl > .order-3\@xl {
     order: 3;
   }
   .flex > .fill-4\@xl, .flex\@xs > .fill-4\@xl, .flex\@sm > .fill-4\@xl, .flex\@md > .fill-4\@xl, .flex\@lg > .fill-4\@xl, .flex\@xl > .fill-4\@xl, .flex\@2xl > .fill-4\@xl {
-    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
   }
   .flex > .order-4\@xl, .flex\@xs > .order-4\@xl, .flex\@sm > .order-4\@xl, .flex\@md > .order-4\@xl, .flex\@lg > .order-4\@xl, .flex\@xl > .order-4\@xl, .flex\@2xl > .order-4\@xl {
     order: 4;
   }
   .flex > .fill-5\@xl, .flex\@xs > .fill-5\@xl, .flex\@sm > .fill-5\@xl, .flex\@md > .fill-5\@xl, .flex\@lg > .fill-5\@xl, .flex\@xl > .fill-5\@xl, .flex\@2xl > .fill-5\@xl {
-    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
   }
   .flex > .order-5\@xl, .flex\@xs > .order-5\@xl, .flex\@sm > .order-5\@xl, .flex\@md > .order-5\@xl, .flex\@lg > .order-5\@xl, .flex\@xl > .order-5\@xl, .flex\@2xl > .order-5\@xl {
     order: 5;
   }
   .flex > .fill-6\@xl, .flex\@xs > .fill-6\@xl, .flex\@sm > .fill-6\@xl, .flex\@md > .fill-6\@xl, .flex\@lg > .fill-6\@xl, .flex\@xl > .fill-6\@xl, .flex\@2xl > .fill-6\@xl {
-    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
   }
   .flex > .order-6\@xl, .flex\@xs > .order-6\@xl, .flex\@sm > .order-6\@xl, .flex\@md > .order-6\@xl, .flex\@lg > .order-6\@xl, .flex\@xl > .order-6\@xl, .flex\@2xl > .order-6\@xl {
     order: 6;
   }
   .flex > .fill-7\@xl, .flex\@xs > .fill-7\@xl, .flex\@sm > .fill-7\@xl, .flex\@md > .fill-7\@xl, .flex\@lg > .fill-7\@xl, .flex\@xl > .fill-7\@xl, .flex\@2xl > .fill-7\@xl {
-    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
   }
   .flex > .order-7\@xl, .flex\@xs > .order-7\@xl, .flex\@sm > .order-7\@xl, .flex\@md > .order-7\@xl, .flex\@lg > .order-7\@xl, .flex\@xl > .order-7\@xl, .flex\@2xl > .order-7\@xl {
     order: 7;
   }
   .flex > .fill-8\@xl, .flex\@xs > .fill-8\@xl, .flex\@sm > .fill-8\@xl, .flex\@md > .fill-8\@xl, .flex\@lg > .fill-8\@xl, .flex\@xl > .fill-8\@xl, .flex\@2xl > .fill-8\@xl {
-    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
   }
   .flex > .order-8\@xl, .flex\@xs > .order-8\@xl, .flex\@sm > .order-8\@xl, .flex\@md > .order-8\@xl, .flex\@lg > .order-8\@xl, .flex\@xl > .order-8\@xl, .flex\@2xl > .order-8\@xl {
     order: 8;
   }
   .flex > .fill-9\@xl, .flex\@xs > .fill-9\@xl, .flex\@sm > .fill-9\@xl, .flex\@md > .fill-9\@xl, .flex\@lg > .fill-9\@xl, .flex\@xl > .fill-9\@xl, .flex\@2xl > .fill-9\@xl {
-    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
   }
   .flex > .order-9\@xl, .flex\@xs > .order-9\@xl, .flex\@sm > .order-9\@xl, .flex\@md > .order-9\@xl, .flex\@lg > .order-9\@xl, .flex\@xl > .order-9\@xl, .flex\@2xl > .order-9\@xl {
     order: 9;
   }
   .flex > .fill-10\@xl, .flex\@xs > .fill-10\@xl, .flex\@sm > .fill-10\@xl, .flex\@md > .fill-10\@xl, .flex\@lg > .fill-10\@xl, .flex\@xl > .fill-10\@xl, .flex\@2xl > .fill-10\@xl {
-    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
   }
   .flex > .order-10\@xl, .flex\@xs > .order-10\@xl, .flex\@sm > .order-10\@xl, .flex\@md > .order-10\@xl, .flex\@lg > .order-10\@xl, .flex\@xl > .order-10\@xl, .flex\@2xl > .order-10\@xl {
     order: 10;
   }
   .flex > .fill-11\@xl, .flex\@xs > .fill-11\@xl, .flex\@sm > .fill-11\@xl, .flex\@md > .fill-11\@xl, .flex\@lg > .fill-11\@xl, .flex\@xl > .fill-11\@xl, .flex\@2xl > .fill-11\@xl {
-    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
   }
   .flex > .order-11\@xl, .flex\@xs > .order-11\@xl, .flex\@sm > .order-11\@xl, .flex\@md > .order-11\@xl, .flex\@lg > .order-11\@xl, .flex\@xl > .order-11\@xl, .flex\@2xl > .order-11\@xl {
     order: 11;
   }
   .flex > .fill-12\@xl, .flex\@xs > .fill-12\@xl, .flex\@sm > .fill-12\@xl, .flex\@md > .fill-12\@xl, .flex\@lg > .fill-12\@xl, .flex\@xl > .fill-12\@xl, .flex\@2xl > .fill-12\@xl {
-    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
   }
   .flex > .order-12\@xl, .flex\@xs > .order-12\@xl, .flex\@sm > .order-12\@xl, .flex\@md > .order-12\@xl, .flex\@lg > .order-12\@xl, .flex\@xl > .order-12\@xl, .flex\@2xl > .order-12\@xl {
     order: 12;
@@ -1771,73 +1771,73 @@ code {
     align-self: auto;
   }
   .flex > .fill-1\@2xl, .flex\@xs > .fill-1\@2xl, .flex\@sm > .fill-1\@2xl, .flex\@md > .fill-1\@2xl, .flex\@lg > .fill-1\@2xl, .flex\@xl > .fill-1\@2xl, .flex\@2xl > .fill-1\@2xl {
-    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 12));
+    flex: 0 0 calc((100% - 11 * var(--flex-gap, 0px)) / 12);
   }
   .flex > .order-1\@2xl, .flex\@xs > .order-1\@2xl, .flex\@sm > .order-1\@2xl, .flex\@md > .order-1\@2xl, .flex\@lg > .order-1\@2xl, .flex\@xl > .order-1\@2xl, .flex\@2xl > .order-1\@2xl {
     order: 1;
   }
   .flex > .fill-2\@2xl, .flex\@xs > .fill-2\@2xl, .flex\@sm > .fill-2\@2xl, .flex\@md > .fill-2\@2xl, .flex\@lg > .fill-2\@2xl, .flex\@xl > .fill-2\@2xl, .flex\@2xl > .fill-2\@2xl {
-    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 6));
+    flex: 0 0 calc((100% - 5 * var(--flex-gap, 0px)) / 6);
   }
   .flex > .order-2\@2xl, .flex\@xs > .order-2\@2xl, .flex\@sm > .order-2\@2xl, .flex\@md > .order-2\@2xl, .flex\@lg > .order-2\@2xl, .flex\@xl > .order-2\@2xl, .flex\@2xl > .order-2\@2xl {
     order: 2;
   }
   .flex > .fill-3\@2xl, .flex\@xs > .fill-3\@2xl, .flex\@sm > .fill-3\@2xl, .flex\@md > .fill-3\@2xl, .flex\@lg > .fill-3\@2xl, .flex\@xl > .fill-3\@2xl, .flex\@2xl > .fill-3\@2xl {
-    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 4));
+    flex: 0 0 calc((100% - 3 * var(--flex-gap, 0px)) / 4);
   }
   .flex > .order-3\@2xl, .flex\@xs > .order-3\@2xl, .flex\@sm > .order-3\@2xl, .flex\@md > .order-3\@2xl, .flex\@lg > .order-3\@2xl, .flex\@xl > .order-3\@2xl, .flex\@2xl > .order-3\@2xl {
     order: 3;
   }
   .flex > .fill-4\@2xl, .flex\@xs > .fill-4\@2xl, .flex\@sm > .fill-4\@2xl, .flex\@md > .fill-4\@2xl, .flex\@lg > .fill-4\@2xl, .flex\@xl > .fill-4\@2xl, .flex\@2xl > .fill-4\@2xl {
-    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 3));
+    flex: 0 0 calc((100% - 2 * var(--flex-gap, 0px)) / 3);
   }
   .flex > .order-4\@2xl, .flex\@xs > .order-4\@2xl, .flex\@sm > .order-4\@2xl, .flex\@md > .order-4\@2xl, .flex\@lg > .order-4\@2xl, .flex\@xl > .order-4\@2xl, .flex\@2xl > .order-4\@2xl {
     order: 4;
   }
   .flex > .fill-5\@2xl, .flex\@xs > .fill-5\@2xl, .flex\@sm > .fill-5\@2xl, .flex\@md > .fill-5\@2xl, .flex\@lg > .fill-5\@2xl, .flex\@xl > .fill-5\@2xl, .flex\@2xl > .fill-5\@2xl {
-    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 2.4));
+    flex: 0 0 calc((100% - 1.4 * var(--flex-gap, 0px)) / 2.4);
   }
   .flex > .order-5\@2xl, .flex\@xs > .order-5\@2xl, .flex\@sm > .order-5\@2xl, .flex\@md > .order-5\@2xl, .flex\@lg > .order-5\@2xl, .flex\@xl > .order-5\@2xl, .flex\@2xl > .order-5\@2xl {
     order: 5;
   }
   .flex > .fill-6\@2xl, .flex\@xs > .fill-6\@2xl, .flex\@sm > .fill-6\@2xl, .flex\@md > .fill-6\@2xl, .flex\@lg > .fill-6\@2xl, .flex\@xl > .fill-6\@2xl, .flex\@2xl > .fill-6\@2xl {
-    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 2));
+    flex: 0 0 calc((100% - 1 * var(--flex-gap, 0px)) / 2);
   }
   .flex > .order-6\@2xl, .flex\@xs > .order-6\@2xl, .flex\@sm > .order-6\@2xl, .flex\@md > .order-6\@2xl, .flex\@lg > .order-6\@2xl, .flex\@xl > .order-6\@2xl, .flex\@2xl > .order-6\@2xl {
     order: 6;
   }
   .flex > .fill-7\@2xl, .flex\@xs > .fill-7\@2xl, .flex\@sm > .fill-7\@2xl, .flex\@md > .fill-7\@2xl, .flex\@lg > .fill-7\@2xl, .flex\@xl > .fill-7\@2xl, .flex\@2xl > .fill-7\@2xl {
-    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 1.7142857143));
+    flex: 0 0 calc((100% - 0.7142857143 * var(--flex-gap, 0px)) / 1.7142857143);
   }
   .flex > .order-7\@2xl, .flex\@xs > .order-7\@2xl, .flex\@sm > .order-7\@2xl, .flex\@md > .order-7\@2xl, .flex\@lg > .order-7\@2xl, .flex\@xl > .order-7\@2xl, .flex\@2xl > .order-7\@2xl {
     order: 7;
   }
   .flex > .fill-8\@2xl, .flex\@xs > .fill-8\@2xl, .flex\@sm > .fill-8\@2xl, .flex\@md > .fill-8\@2xl, .flex\@lg > .fill-8\@2xl, .flex\@xl > .fill-8\@2xl, .flex\@2xl > .fill-8\@2xl {
-    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 1.5));
+    flex: 0 0 calc((100% - 0.5 * var(--flex-gap, 0px)) / 1.5);
   }
   .flex > .order-8\@2xl, .flex\@xs > .order-8\@2xl, .flex\@sm > .order-8\@2xl, .flex\@md > .order-8\@2xl, .flex\@lg > .order-8\@2xl, .flex\@xl > .order-8\@2xl, .flex\@2xl > .order-8\@2xl {
     order: 8;
   }
   .flex > .fill-9\@2xl, .flex\@xs > .fill-9\@2xl, .flex\@sm > .fill-9\@2xl, .flex\@md > .fill-9\@2xl, .flex\@lg > .fill-9\@2xl, .flex\@xl > .fill-9\@2xl, .flex\@2xl > .fill-9\@2xl {
-    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 1.3333333333));
+    flex: 0 0 calc((100% - 0.3333333333 * var(--flex-gap, 0px)) / 1.3333333333);
   }
   .flex > .order-9\@2xl, .flex\@xs > .order-9\@2xl, .flex\@sm > .order-9\@2xl, .flex\@md > .order-9\@2xl, .flex\@lg > .order-9\@2xl, .flex\@xl > .order-9\@2xl, .flex\@2xl > .order-9\@2xl {
     order: 9;
   }
   .flex > .fill-10\@2xl, .flex\@xs > .fill-10\@2xl, .flex\@sm > .fill-10\@2xl, .flex\@md > .fill-10\@2xl, .flex\@lg > .fill-10\@2xl, .flex\@xl > .fill-10\@2xl, .flex\@2xl > .fill-10\@2xl {
-    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 1.2));
+    flex: 0 0 calc((100% - 0.2 * var(--flex-gap, 0px)) / 1.2);
   }
   .flex > .order-10\@2xl, .flex\@xs > .order-10\@2xl, .flex\@sm > .order-10\@2xl, .flex\@md > .order-10\@2xl, .flex\@lg > .order-10\@2xl, .flex\@xl > .order-10\@2xl, .flex\@2xl > .order-10\@2xl {
     order: 10;
   }
   .flex > .fill-11\@2xl, .flex\@xs > .fill-11\@2xl, .flex\@sm > .fill-11\@2xl, .flex\@md > .fill-11\@2xl, .flex\@lg > .fill-11\@2xl, .flex\@xl > .fill-11\@2xl, .flex\@2xl > .fill-11\@2xl {
-    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 1.0909090909));
+    flex: 0 0 calc((100% - 0.0909090909 * var(--flex-gap, 0px)) / 1.0909090909);
   }
   .flex > .order-11\@2xl, .flex\@xs > .order-11\@2xl, .flex\@sm > .order-11\@2xl, .flex\@md > .order-11\@2xl, .flex\@lg > .order-11\@2xl, .flex\@xl > .order-11\@2xl, .flex\@2xl > .order-11\@2xl {
     order: 11;
   }
   .flex > .fill-12\@2xl, .flex\@xs > .fill-12\@2xl, .flex\@sm > .fill-12\@2xl, .flex\@md > .fill-12\@2xl, .flex\@lg > .fill-12\@2xl, .flex\@xl > .fill-12\@2xl, .flex\@2xl > .fill-12\@2xl {
-    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 1));
+    flex: 0 0 calc((100% - 0 * var(--flex-gap, 0px)) / 1);
   }
   .flex > .order-12\@2xl, .flex\@xs > .order-12\@2xl, .flex\@sm > .order-12\@2xl, .flex\@md > .order-12\@2xl, .flex\@lg > .order-12\@2xl, .flex\@xl > .order-12\@2xl, .flex\@2xl > .order-12\@2xl {
     order: 12;
@@ -5295,42 +5295,60 @@ code {
   --border-size: 1px;
   border-width: 1px;
   border-style: solid;
-  border-color: var(--border-color);
+  border-color: var(--border-base);
   --border-style: solid;
-  --border-color: var(--border-color);
+  --border-color: var(--border-base);
 }
 
 .border-0 {
   --border-size: 0px;
   border-width: 0px;
   border-style: solid;
-  border-color: var(--border-color);
+  border-color: var(--border-base);
   --border-style: solid;
-  --border-color: var(--border-color);
+  --border-color: var(--border-base);
 }
 
 .border-t {
   border-top-width: 1px;
   border-top-style: var(--border-style, solid);
-  border-top-color: var(--border-color);
+  border-top-color: var(--border-base);
 }
 
 .border-r {
   border-right-width: 1px;
   border-right-style: var(--border-style, solid);
-  border-right-color: var(--border-color);
+  border-right-color: var(--border-base);
 }
 
 .border-b {
   border-bottom-width: 1px;
   border-bottom-style: var(--border-style, solid);
-  border-bottom-color: var(--border-color);
+  border-bottom-color: var(--border-base);
 }
 
 .border-l {
   border-left-width: 1px;
   border-left-style: var(--border-style, solid);
-  border-left-color: var(--border-color);
+  border-left-color: var(--border-base);
+}
+
+.border-x {
+  border-left-width: 1px;
+  border-left-style: var(--border-style, solid);
+  border-left-color: var(--border-base);
+  border-right-width: 1px;
+  border-right-style: var(--border-style, solid);
+  border-right-color: var(--border-base);
+}
+
+.border-y {
+  border-top-width: 1px;
+  border-top-style: var(--border-style, solid);
+  border-top-color: var(--border-base);
+  border-bottom-width: 1px;
+  border-bottom-style: var(--border-style, solid);
+  border-bottom-color: var(--border-base);
 }
 
 .border-0,
@@ -5341,33 +5359,51 @@ code {
   --border-size: 0px;
   border-width: 0px;
   border-style: solid;
-  border-color: var(--border-color);
+  border-color: var(--border-base);
   --border-style: solid;
-  --border-color: var(--border-color);
+  --border-color: var(--border-base);
 }
 
 .border-t-0 {
   border-top-width: 0px;
   border-top-style: var(--border-style, solid);
-  border-top-color: var(--border-color);
+  border-top-color: var(--border-base);
 }
 
 .border-r-0 {
   border-right-width: 0px;
   border-right-style: var(--border-style, solid);
-  border-right-color: var(--border-color);
+  border-right-color: var(--border-base);
 }
 
 .border-b-0 {
   border-bottom-width: 0px;
   border-bottom-style: var(--border-style, solid);
-  border-bottom-color: var(--border-color);
+  border-bottom-color: var(--border-base);
 }
 
 .border-l-0 {
   border-left-width: 0px;
   border-left-style: var(--border-style, solid);
-  border-left-color: var(--border-color);
+  border-left-color: var(--border-base);
+}
+
+.border-x-0 {
+  border-left-width: 1px;
+  border-left-style: var(--border-style, solid);
+  border-left-color: var(--border-base);
+  border-right-width: 1px;
+  border-right-style: var(--border-style, solid);
+  border-right-color: var(--border-base);
+}
+
+.border-y-0 {
+  border-top-width: 0px;
+  border-top-style: var(--border-style, solid);
+  border-top-color: var(--border-base);
+  border-bottom-width: 0px;
+  border-bottom-style: var(--border-style, solid);
+  border-bottom-color: var(--border-base);
 }
 
 .border-1,
@@ -5378,33 +5414,51 @@ code {
   --border-size: 1px;
   border-width: 1px;
   border-style: solid;
-  border-color: var(--border-color);
+  border-color: var(--border-base);
   --border-style: solid;
-  --border-color: var(--border-color);
+  --border-color: var(--border-base);
 }
 
 .border-t-1 {
   border-top-width: 1px;
   border-top-style: var(--border-style, solid);
-  border-top-color: var(--border-color);
+  border-top-color: var(--border-base);
 }
 
 .border-r-1 {
   border-right-width: 1px;
   border-right-style: var(--border-style, solid);
-  border-right-color: var(--border-color);
+  border-right-color: var(--border-base);
 }
 
 .border-b-1 {
   border-bottom-width: 1px;
   border-bottom-style: var(--border-style, solid);
-  border-bottom-color: var(--border-color);
+  border-bottom-color: var(--border-base);
 }
 
 .border-l-1 {
   border-left-width: 1px;
   border-left-style: var(--border-style, solid);
-  border-left-color: var(--border-color);
+  border-left-color: var(--border-base);
+}
+
+.border-x-1 {
+  border-left-width: 1px;
+  border-left-style: var(--border-style, solid);
+  border-left-color: var(--border-base);
+  border-right-width: 1px;
+  border-right-style: var(--border-style, solid);
+  border-right-color: var(--border-base);
+}
+
+.border-y-1 {
+  border-top-width: 1px;
+  border-top-style: var(--border-style, solid);
+  border-top-color: var(--border-base);
+  border-bottom-width: 1px;
+  border-bottom-style: var(--border-style, solid);
+  border-bottom-color: var(--border-base);
 }
 
 .border-2,
@@ -5415,33 +5469,51 @@ code {
   --border-size: 2px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--border-color);
+  border-color: var(--border-base);
   --border-style: solid;
-  --border-color: var(--border-color);
+  --border-color: var(--border-base);
 }
 
 .border-t-2 {
   border-top-width: 2px;
   border-top-style: var(--border-style, solid);
-  border-top-color: var(--border-color);
+  border-top-color: var(--border-base);
 }
 
 .border-r-2 {
   border-right-width: 2px;
   border-right-style: var(--border-style, solid);
-  border-right-color: var(--border-color);
+  border-right-color: var(--border-base);
 }
 
 .border-b-2 {
   border-bottom-width: 2px;
   border-bottom-style: var(--border-style, solid);
-  border-bottom-color: var(--border-color);
+  border-bottom-color: var(--border-base);
 }
 
 .border-l-2 {
   border-left-width: 2px;
   border-left-style: var(--border-style, solid);
-  border-left-color: var(--border-color);
+  border-left-color: var(--border-base);
+}
+
+.border-x-2 {
+  border-left-width: 1px;
+  border-left-style: var(--border-style, solid);
+  border-left-color: var(--border-base);
+  border-right-width: 1px;
+  border-right-style: var(--border-style, solid);
+  border-right-color: var(--border-base);
+}
+
+.border-y-2 {
+  border-top-width: 2px;
+  border-top-style: var(--border-style, solid);
+  border-top-color: var(--border-base);
+  border-bottom-width: 2px;
+  border-bottom-style: var(--border-style, solid);
+  border-bottom-color: var(--border-base);
 }
 
 .border-4,
@@ -5452,33 +5524,51 @@ code {
   --border-size: 4px;
   border-width: 4px;
   border-style: solid;
-  border-color: var(--border-color);
+  border-color: var(--border-base);
   --border-style: solid;
-  --border-color: var(--border-color);
+  --border-color: var(--border-base);
 }
 
 .border-t-4 {
   border-top-width: 4px;
   border-top-style: var(--border-style, solid);
-  border-top-color: var(--border-color);
+  border-top-color: var(--border-base);
 }
 
 .border-r-4 {
   border-right-width: 4px;
   border-right-style: var(--border-style, solid);
-  border-right-color: var(--border-color);
+  border-right-color: var(--border-base);
 }
 
 .border-b-4 {
   border-bottom-width: 4px;
   border-bottom-style: var(--border-style, solid);
-  border-bottom-color: var(--border-color);
+  border-bottom-color: var(--border-base);
 }
 
 .border-l-4 {
   border-left-width: 4px;
   border-left-style: var(--border-style, solid);
-  border-left-color: var(--border-color);
+  border-left-color: var(--border-base);
+}
+
+.border-x-4 {
+  border-left-width: 1px;
+  border-left-style: var(--border-style, solid);
+  border-left-color: var(--border-base);
+  border-right-width: 1px;
+  border-right-style: var(--border-style, solid);
+  border-right-color: var(--border-base);
+}
+
+.border-y-4 {
+  border-top-width: 4px;
+  border-top-style: var(--border-style, solid);
+  border-top-color: var(--border-base);
+  border-bottom-width: 4px;
+  border-bottom-style: var(--border-style, solid);
+  border-bottom-color: var(--border-base);
 }
 
 .border-8,
@@ -5489,33 +5579,51 @@ code {
   --border-size: 8px;
   border-width: 8px;
   border-style: solid;
-  border-color: var(--border-color);
+  border-color: var(--border-base);
   --border-style: solid;
-  --border-color: var(--border-color);
+  --border-color: var(--border-base);
 }
 
 .border-t-8 {
   border-top-width: 8px;
   border-top-style: var(--border-style, solid);
-  border-top-color: var(--border-color);
+  border-top-color: var(--border-base);
 }
 
 .border-r-8 {
   border-right-width: 8px;
   border-right-style: var(--border-style, solid);
-  border-right-color: var(--border-color);
+  border-right-color: var(--border-base);
 }
 
 .border-b-8 {
   border-bottom-width: 8px;
   border-bottom-style: var(--border-style, solid);
-  border-bottom-color: var(--border-color);
+  border-bottom-color: var(--border-base);
 }
 
 .border-l-8 {
   border-left-width: 8px;
   border-left-style: var(--border-style, solid);
-  border-left-color: var(--border-color);
+  border-left-color: var(--border-base);
+}
+
+.border-x-8 {
+  border-left-width: 1px;
+  border-left-style: var(--border-style, solid);
+  border-left-color: var(--border-base);
+  border-right-width: 1px;
+  border-right-style: var(--border-style, solid);
+  border-right-color: var(--border-base);
+}
+
+.border-y-8 {
+  border-top-width: 8px;
+  border-top-style: var(--border-style, solid);
+  border-top-color: var(--border-base);
+  border-bottom-width: 8px;
+  border-bottom-style: var(--border-style, solid);
+  border-bottom-color: var(--border-base);
 }
 
 .rounded {
@@ -6023,57 +6131,57 @@ code {
     --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-1\@xs {
     --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-2\@xs {
     --border-size: 2px;
     border-width: 2px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-4\@xs {
     --border-size: 4px;
     border-width: 4px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-8\@xs {
     --border-size: 8px;
     border-width: 8px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border\@xs {
     --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-0\@xs {
     --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .rounded-xs\@xs {
     border-radius: 0.25rem;
@@ -6114,57 +6222,57 @@ code {
     --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-1\@sm {
     --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-2\@sm {
     --border-size: 2px;
     border-width: 2px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-4\@sm {
     --border-size: 4px;
     border-width: 4px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-8\@sm {
     --border-size: 8px;
     border-width: 8px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border\@sm {
     --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-0\@sm {
     --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .rounded-xs\@sm {
     border-radius: 0.25rem;
@@ -6205,57 +6313,57 @@ code {
     --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-1\@md {
     --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-2\@md {
     --border-size: 2px;
     border-width: 2px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-4\@md {
     --border-size: 4px;
     border-width: 4px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-8\@md {
     --border-size: 8px;
     border-width: 8px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border\@md {
     --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-0\@md {
     --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .rounded-xs\@md {
     border-radius: 0.25rem;
@@ -6296,57 +6404,57 @@ code {
     --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-1\@lg {
     --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-2\@lg {
     --border-size: 2px;
     border-width: 2px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-4\@lg {
     --border-size: 4px;
     border-width: 4px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-8\@lg {
     --border-size: 8px;
     border-width: 8px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border\@lg {
     --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-0\@lg {
     --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .rounded-xs\@lg {
     border-radius: 0.25rem;
@@ -6387,57 +6495,57 @@ code {
     --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-1\@xl {
     --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-2\@xl {
     --border-size: 2px;
     border-width: 2px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-4\@xl {
     --border-size: 4px;
     border-width: 4px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-8\@xl {
     --border-size: 8px;
     border-width: 8px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border\@xl {
     --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-0\@xl {
     --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .rounded-xs\@xl {
     border-radius: 0.25rem;
@@ -6478,57 +6586,57 @@ code {
     --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-1\@2xl {
     --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-2\@2xl {
     --border-size: 2px;
     border-width: 2px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-4\@2xl {
     --border-size: 4px;
     border-width: 4px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-8\@2xl {
     --border-size: 8px;
     border-width: 8px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border\@2xl {
     --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .border-0\@2xl {
     --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-color);
+    border-color: var(--border-base);
     --border-style: solid;
-    --border-color: var(--border-color);
+    --border-color: var(--border-base);
   }
   .rounded-xs\@2xl {
     border-radius: 0.25rem;
@@ -6716,10 +6824,6 @@ code {
   cursor: all-scroll;
 }
 
-.hide {
-  display: none;
-}
-
 .show {
   display: initial;
 }
@@ -6766,6 +6870,14 @@ code {
   visibility: collapse;
 }
 
+.hide {
+  display: none;
+}
+
+.hidden {
+  display: none !important;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -20831,6 +20943,10 @@ code {
   font-weight: 800;
 }
 
+.font-black {
+  font-weight: 900;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -21089,6 +21205,9 @@ code {
   .font-extrabold\@xs {
     font-weight: 800;
   }
+  .font-black\@xs {
+    font-weight: 900;
+  }
   .leading-none\@xs {
     line-height: 1;
   }
@@ -21284,6 +21403,9 @@ code {
   .font-extrabold\@sm {
     font-weight: 800;
   }
+  .font-black\@sm {
+    font-weight: 900;
+  }
   .leading-none\@sm {
     line-height: 1;
   }
@@ -21479,6 +21601,9 @@ code {
   .font-extrabold\@md {
     font-weight: 800;
   }
+  .font-black\@md {
+    font-weight: 900;
+  }
   .leading-none\@md {
     line-height: 1;
   }
@@ -21674,6 +21799,9 @@ code {
   .font-extrabold\@lg {
     font-weight: 800;
   }
+  .font-black\@lg {
+    font-weight: 900;
+  }
   .leading-none\@lg {
     line-height: 1;
   }
@@ -21869,6 +21997,9 @@ code {
   .font-extrabold\@xl {
     font-weight: 800;
   }
+  .font-black\@xl {
+    font-weight: 900;
+  }
   .leading-none\@xl {
     line-height: 1;
   }
@@ -22064,6 +22195,9 @@ code {
   .font-extrabold\@2xl {
     font-weight: 800;
   }
+  .font-black\@2xl {
+    font-weight: 900;
+  }
   .leading-none\@2xl {
     line-height: 1;
   }
@@ -22885,6 +23019,7 @@ code {
 
 .gap-y-0 {
   row-gap: 0px;
+  --flex-gap: 0px;
 }
 
 .space-x-0 > * + * {
@@ -22977,6 +23112,7 @@ code {
 
 .gap-y-1 {
   row-gap: 0.25rem;
+  --flex-gap: 0.25rem;
 }
 
 .space-x-1 > * + * {
@@ -23069,6 +23205,7 @@ code {
 
 .gap-y-2 {
   row-gap: 0.5rem;
+  --flex-gap: 0.5rem;
 }
 
 .space-x-2 > * + * {
@@ -23161,6 +23298,7 @@ code {
 
 .gap-y-3 {
   row-gap: 0.75rem;
+  --flex-gap: 0.75rem;
 }
 
 .space-x-3 > * + * {
@@ -23253,6 +23391,7 @@ code {
 
 .gap-y-4 {
   row-gap: 1rem;
+  --flex-gap: 1rem;
 }
 
 .space-x-4 > * + * {
@@ -23345,6 +23484,7 @@ code {
 
 .gap-y-5 {
   row-gap: 1.25rem;
+  --flex-gap: 1.25rem;
 }
 
 .space-x-5 > * + * {
@@ -23437,6 +23577,7 @@ code {
 
 .gap-y-6 {
   row-gap: 1.5rem;
+  --flex-gap: 1.5rem;
 }
 
 .space-x-6 > * + * {
@@ -23529,6 +23670,7 @@ code {
 
 .gap-y-8 {
   row-gap: 2rem;
+  --flex-gap: 2rem;
 }
 
 .space-x-8 > * + * {
@@ -23621,6 +23763,7 @@ code {
 
 .gap-y-10 {
   row-gap: 2.5rem;
+  --flex-gap: 2.5rem;
 }
 
 .space-x-10 > * + * {
@@ -23713,6 +23856,7 @@ code {
 
 .gap-y-12 {
   row-gap: 3rem;
+  --flex-gap: 3rem;
 }
 
 .space-x-12 > * + * {
@@ -23805,6 +23949,7 @@ code {
 
 .gap-y-16 {
   row-gap: 4rem;
+  --flex-gap: 4rem;
 }
 
 .space-x-16 > * + * {
@@ -23897,6 +24042,7 @@ code {
 
 .gap-y-20 {
   row-gap: 5rem;
+  --flex-gap: 5rem;
 }
 
 .space-x-20 > * + * {
@@ -23989,6 +24135,7 @@ code {
 
 .gap-y-24 {
   row-gap: 6rem;
+  --flex-gap: 6rem;
 }
 
 .space-x-24 > * + * {
@@ -24081,6 +24228,7 @@ code {
 
 .gap-y-32 {
   row-gap: 8rem;
+  --flex-gap: 8rem;
 }
 
 .space-x-32 > * + * {
@@ -24173,6 +24321,7 @@ code {
 
 .gap-y-40 {
   row-gap: 10rem;
+  --flex-gap: 10rem;
 }
 
 .space-x-40 > * + * {
@@ -24265,6 +24414,7 @@ code {
 
 .gap-y-48 {
   row-gap: 12rem;
+  --flex-gap: 12rem;
 }
 
 .space-x-48 > * + * {
@@ -24357,6 +24507,7 @@ code {
 
 .gap-y-56 {
   row-gap: 14rem;
+  --flex-gap: 14rem;
 }
 
 .space-x-56 > * + * {
@@ -24449,6 +24600,7 @@ code {
 
 .gap-y-64 {
   row-gap: 16rem;
+  --flex-gap: 16rem;
 }
 
 .space-x-64 > * + * {
@@ -34674,7 +34826,7 @@ code {
   --inverted-bg-alternate: #f1f1f1;
   --bg-surface: #fff;
   --inverted-bg-surface: #2e2e2e;
-  --border-base: #e5e7eb;
+  --border-base: #d3d5d9;
   --inverted-border-base: #2e2e2e;
   --text-color: #1a1a1a;
   --inverted-text-color: #f1f1f1;
@@ -34701,7 +34853,7 @@ code {
   --bg-surface: #2e2e2e;
   --inverted-bg-surface: #fff;
   --border-base: #2e2e2e;
-  --inverted-border-base: #e5e7eb;
+  --inverted-border-base: #d3d5d9;
   --text-color: #f1f1f1;
   --inverted-text-color: #1a1a1a;
   --text-muted: rgba(241, 241, 241, 0.5411764706);