@nuvoui/core 1.3.0 → 1.3.2

package/dist/nuvoui.css

@@ -1,8 +1,3 @@
-/**
- * Ensures a value has a unit, adding $default-unit if none exists
- * @param {Number|String} $val - The value to check
- * @return {String} - The value with units
- */
 *,
 ::before,
 ::after,
@@ -30,8 +25,6 @@ dd {
 }
 
 html {
-  -moz-text-size-adjust: none; /* stylelint-disable-line */
-  -webkit-text-size-adjust: none; /* stylelint-disable-line */
   text-size-adjust: none;
 }
 
@@ -132,12 +125,6 @@ textarea:not([rows]) {
     scroll-behavior: auto !important;
   }
 }
-/* Import variables */
-/**
- * @description Media query mixins.
- * @param {string|number} $breakpoint - The breakpoint value.
- * @param {string} $type - The media query type (e.g. 'lg', 'md').
- */
 :root {
   --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 }
@@ -160,7 +147,7 @@ h4,
 h5,
 h6 {
   margin-bottom: 0.5em;
-  font-family: var(--font-family-heading);
+  font-family: var(--font-family-base);
   font-weight: 700;
   line-height: 1.2;
 }
@@ -228,7 +215,7 @@ input[type=number],
 input[type=search],
 textarea {
   padding: 0.5rem;
-  border: 1px solid var(--border);
+  border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
   border-radius: 0.25rem;
   width: 100%;
   font-family: var(--font-family-base);
@@ -251,7 +238,7 @@ input[type=radio] {
 
 select {
   padding: 0.5rem;
-  border: 1px solid var(--border);
+  border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
   border-radius: 0.25rem;
   width: 100%;
   font-family: var(--font-family-base);
@@ -265,13 +252,13 @@ select:focus {
 blockquote {
   margin: 1rem 0;
   padding: 0.5rem 1rem;
-  border-left: 4px solid var(--border);
+  border-left: var(--border-size, 4px) var(--border-style, solid) var(--border-color, var(--secondary));
   font-style: italic;
 }
 
 hr {
   border: none;
-  border-top: 1px solid var(--border);
+  border-top: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
   margin: 1rem 0;
 }
 
@@ -375,217 +362,88 @@ code {
   padding-bottom: 1rem;
 }
 
-/**
- * @component Flex
- * @description Flexbox layout system for creating flexible page layouts
- *
- * @example
- * <div class="flex row between x-center">
- *   <div class="w-6">Left column (6 units)</div>
- *   <div class="w-6">Right column (6 units)</div>
- * </div>
- * 
- * <div class="flex col@md row@lg">
- *   <!-- Changes direction based on breakpoint -->
- * </div>
- *
- * @classes
- * Base:
- * - flex: Creates a flex container
- * 
- * Direction:
- * - row: Sets flex-direction to row
- * - col: Sets flex-direction to column
- * - row-reverse: Reverses row direction
- * - col-reverse: Reverses column direction
- * 
- * Alignment:
- * - start/end/center: Controls justify-content
- * - x-start/x-end/x-center: Controls align-items
- * 
- * Child elements:
- * - w-{1-12}: Sets width based on column count
- * - grow: Allows item to grow
- * - shrink/no-shrink: Controls shrink behavior
- *
- * @responsive
- * All classes support responsive variants using @breakpoint suffix:
- * - row@md: Row direction on medium screens and up
- * - between@lg: Space-between on large screens
- *
- * @see grid
- */
-/**
- * @description Establishes a flex container.
- */
-/**
- * @description Establishes a flex-inline container.
- */
-/**
- * @description Sets flex-direction to row.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets flex-direction to row-reverse.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets flex-direction to column.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets flex-direction to column-reverse.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets flex-wrap to wrap.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets flex-wrap to nowrap.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets flex-wrap to wrap-reverse
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets justify-content to flex-start
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets justify-content to flex-end
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets justify-content to center
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets justify-content to stretch
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets justify-content to space-between
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets justify-content to space-around
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets justify-content to space-evenly
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-items to flex-start - aligns items to the start of the cross axis.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-items to flex-end - aligns items to the end of the cross axis.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-items to center - aligns items to the center of the cross axis.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-items to stretch - aligns items to the stretch of the cross axis.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-items to baseline - aligns items to the baseline of the cross axis.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-content to flex-start - aligns content to the start of the cross axis.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-content to flex-end - aligns content to the end of the cross axis.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-content to center - aligns content to the center of the cross axis.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-content to space-between - aligns content to the space between the cross axis.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-content to space-around - aligns content to the space around the cross axis.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-content to space-evenly - aligns content to the space evenly between the cross axis.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-content to stretch - aligns content to the stretch of the cross axis.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-self to auto
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-self to flex-start
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-self to flex-end
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-self to center
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-self to stretch
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets align-self to baseline
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets flex-shrink to 1 - allows the item to shrink.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets flex-shrink to 0 - prevents the item from shrinking.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets flex-shrink to 2 - allows the item to shrink twice as much as the other items.
- * @dependencies flex | flex-inline
- */
-/**
- * @description Sets flex to 0 0 100%
- */
-/**
- * @description Sets flex to 1 1 auto - allows the item to grow and shrink.
- */
-/**
- * @description Sets flex to 1 1 0% - allows the item to grow but not shrink.
- */
-/**
- * @description Sets flex to none - prevents the item from growing.
- */
-/**
- * @description Sets flex to 1 0 auto - allows the item to grow but not shrink.
- */
-/**
- * @description Sets how many columns this would take using percentage of VAR.$column-count.
- * @param {Number} $size - The number of columns to span.
- */
-.flex, .flex\@xs, .flex\@sm, .flex\@md, .flex\@lg, .flex\@xl, .flex\@2xl {
+.container.flex {
   display: flex;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
 }
-.flex.inline, .flex\@xs.inline, .flex\@sm.inline, .flex\@md.inline, .flex\@lg.inline, .flex\@xl.inline, .flex\@2xl.inline {
-  display: inline-flex;
+@media (min-width: 480px) {
+  .container.flex {
+    max-width: 380px;
+  }
+}
+@media (min-width: 640px) {
+  .container.flex {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container.flex {
+    max-width: 668px;
+  }
+}
+@media (min-width: 1024px) {
+  .container.flex {
+    max-width: 924px;
+  }
+}
+@media (min-width: 1280px) {
+  .container.flex {
+    max-width: 1180px;
+  }
+}
+@media (min-width: 1536px) {
+  .container.flex {
+    max-width: 1436px;
+  }
+}
+.container.flex {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.container.grid {
+  display: grid;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+@media (min-width: 480px) {
+  .container.grid {
+    max-width: 380px;
+  }
+}
+@media (min-width: 640px) {
+  .container.grid {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container.grid {
+    max-width: 668px;
+  }
+}
+@media (min-width: 1024px) {
+  .container.grid {
+    max-width: 924px;
+  }
+}
+@media (min-width: 1280px) {
+  .container.grid {
+    max-width: 1180px;
+  }
+}
+@media (min-width: 1536px) {
+  .container.grid {
+    max-width: 1436px;
+  }
+}
+.container.grid {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 }
+
 .flex.row, .flex\@xs.row, .flex\@sm.row, .flex\@md.row, .flex\@lg.row, .flex\@xl.row, .flex\@2xl.row {
   flex-direction: row;
 }
@@ -713,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 8.3333333333%;
+  flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 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 16.6666666667%;
+  flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 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 25%;
+  flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 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 33.3333333333%;
+  flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 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 41.6666666667%;
+  flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 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 50%;
+  flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 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 58.3333333333%;
+  flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 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 66.6666666667%;
+  flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 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 75%;
+  flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 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 83.3333333333%;
+  flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 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 91.6666666667%;
+  flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 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 100%;
+  flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 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;
@@ -913,81 +771,77 @@ 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 8.3333333333%;
+    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 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 16.6666666667%;
+    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 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 25%;
+    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 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 33.3333333333%;
+    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 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 41.6666666667%;
+    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 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 50%;
+    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 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 58.3333333333%;
+    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 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 66.6666666667%;
+    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 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 75%;
+    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 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 83.3333333333%;
+    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 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 91.6666666667%;
+    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 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 100%;
+    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 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;
   }
-  .flex.inline\@xs,
-  .flex\@xs.inline\@xs {
-    display: inline-flex;
-  }
 }
 @media (min-width: 640px) {
   .flex.row\@sm, .flex\@xs.row\@sm, .flex\@sm.row\@sm, .flex\@md.row\@sm, .flex\@lg.row\@sm, .flex\@xl.row\@sm, .flex\@2xl.row\@sm {
@@ -1117,81 +971,77 @@ 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 8.3333333333%;
+    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 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 16.6666666667%;
+    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 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 25%;
+    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 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 33.3333333333%;
+    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 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 41.6666666667%;
+    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 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 50%;
+    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 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 58.3333333333%;
+    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 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 66.6666666667%;
+    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 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 75%;
+    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 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 83.3333333333%;
+    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 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 91.6666666667%;
+    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 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 100%;
+    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 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;
   }
-  .flex.inline\@sm,
-  .flex\@sm.inline\@sm {
-    display: inline-flex;
-  }
 }
 @media (min-width: 768px) {
   .flex.row\@md, .flex\@xs.row\@md, .flex\@sm.row\@md, .flex\@md.row\@md, .flex\@lg.row\@md, .flex\@xl.row\@md, .flex\@2xl.row\@md {
@@ -1321,81 +1171,77 @@ 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 8.3333333333%;
+    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 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 16.6666666667%;
+    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 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 25%;
+    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 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 33.3333333333%;
+    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 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 41.6666666667%;
+    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 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 50%;
+    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 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 58.3333333333%;
+    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 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 66.6666666667%;
+    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 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 75%;
+    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 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 83.3333333333%;
+    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 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 91.6666666667%;
+    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 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 100%;
+    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 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;
   }
-  .flex.inline\@md,
-  .flex\@md.inline\@md {
-    display: inline-flex;
-  }
 }
 @media (min-width: 1024px) {
   .flex.row\@lg, .flex\@xs.row\@lg, .flex\@sm.row\@lg, .flex\@md.row\@lg, .flex\@lg.row\@lg, .flex\@xl.row\@lg, .flex\@2xl.row\@lg {
@@ -1525,81 +1371,77 @@ 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 8.3333333333%;
+    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 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 16.6666666667%;
+    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 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 25%;
+    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 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 33.3333333333%;
+    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 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 41.6666666667%;
+    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 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 50%;
+    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 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 58.3333333333%;
+    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 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 66.6666666667%;
+    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 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 75%;
+    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 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 83.3333333333%;
+    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 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 91.6666666667%;
+    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 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 100%;
+    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 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;
   }
-  .flex.inline\@lg,
-  .flex\@lg.inline\@lg {
-    display: inline-flex;
-  }
 }
 @media (min-width: 1280px) {
   .flex.row\@xl, .flex\@xs.row\@xl, .flex\@sm.row\@xl, .flex\@md.row\@xl, .flex\@lg.row\@xl, .flex\@xl.row\@xl, .flex\@2xl.row\@xl {
@@ -1729,81 +1571,77 @@ 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 8.3333333333%;
+    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 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 16.6666666667%;
+    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 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 25%;
+    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 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 33.3333333333%;
+    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 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 41.6666666667%;
+    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 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 50%;
+    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 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 58.3333333333%;
+    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 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 66.6666666667%;
+    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 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 75%;
+    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 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 83.3333333333%;
+    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 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 91.6666666667%;
+    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 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 100%;
+    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 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;
   }
-  .flex.inline\@xl,
-  .flex\@xl.inline\@xl {
-    display: inline-flex;
-  }
 }
 @media (min-width: 1536px) {
   .flex.row\@2xl, .flex\@xs.row\@2xl, .flex\@sm.row\@2xl, .flex\@md.row\@2xl, .flex\@lg.row\@2xl, .flex\@xl.row\@2xl, .flex\@2xl.row\@2xl {
@@ -1933,116 +1771,77 @@ 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 8.3333333333%;
+    flex: 0 0 calc(8.3333333333% - calc(var(--flex-gap, 0px) * 11 / 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 16.6666666667%;
+    flex: 0 0 calc(16.6666666667% - calc(var(--flex-gap, 0px) * 5 / 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 25%;
+    flex: 0 0 calc(25% - calc(var(--flex-gap, 0px) * 3 / 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 33.3333333333%;
+    flex: 0 0 calc(33.3333333333% - calc(var(--flex-gap, 0px) * 2 / 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 41.6666666667%;
+    flex: 0 0 calc(41.6666666667% - calc(var(--flex-gap, 0px) * 1.4 / 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 50%;
+    flex: 0 0 calc(50% - calc(var(--flex-gap, 0px) * 1 / 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 58.3333333333%;
+    flex: 0 0 calc(58.3333333333% - calc(var(--flex-gap, 0px) * 0.7142857143 / 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 66.6666666667%;
+    flex: 0 0 calc(66.6666666667% - calc(var(--flex-gap, 0px) * 0.5 / 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 75%;
+    flex: 0 0 calc(75% - calc(var(--flex-gap, 0px) * 0.3333333333 / 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 83.3333333333%;
+    flex: 0 0 calc(83.3333333333% - calc(var(--flex-gap, 0px) * 0.2 / 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 91.6666666667%;
+    flex: 0 0 calc(91.6666666667% - calc(var(--flex-gap, 0px) * 0.0909090909 / 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 100%;
+    flex: 0 0 calc(100% - calc(var(--flex-gap, 0px) * 0 / 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;
   }
-  .flex.inline\@2xl,
-  .flex\@2xl.inline\@2xl {
-    display: inline-flex;
-  }
-}
-/**
- * @description Establishes a grid container.
- */
-/**
- * @description Establishes a inline-grid container.
- */
-/**
-* @description Establishes a grid container with a specified number of columns.
-* @param {number} $count - The number of columns.
-
-/// EXAMPLE USAGE
-.custom-grid {
-  display: grid;
-  @include cols-custom("1fr_auto_1fr");
-}
-
-*/
-/**
- * @description justify-items container.
- * @param {string} $value - The value for the justify-items property.
- */
-/**
- * @description Establishes a align-items container.
- * @param {string} $value - The value for the align-items property.
- */
-/**
- * @description Establishes a place-items container.
- * @param {string} $value - The value for the place-items property.
- */
-.grid, .grid\@xs, .grid\@sm, .grid\@md, .grid\@lg, .grid\@xl, .grid\@2xl {
-  display: grid;
-}
-.grid.inline, .grid\@xs.inline, .grid\@sm.inline, .grid\@md.inline, .grid\@lg.inline, .grid\@xl.inline, .grid\@2xl.inline {
-  display: inline-grid;
 }
 .grid.auto-fit-xs, .grid\@xs.auto-fit-xs, .grid\@sm.auto-fit-xs, .grid\@md.auto-fit-xs, .grid\@lg.auto-fit-xs, .grid\@xl.auto-fit-xs, .grid\@2xl.auto-fit-xs {
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -3356,72 +3155,6 @@ code {
     place-items: stretch;
   }
 }
-/**
- * @component Opacity
- * @description Controls element transparency with customizable opacity values and interactive states
- *
- * @example
- * <!-- Basic opacity -->
- * <div class="opacity-50">This element has 50% opacity</div>
- * 
- * <!-- Responsive opacity -->
- * <div class="opacity-100 opacity-50@md">
- *   100% opacity by default, 50% on medium screens and up
- * </div>
- * 
- * <!-- Interactive states -->
- * <div class="opacity-50 hover:opacity-100">
- *   50% opacity, becomes fully visible on hover
- * </div>
- * 
- * <button class="opacity-70 focus:opacity-100">
- *   70% opacity, fully visible when focused
- * </button>
- * 
- * <div class="opacity-75 active:opacity-100">
- *   75% opacity, fully visible when clicked/active
- * </div>
- * 
- * <!-- Group hover effect -->
- * <div class="group">
- *   <h3>Parent element with "group" class</h3>
- *   <div class="opacity-0 group-hover:opacity-100">
- *     Hidden by default, visible when parent is hovered
- *   </div>
- * </div>
- * 
- * <!-- With transition -->
- * <div class="opacity-50 hover:opacity-100 transition-opacity">
- *   Smooth opacity transition on hover
- * </div>
- *
- * @classes
- * Base:
- * - opacity-{value}: Sets element opacity (0-100%)
- *   Values: 0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100
- * 
- * Interactive States:
- * - hover:opacity-{value}: Changes opacity on mouse hover
- * - focus:opacity-{value}: Changes opacity when element receives focus
- * - active:opacity-{value}: Changes opacity when element is active/pressed
- * - group-hover:opacity-{value}: Changes opacity when parent with .group class is hovered
- * 
- * Animation:
- * - transition-opacity: Adds smooth transition when opacity changes
- *
- * @responsive
- * All opacity classes support responsive variants using @breakpoint suffix:
- * - opacity-50@sm: 50% opacity on small screens and up
- * - hover:opacity-100@md: Full opacity on hover for medium screens and up
- * 
- * Available breakpoints: xs, sm, md, lg, xl, xxl
- *
- * @customization
- * Opacity values are defined in the $percentages variable
- * Transition timing can be customized via CSS variables
- *
- * @see transitions 
- */
 .opacity-0,
 .hover\:opacity-0:hover,
 .focus\:opacity-0:focus,
@@ -4334,16 +4067,6 @@ code {
     vertical-align: bottom;
   }
 }
-/**
- * Backdrop Filter Utilities
- *
- * Provides utility classes and mixins for backdrop-filter effects.
- * All utilities come with responsive variants.
- *
- * Usage:
- * <div class="backdrop-blur-md">Blurred backdrop</div>
- * <div class="backdrop-blur-lg@md">Blurred backdrop on medium screens and up</div>
- */
 .backdrop-layer {
   --backdrop-blur: blur(0);
   --backdrop-brightness: brightness(100%);
@@ -5568,194 +5291,231 @@ code {
     backdrop-filter: blur(20px) saturate(90%) brightness(90%);
   }
 }
-/**
- * @description Applies border radius to all corners
- * @param {String} $val - The border radius value
- */
 .border {
+  --border-size: 1px;
   border-width: 1px;
   border-style: solid;
-  border-color: var(--border-base);
+  border-color: var(--border-color);
+  --border-style: solid;
+  --border-color: var(--border-color);
 }
 
 .border-0 {
+  --border-size: 0px;
   border-width: 0px;
   border-style: solid;
-  border-color: var(--border-base);
+  border-color: var(--border-color);
+  --border-style: solid;
+  --border-color: var(--border-color);
 }
 
-.border-0 {
-  border-width: 0px;
-  border-style: solid;
-  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-1 {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--border-base);
+.border-r {
+  border-right-width: 1px;
+  border-right-style: var(--border-style, solid);
+  border-right-color: var(--border-color);
 }
 
-.border-2 {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--border-base);
+.border-b {
+  border-bottom-width: 1px;
+  border-bottom-style: var(--border-style, solid);
+  border-bottom-color: var(--border-color);
 }
 
-.border-4 {
-  border-width: 4px;
-  border-style: solid;
-  border-color: var(--border-base);
+.border-l {
+  border-left-width: 1px;
+  border-left-style: var(--border-style, solid);
+  border-left-color: var(--border-color);
 }
 
-.border-8 {
-  border-width: 8px;
+.border-0,
+.hover\:border-0:hover,
+.active\:border-0:active,
+.focus\:border-0:focus,
+.group:hover .group-hover\:border-0 {
+  --border-size: 0px;
+  border-width: 0px;
   border-style: solid;
-  border-color: var(--border-base);
+  border-color: var(--border-color);
+  --border-style: solid;
+  --border-color: var(--border-color);
 }
 
 .border-t-0 {
   border-top-width: 0px;
-  border-top-style: solid;
-  border-top-color: var(--border);
+  border-top-style: var(--border-style, solid);
+  border-top-color: var(--border-color);
 }
 
 .border-r-0 {
   border-right-width: 0px;
-  border-right-style: solid;
-  border-right-color: var(--border);
+  border-right-style: var(--border-style, solid);
+  border-right-color: var(--border-color);
 }
 
 .border-b-0 {
   border-bottom-width: 0px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--border);
+  border-bottom-style: var(--border-style, solid);
+  border-bottom-color: var(--border-color);
 }
 
 .border-l-0 {
   border-left-width: 0px;
-  border-left-style: solid;
-  border-left-color: var(--border);
+  border-left-style: var(--border-style, solid);
+  border-left-color: var(--border-color);
+}
+
+.border-1,
+.hover\:border-1:hover,
+.active\:border-1:active,
+.focus\:border-1:focus,
+.group:hover .group-hover\:border-1 {
+  --border-size: 1px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--border-color);
+  --border-style: solid;
+  --border-color: var(--border-color);
 }
 
 .border-t-1 {
   border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: var(--border);
+  border-top-style: var(--border-style, solid);
+  border-top-color: var(--border-color);
 }
 
 .border-r-1 {
   border-right-width: 1px;
-  border-right-style: solid;
-  border-right-color: var(--border);
+  border-right-style: var(--border-style, solid);
+  border-right-color: var(--border-color);
 }
 
 .border-b-1 {
   border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--border);
+  border-bottom-style: var(--border-style, solid);
+  border-bottom-color: var(--border-color);
 }
 
 .border-l-1 {
   border-left-width: 1px;
-  border-left-style: solid;
-  border-left-color: var(--border);
+  border-left-style: var(--border-style, solid);
+  border-left-color: var(--border-color);
+}
+
+.border-2,
+.hover\:border-2:hover,
+.active\:border-2:active,
+.focus\:border-2:focus,
+.group:hover .group-hover\:border-2 {
+  --border-size: 2px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--border-color);
+  --border-style: solid;
+  --border-color: var(--border-color);
 }
 
 .border-t-2 {
   border-top-width: 2px;
-  border-top-style: solid;
-  border-top-color: var(--border);
+  border-top-style: var(--border-style, solid);
+  border-top-color: var(--border-color);
 }
 
 .border-r-2 {
   border-right-width: 2px;
-  border-right-style: solid;
-  border-right-color: var(--border);
+  border-right-style: var(--border-style, solid);
+  border-right-color: var(--border-color);
 }
 
 .border-b-2 {
   border-bottom-width: 2px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--border);
+  border-bottom-style: var(--border-style, solid);
+  border-bottom-color: var(--border-color);
 }
 
 .border-l-2 {
   border-left-width: 2px;
-  border-left-style: solid;
-  border-left-color: var(--border);
+  border-left-style: var(--border-style, solid);
+  border-left-color: var(--border-color);
+}
+
+.border-4,
+.hover\:border-4:hover,
+.active\:border-4:active,
+.focus\:border-4:focus,
+.group:hover .group-hover\:border-4 {
+  --border-size: 4px;
+  border-width: 4px;
+  border-style: solid;
+  border-color: var(--border-color);
+  --border-style: solid;
+  --border-color: var(--border-color);
 }
 
 .border-t-4 {
   border-top-width: 4px;
-  border-top-style: solid;
-  border-top-color: var(--border);
+  border-top-style: var(--border-style, solid);
+  border-top-color: var(--border-color);
 }
 
 .border-r-4 {
   border-right-width: 4px;
-  border-right-style: solid;
-  border-right-color: var(--border);
+  border-right-style: var(--border-style, solid);
+  border-right-color: var(--border-color);
 }
 
 .border-b-4 {
   border-bottom-width: 4px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--border);
+  border-bottom-style: var(--border-style, solid);
+  border-bottom-color: var(--border-color);
 }
 
 .border-l-4 {
   border-left-width: 4px;
-  border-left-style: solid;
-  border-left-color: var(--border);
+  border-left-style: var(--border-style, solid);
+  border-left-color: var(--border-color);
+}
+
+.border-8,
+.hover\:border-8:hover,
+.active\:border-8:active,
+.focus\:border-8:focus,
+.group:hover .group-hover\:border-8 {
+  --border-size: 8px;
+  border-width: 8px;
+  border-style: solid;
+  border-color: var(--border-color);
+  --border-style: solid;
+  --border-color: var(--border-color);
 }
 
 .border-t-8 {
   border-top-width: 8px;
-  border-top-style: solid;
-  border-top-color: var(--border);
+  border-top-style: var(--border-style, solid);
+  border-top-color: var(--border-color);
 }
 
 .border-r-8 {
   border-right-width: 8px;
-  border-right-style: solid;
-  border-right-color: var(--border);
+  border-right-style: var(--border-style, solid);
+  border-right-color: var(--border-color);
 }
 
 .border-b-8 {
   border-bottom-width: 8px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--border);
+  border-bottom-style: var(--border-style, solid);
+  border-bottom-color: var(--border-color);
 }
 
 .border-l-8 {
   border-left-width: 8px;
-  border-left-style: solid;
-  border-left-color: var(--border);
-}
-
-.border-t {
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: var(--border);
-}
-
-.border-r {
-  border-right-width: 1px;
-  border-right-style: solid;
-  border-right-color: var(--border);
-}
-
-.border-b {
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--border);
-}
-
-.border-l {
-  border-left-width: 1px;
-  border-left-style: solid;
-  border-left-color: var(--border);
+  border-left-style: var(--border-style, solid);
+  border-left-color: var(--border-color);
 }
 
 .rounded {
@@ -5770,34 +5530,6 @@ code {
   border-radius: 0.25rem;
 }
 
-.rounded-sm {
-  border-radius: 0.375rem;
-}
-
-.rounded-md {
-  border-radius: 0.5rem;
-}
-
-.rounded-lg {
-  border-radius: 0.75rem;
-}
-
-.rounded-xl {
-  border-radius: 1rem;
-}
-
-.rounded-2xl {
-  border-radius: 1.25rem;
-}
-
-.rounded-circle {
-  border-radius: 50%;
-}
-
-.rounded-none {
-  border-radius: 0px;
-}
-
 .rounded-t-xs {
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
@@ -5834,6 +5566,10 @@ code {
   border-bottom-left-radius: 0.25rem;
 }
 
+.rounded-sm {
+  border-radius: 0.375rem;
+}
+
 .rounded-t-sm {
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
@@ -5870,6 +5606,10 @@ code {
   border-bottom-left-radius: 0.375rem;
 }
 
+.rounded-md {
+  border-radius: 0.5rem;
+}
+
 .rounded-t-md {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -5906,6 +5646,10 @@ code {
   border-bottom-left-radius: 0.5rem;
 }
 
+.rounded-lg {
+  border-radius: 0.75rem;
+}
+
 .rounded-t-lg {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
@@ -5942,6 +5686,10 @@ code {
   border-bottom-left-radius: 0.75rem;
 }
 
+.rounded-xl {
+  border-radius: 1rem;
+}
+
 .rounded-t-xl {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
@@ -5978,6 +5726,10 @@ code {
   border-bottom-left-radius: 1rem;
 }
 
+.rounded-2xl {
+  border-radius: 1.25rem;
+}
+
 .rounded-t-2xl {
   border-top-left-radius: 1.25rem;
   border-top-right-radius: 1.25rem;
@@ -6014,42 +5766,50 @@ code {
   border-bottom-left-radius: 1.25rem;
 }
 
-.rounded-t-circle {
+.rounded-full {
+  border-radius: 50%;
+}
+
+.rounded-t-full {
   border-top-left-radius: 50%;
   border-top-right-radius: 50%;
 }
 
-.rounded-r-circle {
+.rounded-r-full {
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
 }
 
-.rounded-b-circle {
+.rounded-b-full {
   border-bottom-left-radius: 50%;
   border-bottom-right-radius: 50%;
 }
 
-.rounded-l-circle {
+.rounded-l-full {
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
 }
 
-.rounded-tl-circle {
+.rounded-tl-full {
   border-top-left-radius: 50%;
 }
 
-.rounded-tr-circle {
+.rounded-tr-full {
   border-top-right-radius: 50%;
 }
 
-.rounded-br-circle {
+.rounded-br-full {
   border-bottom-right-radius: 50%;
 }
 
-.rounded-bl-circle {
+.rounded-bl-full {
   border-bottom-left-radius: 50%;
 }
 
+.rounded-none {
+  border-radius: 0px;
+}
+
 .rounded-t-none {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
@@ -6090,365 +5850,230 @@ code {
   border-radius: 9999px;
 }
 
-.border-solid {
+.border-solid,
+.hover\:border-solid:hover,
+.active\:border-solid:active,
+.focus\:border-solid:focus,
+.group:hover .group-hover\:border-solid {
   border-style: solid;
 }
 
-.border-dashed {
+.border-dashed,
+.hover\:border-dashed:hover,
+.active\:border-dashed:active,
+.focus\:border-dashed:focus,
+.group:hover .group-hover\:border-dashed {
   border-style: dashed;
 }
 
-.border-dotted {
+.border-dotted,
+.hover\:border-dotted:hover,
+.active\:border-dotted:active,
+.focus\:border-dotted:focus,
+.group:hover .group-hover\:border-dotted {
   border-style: dotted;
 }
 
-.border-double {
+.border-double,
+.hover\:border-double:hover,
+.active\:border-double:active,
+.focus\:border-double:focus,
+.group:hover .group-hover\:border-double {
   border-style: double;
 }
 
-.border-none {
+.border-none,
+.hover\:border-none:hover,
+.active\:border-none:active,
+.focus\:border-none:focus,
+.group:hover .group-hover\:border-none {
   border-style: none;
 }
 
-.border-default {
-  border-color: var(--border);
-}
-
-.border-light {
-  border-color: var(--border-light-color);
-}
-
-.border-dark {
-  border-color: var(--border-dark-color);
-}
-
-.border-primary {
+.border-primary,
+.hover\:border-primary:hover,
+.active\:border-primary:active,
+.focus\:border-primary:focus,
+.group:hover .group-hover\:border-primary {
   border-color: var(--primary);
 }
 
-.border-secondary {
+.border-secondary,
+.hover\:border-secondary:hover,
+.active\:border-secondary:active,
+.focus\:border-secondary:focus,
+.group:hover .group-hover\:border-secondary {
   border-color: var(--secondary);
 }
 
-.border-success {
+.border-success,
+.hover\:border-success:hover,
+.active\:border-success:active,
+.focus\:border-success:focus,
+.group:hover .group-hover\:border-success {
   border-color: var(--success);
 }
 
-.border-danger {
+.border-danger,
+.hover\:border-danger:hover,
+.active\:border-danger:active,
+.focus\:border-danger:focus,
+.group:hover .group-hover\:border-danger {
   border-color: var(--danger);
 }
 
-.border-warning {
+.border-warning,
+.hover\:border-warning:hover,
+.active\:border-warning:active,
+.focus\:border-warning:focus,
+.group:hover .group-hover\:border-warning {
   border-color: var(--warning);
 }
 
-.border-info {
+.border-info,
+.hover\:border-info:hover,
+.active\:border-info:active,
+.focus\:border-info:focus,
+.group:hover .group-hover\:border-info {
   border-color: var(--info);
 }
 
-.border-primary-solid {
-  border-style: solid;
-  border-color: var(--primary);
+.border-gray,
+.hover\:border-gray:hover,
+.active\:border-gray:active,
+.focus\:border-gray:focus,
+.group:hover .group-hover\:border-gray {
+  border-color: var(--gray);
 }
 
-.border-danger-dashed {
-  border-style: dashed;
-  border-color: var(--danger);
+.border-red,
+.hover\:border-red:hover,
+.active\:border-red:active,
+.focus\:border-red:focus,
+.group:hover .group-hover\:border-red {
+  border-color: var(--red);
 }
 
-.hover\:border-0:hover {
-  border-width: 0px;
-  border-style: solid;
-  border-color: var(--border-base);
+.border-blue,
+.hover\:border-blue:hover,
+.active\:border-blue:active,
+.focus\:border-blue:focus,
+.group:hover .group-hover\:border-blue {
+  border-color: var(--blue);
 }
 
-.hover\:border-1:hover {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--border-base);
+.border-green,
+.hover\:border-green:hover,
+.active\:border-green:active,
+.focus\:border-green:focus,
+.group:hover .group-hover\:border-green {
+  border-color: var(--green);
 }
 
-.hover\:border-2:hover {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.hover\:border-4:hover {
-  border-width: 4px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.hover\:border-8:hover {
-  border-width: 8px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.hover\:border-solid:hover {
-  border-style: solid;
-}
-
-.hover\:border-dashed:hover {
-  border-style: dashed;
-}
-
-.hover\:border-dotted:hover {
-  border-style: dotted;
-}
-
-.hover\:border-double:hover {
-  border-style: double;
-}
-
-.hover\:border-none:hover {
-  border-style: none;
-}
-
-.hover\:border-default:hover {
-  border-color: var(--border);
-}
-
-.hover\:border-light:hover {
-  border-color: var(--border-light-color);
-}
-
-.hover\:border-dark:hover {
-  border-color: var(--border-dark-color);
-}
-
-.hover\:border-primary:hover {
-  border-color: var(--primary);
-}
-
-.hover\:border-secondary:hover {
-  border-color: var(--secondary);
-}
-
-.hover\:border-success:hover {
-  border-color: var(--success);
-}
-
-.hover\:border-danger:hover {
-  border-color: var(--danger);
-}
-
-.hover\:border-warning:hover {
-  border-color: var(--warning);
-}
-
-.hover\:border-info:hover {
-  border-color: var(--info);
-}
-
-.active\:border-0:active {
-  border-width: 0px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.active\:border-1:active {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.active\:border-2:active {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.active\:border-4:active {
-  border-width: 4px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.active\:border-8:active {
-  border-width: 8px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.active\:border-solid:active {
-  border-style: solid;
-}
-
-.active\:border-dashed:active {
-  border-style: dashed;
-}
-
-.active\:border-dotted:active {
-  border-style: dotted;
-}
-
-.active\:border-double:active {
-  border-style: double;
-}
-
-.active\:border-none:active {
-  border-style: none;
-}
-
-.active\:border-default:active {
-  border-color: var(--border);
-}
-
-.active\:border-light:active {
-  border-color: var(--border-light-color);
-}
-
-.active\:border-dark:active {
-  border-color: var(--border-dark-color);
-}
-
-.active\:border-primary:active {
-  border-color: var(--primary);
-}
-
-.active\:border-secondary:active {
-  border-color: var(--secondary);
-}
-
-.active\:border-success:active {
-  border-color: var(--success);
-}
-
-.active\:border-danger:active {
-  border-color: var(--danger);
-}
-
-.active\:border-warning:active {
-  border-color: var(--warning);
-}
-
-.active\:border-info:active {
-  border-color: var(--info);
-}
-
-.focus\:border-0:focus {
-  border-width: 0px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.focus\:border-1:focus {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.focus\:border-2:focus {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.focus\:border-4:focus {
-  border-width: 4px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.focus\:border-8:focus {
-  border-width: 8px;
-  border-style: solid;
-  border-color: var(--border-base);
-}
-
-.focus\:border-solid:focus {
-  border-style: solid;
-}
-
-.focus\:border-dashed:focus {
-  border-style: dashed;
-}
-
-.focus\:border-dotted:focus {
-  border-style: dotted;
-}
-
-.focus\:border-double:focus {
-  border-style: double;
-}
-
-.focus\:border-none:focus {
-  border-style: none;
-}
-
-.focus\:border-default:focus {
-  border-color: var(--border);
-}
-
-.focus\:border-light:focus {
-  border-color: var(--border-light-color);
-}
-
-.focus\:border-dark:focus {
-  border-color: var(--border-dark-color);
-}
-
-.focus\:border-primary:focus {
-  border-color: var(--primary);
+.border-yellow,
+.hover\:border-yellow:hover,
+.active\:border-yellow:active,
+.focus\:border-yellow:focus,
+.group:hover .group-hover\:border-yellow {
+  border-color: var(--yellow);
 }
 
-.focus\:border-secondary:focus {
-  border-color: var(--secondary);
+.border-purple,
+.hover\:border-purple:hover,
+.active\:border-purple:active,
+.focus\:border-purple:focus,
+.group:hover .group-hover\:border-purple {
+  border-color: var(--purple);
 }
 
-.focus\:border-success:focus {
-  border-color: var(--success);
+.border-pink,
+.hover\:border-pink:hover,
+.active\:border-pink:active,
+.focus\:border-pink:focus,
+.group:hover .group-hover\:border-pink {
+  border-color: var(--pink);
 }
 
-.focus\:border-danger:focus {
-  border-color: var(--danger);
+.border-black,
+.hover\:border-black:hover,
+.active\:border-black:active,
+.focus\:border-black:focus,
+.group:hover .group-hover\:border-black {
+  border-color: var(--black);
 }
 
-.focus\:border-warning:focus {
-  border-color: var(--warning);
+.border-white,
+.hover\:border-white:hover,
+.active\:border-white:active,
+.focus\:border-white:focus,
+.group:hover .group-hover\:border-white {
+  border-color: var(--white);
 }
 
-.focus\:border-info:focus {
-  border-color: var(--info);
+.border-transparent,
+.hover\:border-transparent:hover,
+.active\:border-transparent:active,
+.focus\:border-transparent:focus,
+.group:hover .group-hover\:border-transparent {
+  border-color: var(--transparent);
 }
 
 @media (min-width: 480px) {
   .border-0\@xs {
+    --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-1\@xs {
+    --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-2\@xs {
+    --border-size: 2px;
     border-width: 2px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-4\@xs {
+    --border-size: 4px;
     border-width: 4px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-8\@xs {
+    --border-size: 8px;
     border-width: 8px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border\@xs {
+    --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-0\@xs {
+    --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .rounded-xs\@xs {
     border-radius: 0.25rem;
@@ -6468,7 +6093,7 @@ code {
   .rounded-2xl\@xs {
     border-radius: 1.25rem;
   }
-  .rounded-circle\@xs {
+  .rounded-full\@xs {
     border-radius: 50%;
   }
   .rounded-none\@xs {
@@ -6486,39 +6111,60 @@ code {
 }
 @media (min-width: 640px) {
   .border-0\@sm {
+    --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-1\@sm {
+    --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-2\@sm {
+    --border-size: 2px;
     border-width: 2px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-4\@sm {
+    --border-size: 4px;
     border-width: 4px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-8\@sm {
+    --border-size: 8px;
     border-width: 8px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border\@sm {
+    --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-0\@sm {
+    --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .rounded-xs\@sm {
     border-radius: 0.25rem;
@@ -6538,7 +6184,7 @@ code {
   .rounded-2xl\@sm {
     border-radius: 1.25rem;
   }
-  .rounded-circle\@sm {
+  .rounded-full\@sm {
     border-radius: 50%;
   }
   .rounded-none\@sm {
@@ -6556,39 +6202,60 @@ code {
 }
 @media (min-width: 768px) {
   .border-0\@md {
+    --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-1\@md {
+    --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-2\@md {
+    --border-size: 2px;
     border-width: 2px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-4\@md {
+    --border-size: 4px;
     border-width: 4px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-8\@md {
+    --border-size: 8px;
     border-width: 8px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border\@md {
+    --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-0\@md {
+    --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .rounded-xs\@md {
     border-radius: 0.25rem;
@@ -6608,7 +6275,7 @@ code {
   .rounded-2xl\@md {
     border-radius: 1.25rem;
   }
-  .rounded-circle\@md {
+  .rounded-full\@md {
     border-radius: 50%;
   }
   .rounded-none\@md {
@@ -6626,39 +6293,60 @@ code {
 }
 @media (min-width: 1024px) {
   .border-0\@lg {
+    --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-1\@lg {
+    --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-2\@lg {
+    --border-size: 2px;
     border-width: 2px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-4\@lg {
+    --border-size: 4px;
     border-width: 4px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-8\@lg {
+    --border-size: 8px;
     border-width: 8px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border\@lg {
+    --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-0\@lg {
+    --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .rounded-xs\@lg {
     border-radius: 0.25rem;
@@ -6678,7 +6366,7 @@ code {
   .rounded-2xl\@lg {
     border-radius: 1.25rem;
   }
-  .rounded-circle\@lg {
+  .rounded-full\@lg {
     border-radius: 50%;
   }
   .rounded-none\@lg {
@@ -6696,39 +6384,60 @@ code {
 }
 @media (min-width: 1280px) {
   .border-0\@xl {
+    --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-1\@xl {
+    --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-2\@xl {
+    --border-size: 2px;
     border-width: 2px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-4\@xl {
+    --border-size: 4px;
     border-width: 4px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-8\@xl {
+    --border-size: 8px;
     border-width: 8px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border\@xl {
+    --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-0\@xl {
+    --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .rounded-xs\@xl {
     border-radius: 0.25rem;
@@ -6748,7 +6457,7 @@ code {
   .rounded-2xl\@xl {
     border-radius: 1.25rem;
   }
-  .rounded-circle\@xl {
+  .rounded-full\@xl {
     border-radius: 50%;
   }
   .rounded-none\@xl {
@@ -6766,39 +6475,60 @@ code {
 }
 @media (min-width: 1536px) {
   .border-0\@2xl {
+    --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-1\@2xl {
+    --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-2\@2xl {
+    --border-size: 2px;
     border-width: 2px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-4\@2xl {
+    --border-size: 4px;
     border-width: 4px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-8\@2xl {
+    --border-size: 8px;
     border-width: 8px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border\@2xl {
+    --border-size: 1px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .border-0\@2xl {
+    --border-size: 0px;
     border-width: 0px;
     border-style: solid;
-    border-color: var(--border-base);
+    border-color: var(--border-color);
+    --border-style: solid;
+    --border-color: var(--border-color);
   }
   .rounded-xs\@2xl {
     border-radius: 0.25rem;
@@ -6818,7 +6548,7 @@ code {
   .rounded-2xl\@2xl {
     border-radius: 1.25rem;
   }
-  .rounded-circle\@2xl {
+  .rounded-full\@2xl {
     border-radius: 50%;
   }
   .rounded-none\@2xl {
@@ -6834,21 +6564,6 @@ code {
     border-radius: 9999px;
   }
 }
-/**
- * Container Query Mixins
- *
- * Usage:
- * .container {
- *   container-type: inline-size;
- *   container-name: sidebar;
- * }
- * 
- * .item {
- *   @include container-up('md', 'sidebar') {
- *     // Styles for 'md' and up within 'sidebar' container
- *   }
- * }
- */
 .container-inline-size {
   container-type: inline-size;
 }
@@ -7001,42 +6716,6 @@ code {
   cursor: all-scroll;
 }
 
-/**
- * Display Utilities
- *
- * Classes:
- * - .hide, .show: Control element visibility
- * - .block, .inline, .inline-block: Basic display modes
- * - .d-tbl, .d-tbl-row, .d-tbl-cell: Table display modes
- * - .overflow-hidden: Control overflow behavior
- *
- * All utilities support responsive variants with @breakpoint suffix:
- * - .hide@md, .block@lg, etc.
- */
-/**
- * @description Set display to none.
- */
-/**
- * @description Set display to block.
- */
-/**
- * @description Set display to inline.
- */
-/**
- * @description Set display to inline-block.
- */
-/**
- * @description Set display to initial original state.
- */
-/**
- * @description Set display to table.
- */
-/**
- * @description Set display to table-row.
- */
-/**
- * @description Set display to table-cell.
- */
 .hide {
   display: none;
 }
@@ -7057,6 +6736,24 @@ code {
   display: inline-block;
 }
 
+.contents {
+  display: contents;
+}
+
+.grid {
+  display: grid;
+}
+.grid.inline {
+  display: inline-grid;
+}
+
+.flex {
+  display: flex;
+}
+.flex.inline {
+  display: inline-flex;
+}
+
 .visible {
   visibility: visible;
 }
@@ -7069,10 +6766,6 @@ code {
   visibility: collapse;
 }
 
-.contents {
-  display: contents;
-}
-
 .overflow-hidden {
   overflow: hidden;
 }
@@ -7139,6 +6832,21 @@ code {
   .inline-block\@xs {
     display: inline-block;
   }
+  .contents\@xs {
+    display: contents;
+  }
+  .grid\@xs {
+    display: grid;
+  }
+  .grid\@xs.inline {
+    display: inline-grid;
+  }
+  .flex\@xs {
+    display: flex;
+  }
+  .flex\@xs.inline {
+    display: inline-flex;
+  }
   .visible\@xs {
     visibility: visible;
   }
@@ -7148,9 +6856,6 @@ code {
   .collapse\@xs {
     visibility: collapse;
   }
-  .contents\@xs {
-    display: contents;
-  }
   .overflow-hidden\@xs {
     overflow: hidden;
   }
@@ -7207,6 +6912,21 @@ code {
   .inline-block\@sm {
     display: inline-block;
   }
+  .contents\@sm {
+    display: contents;
+  }
+  .grid\@sm {
+    display: grid;
+  }
+  .grid\@sm.inline {
+    display: inline-grid;
+  }
+  .flex\@sm {
+    display: flex;
+  }
+  .flex\@sm.inline {
+    display: inline-flex;
+  }
   .visible\@sm {
     visibility: visible;
   }
@@ -7216,9 +6936,6 @@ code {
   .collapse\@sm {
     visibility: collapse;
   }
-  .contents\@sm {
-    display: contents;
-  }
   .overflow-hidden\@sm {
     overflow: hidden;
   }
@@ -7275,6 +6992,21 @@ code {
   .inline-block\@md {
     display: inline-block;
   }
+  .contents\@md {
+    display: contents;
+  }
+  .grid\@md {
+    display: grid;
+  }
+  .grid\@md.inline {
+    display: inline-grid;
+  }
+  .flex\@md {
+    display: flex;
+  }
+  .flex\@md.inline {
+    display: inline-flex;
+  }
   .visible\@md {
     visibility: visible;
   }
@@ -7284,9 +7016,6 @@ code {
   .collapse\@md {
     visibility: collapse;
   }
-  .contents\@md {
-    display: contents;
-  }
   .overflow-hidden\@md {
     overflow: hidden;
   }
@@ -7343,6 +7072,21 @@ code {
   .inline-block\@lg {
     display: inline-block;
   }
+  .contents\@lg {
+    display: contents;
+  }
+  .grid\@lg {
+    display: grid;
+  }
+  .grid\@lg.inline {
+    display: inline-grid;
+  }
+  .flex\@lg {
+    display: flex;
+  }
+  .flex\@lg.inline {
+    display: inline-flex;
+  }
   .visible\@lg {
     visibility: visible;
   }
@@ -7352,9 +7096,6 @@ code {
   .collapse\@lg {
     visibility: collapse;
   }
-  .contents\@lg {
-    display: contents;
-  }
   .overflow-hidden\@lg {
     overflow: hidden;
   }
@@ -7411,6 +7152,21 @@ code {
   .inline-block\@xl {
     display: inline-block;
   }
+  .contents\@xl {
+    display: contents;
+  }
+  .grid\@xl {
+    display: grid;
+  }
+  .grid\@xl.inline {
+    display: inline-grid;
+  }
+  .flex\@xl {
+    display: flex;
+  }
+  .flex\@xl.inline {
+    display: inline-flex;
+  }
   .visible\@xl {
     visibility: visible;
   }
@@ -7420,9 +7176,6 @@ code {
   .collapse\@xl {
     visibility: collapse;
   }
-  .contents\@xl {
-    display: contents;
-  }
   .overflow-hidden\@xl {
     overflow: hidden;
   }
@@ -7479,6 +7232,21 @@ code {
   .inline-block\@2xl {
     display: inline-block;
   }
+  .contents\@2xl {
+    display: contents;
+  }
+  .grid\@2xl {
+    display: grid;
+  }
+  .grid\@2xl.inline {
+    display: inline-grid;
+  }
+  .flex\@2xl {
+    display: flex;
+  }
+  .flex\@2xl.inline {
+    display: inline-flex;
+  }
   .visible\@2xl {
     visibility: visible;
   }
@@ -7488,9 +7256,6 @@ code {
   .collapse\@2xl {
     visibility: collapse;
   }
-  .contents\@2xl {
-    display: contents;
-  }
   .overflow-hidden\@2xl {
     overflow: hidden;
   }
@@ -7531,19 +7296,6 @@ code {
     display: table-cell;
   }
 }
-/**
-* Generates a CSS shadow string from a given size.
-*
-* @param {String} $size - The shadow size.
-* @param {String} $color - The shadow color.
-* @return {String} - The CSS shadow string.
-*/
-/**
-* Generates a CSS shadow string from a given size.
-*
-* @param {String} $size - The shadow size.
-* @param {String} $color - The shadow color.
-*/
 .shadow-none {
   box-shadow: none !important;
 }
@@ -15123,7 +14875,7 @@ code {
 }
 
 [role~=tooltip][data-microtip-position|=top]::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
   height: 6px;
   width: 18px;
   margin-bottom: 6px;
@@ -15161,7 +14913,7 @@ code {
 }
 
 [role~=tooltip][data-microtip-position|=bottom]::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
   height: 6px;
   width: 18px;
   margin-top: 5px;
@@ -15208,7 +14960,7 @@ code {
   transform: translate3d(10px, -50%, 0);
 }
 [role~=tooltip][data-microtip-position=left]::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
   height: 18px;
   width: 6px;
   margin-right: 5px;
@@ -15228,7 +14980,7 @@ code {
   transform: translate3d(-10px, -50%, 0);
 }
 [role~=tooltip][data-microtip-position=right]::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
   height: 18px;
   width: 6px;
   margin-bottom: 0;
@@ -15256,15 +15008,6 @@ code {
   width: var(--tooltip-large-width);
 }
 
-/**
- * Transform Utilities
- * 
- * - Translate (X, Y, Z)
- * - Scale
- * - Rotate
- * - Skew
- * - Transform origin
- */
 .translate-x-0,
 .hover\:translate-x-0:hover,
 .group:hover .group-hover\:translate-x-0 {
@@ -20358,15 +20101,6 @@ code {
     transform-origin: top left;
   }
 }
-/**
- * Transition Utilities
- * 
- * - .transition: Default transition for common properties
- * - .transition-{property}: Transition specific properties
- * - .duration-{time}: Set transition duration
- * - .ease-{type}: Set transition timing function
- * - .delay-{time}: Set transition delay
- */
 .transition-none {
   transition-property: none;
 }
@@ -21029,26 +20763,6 @@ code {
     transition-delay: 1000ms;
   }
 }
-/**
- * Typography Utilities
- * 
- * Classes:
- * - Font Size: .text-xs, .text-sm, .text-base, etc.
- * - Font Weight: .font-thin, .font-normal, .font-bold, etc.
- * - Line Height: .leading-none, .leading-tight, .leading-normal, etc.
- * - Text Align: .text-left, .text-center, .text-right, .text-justify
- * - Text Transform: .uppercase, .lowercase, .capitalize, .normal-case
- * - Text Style: .italic, .not-italic
- * - Text Decoration: .underline, .line-through, .no-underline
- * - Text Overflow: .truncate
- * 
- * All utilities support responsive variants with @breakpoint suffix:
- * - .text-lg@md, .font-bold@lg, etc.
- */
-/**
-* Text size utility
-* @param {string} $size - The size of the text.
-*/
 .text-xs {
   font-size: 0.75rem;
 }
@@ -22488,24 +22202,6 @@ code {
     min-width: 0;
   }
 }
-/**
- * Z-Index Utilities
- * 
- * Classes:
- * - z-index values: .z-0, .z-10, .z-20, etc.
- * - Named z-index levels: .z-auto, .z-base, .z-dropdown, etc.
- * 
- * All utilities support responsive variants with @breakpoint suffix:
- * - .z-10@md, .z-dropdown@lg, etc.
- */
-/**
- * Apply a z-index value
- * @param {Number|String} $value - Z-index value or key
- */
-/**
- * Generate z-index utility classes
- * @param {String} $breakpoint - Optional breakpoint name for responsive variants
- */
 .z-auto {
   z-index: auto;
 }
@@ -23112,208 +22808,6 @@ code {
     z-index: 9999;
   }
 }
-/**
- * @component Spacing
- * @description Controls element margins, padding, gaps, and spacing between children
- *
- * @example
- * <!-- Padding -->
- * <div class="p-4">All sides padding</div>
- * <div class="px-4 py-2">Horizontal and vertical padding</div>
- * <div class="pt-2 pb-4">Top and bottom padding</div>
- * 
- * <!-- Margins -->
- * <div class="m-4">All sides margin</div>
- * <div class="mt-4">Top margin only</div>
- * <div class="mx-auto">Horizontally centered</div>
- * 
- * <!-- Gap (for flex/grid containers) -->
- * <div class="flex gap-4">
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- * </div>
- * 
- * <!-- Responsive spacing -->
- * <div class="p-2 p-4@md p-6@lg">
- *   Padding increases at each breakpoint
- * </div>
- * 
- * <!-- Child spacing -->
- * <div class="space-y-4">
- *   <div>First child</div>
- *   <div>Second child (margin-top: 1rem)</div>
- *   <div>Third child (margin-top: 1rem)</div>
- * </div>
- *
- * @classes
- * Padding:
- * - p-{size}: Padding on all sides
- * - px-{size}: Horizontal padding (left and right)
- * - py-{size}: Vertical padding (top and bottom)
- * - pt-{size}, pr-{size}, pb-{size}, pl-{size}: Individual side padding
- * 
- * Margin:
- * - m-{size}: Margin on all sides
- * - mx-{size}: Horizontal margin (left and right)
- * - my-{size}: Vertical margin (top and bottom)
- * - mt-{size}, mr-{size}, mb-{size}, ml-{size}: Individual side margin
- * - mx-auto, ml-auto, mr-auto: Auto margin for alignment
- * 
- * Gap:
- * - gap-{size}: Gap between flex/grid children (all directions)
- * - gap-x-{size}: Horizontal gap between children (column-gap)
- * - gap-y-{size}: Vertical gap between children (row-gap)
- * 
- * Child Spacing:
- * - space-x-{size}: Horizontal space between children
- * - space-y-{size}: Vertical space between children
- *
- * @responsive
- * All spacing classes support responsive variants using @breakpoint suffix:
- * - p-4@md: 1rem padding on medium screens and up
- * - mt-8@lg: 2rem top margin on large screens
- * - gap-2@xl: 0.5rem gap on extra large screens
- *
- * @customization
- * Spacing values are defined in the $spacings map in variables.scss
- * Typically follows a scale where higher numbers mean more spacing
- *
- * @see flex, grid, display
- */
-/**
- * @mixin p
- * @description Sets padding on all sides
- * @param {Number|String} $val - Padding value
- */
-/**
-* @mixin px
-* @description Sets horizontal padding (left and right)
-* @param {Number|String} $val - Padding value
-*/
-/**
-* @mixin py
-* @description Sets vertical padding (top and bottom)
-* @param {Number|String} $val - Padding value
-*/
-/**
-* @mixin pt
-* @description Sets padding-top
-* @param {Number|String} $val - Padding value
-*/
-/**
-* @mixin pr
-* @description Sets padding-right
-* @param {Number|String} $val - Padding value
-*/
-/**
-* @mixin pb
-* @description Sets padding-bottom
-* @param {Number|String} $val - Padding value
-*/
-/**
-* @mixin pl
-* @description Sets padding-left
-* @param {Number|String} $val - Padding value
-*/
-/**
-* @mixin m
-* @description Sets margin on all sides
-* @param {Number|String} $val - Margin value
-*/
-/**
-* @mixin mx
-* @description Sets horizontal margin (left and right)
-* @param {Number|String} $val - Margin value
-*/
-/**
-* @mixin my
-* @description Sets vertical margin (top and bottom)
-* @param {Number|String} $val - Margin value
-*/
-/**
-* @mixin mt
-* @description Sets margin-top
-* @param {Number|String} $val - Margin value
-*/
-/**
-* @mixin mr
-* @description Sets margin-right 
-* @param {Number|String} $val - Margin value
-*/
-/**
-* @mixin mb
-* @description Sets margin-bottom
-* @param {Number|String} $val - Margin value
-*/
-/**
-* @mixin ml
-* @description Sets margin-left
-* @param {Number|String} $val - Margin value
-*/
-/**
-* @mixin ml-auto
-* @description Sets margin-left to auto
-*/
-/**
-* @mixin mr-auto
-* @description Sets margin-right to auto
-*/
-/**
-* @mixin mx-auto
-* @description Centers element horizontally using auto margins
-*/
-/**
- * @mixin inset
- * @description Sets all inset properties (top, right, bottom, left)
- * @param {Number|String} $val - Inset value
- */
-/**
- * @mixin inset-x
- * @description Sets horizontal inset properties (left and right)
- * @param {Number|String} $val - Inset value
- */
-/**
- * @mixin inset-y
- * @description Sets vertical inset properties (top and bottom)
- * @param {Number|String} $val - Inset value
- */
-/**
- * @mixin inset-auto
- * @description Sets all inset properties to auto
- */
-/**
- * @mixin inset-x-auto
- * @description Sets horizontal inset properties to auto
- */
-/**
- * @mixin inset-y-auto
- * @description Sets vertical inset properties to auto
- */
-/**
- * @mixin space-y
- * @description Adds vertical spacing between direct children
- * @param {Number|String} $i - Space amount
- */
-/**
-  * @mixin space-x
-  * @description Adds horizontal spacing between direct children
-  * @param {Number|String} $i - Space amount
-  */
-/**
- * @mixin gap
- * @description Sets gap between grid/flex children
- * @param {Number|String} $val - Gap value
- */
-/**
-  * @mixin gap-x
-  * @description Sets horizontal gap between grid/flex children
-  * @param {Number|String} $val - Gap value
-  */
-/**
-  * @mixin gap-y
-  * @description Sets vertical gap between grid/flex children
-  * @param {Number|String} $val - Gap value
-  */
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -23403,10 +22897,12 @@ code {
 
 .gap-0 {
   gap: 0px;
+  --flex-gap: 0px;
 }
 
 .gap-x-0 {
   column-gap: 0px;
+  --flex-gap: 0px;
 }
 
 .gap-y-0 {
@@ -23493,10 +22989,12 @@ code {
 
 .gap-1 {
   gap: 0.25rem;
+  --flex-gap: 0.25rem;
 }
 
 .gap-x-1 {
   column-gap: 0.25rem;
+  --flex-gap: 0.25rem;
 }
 
 .gap-y-1 {
@@ -23583,10 +23081,12 @@ code {
 
 .gap-2 {
   gap: 0.5rem;
+  --flex-gap: 0.5rem;
 }
 
 .gap-x-2 {
   column-gap: 0.5rem;
+  --flex-gap: 0.5rem;
 }
 
 .gap-y-2 {
@@ -23673,10 +23173,12 @@ code {
 
 .gap-3 {
   gap: 0.75rem;
+  --flex-gap: 0.75rem;
 }
 
 .gap-x-3 {
   column-gap: 0.75rem;
+  --flex-gap: 0.75rem;
 }
 
 .gap-y-3 {
@@ -23763,10 +23265,12 @@ code {
 
 .gap-4 {
   gap: 1rem;
+  --flex-gap: 1rem;
 }
 
 .gap-x-4 {
   column-gap: 1rem;
+  --flex-gap: 1rem;
 }
 
 .gap-y-4 {
@@ -23853,10 +23357,12 @@ code {
 
 .gap-5 {
   gap: 1.25rem;
+  --flex-gap: 1.25rem;
 }
 
 .gap-x-5 {
   column-gap: 1.25rem;
+  --flex-gap: 1.25rem;
 }
 
 .gap-y-5 {
@@ -23943,10 +23449,12 @@ code {
 
 .gap-6 {
   gap: 1.5rem;
+  --flex-gap: 1.5rem;
 }
 
 .gap-x-6 {
   column-gap: 1.5rem;
+  --flex-gap: 1.5rem;
 }
 
 .gap-y-6 {
@@ -24033,10 +23541,12 @@ code {
 
 .gap-8 {
   gap: 2rem;
+  --flex-gap: 2rem;
 }
 
 .gap-x-8 {
   column-gap: 2rem;
+  --flex-gap: 2rem;
 }
 
 .gap-y-8 {
@@ -24123,10 +23633,12 @@ code {
 
 .gap-10 {
   gap: 2.5rem;
+  --flex-gap: 2.5rem;
 }
 
 .gap-x-10 {
   column-gap: 2.5rem;
+  --flex-gap: 2.5rem;
 }
 
 .gap-y-10 {
@@ -24213,10 +23725,12 @@ code {
 
 .gap-12 {
   gap: 3rem;
+  --flex-gap: 3rem;
 }
 
 .gap-x-12 {
   column-gap: 3rem;
+  --flex-gap: 3rem;
 }
 
 .gap-y-12 {
@@ -24303,10 +23817,12 @@ code {
 
 .gap-16 {
   gap: 4rem;
+  --flex-gap: 4rem;
 }
 
 .gap-x-16 {
   column-gap: 4rem;
+  --flex-gap: 4rem;
 }
 
 .gap-y-16 {
@@ -24393,10 +23909,12 @@ code {
 
 .gap-20 {
   gap: 5rem;
+  --flex-gap: 5rem;
 }
 
 .gap-x-20 {
   column-gap: 5rem;
+  --flex-gap: 5rem;
 }
 
 .gap-y-20 {
@@ -24483,10 +24001,12 @@ code {
 
 .gap-24 {
   gap: 6rem;
+  --flex-gap: 6rem;
 }
 
 .gap-x-24 {
   column-gap: 6rem;
+  --flex-gap: 6rem;
 }
 
 .gap-y-24 {
@@ -24573,10 +24093,12 @@ code {
 
 .gap-32 {
   gap: 8rem;
+  --flex-gap: 8rem;
 }
 
 .gap-x-32 {
   column-gap: 8rem;
+  --flex-gap: 8rem;
 }
 
 .gap-y-32 {
@@ -24663,10 +24185,12 @@ code {
 
 .gap-40 {
   gap: 10rem;
+  --flex-gap: 10rem;
 }
 
 .gap-x-40 {
   column-gap: 10rem;
+  --flex-gap: 10rem;
 }
 
 .gap-y-40 {
@@ -24753,10 +24277,12 @@ code {
 
 .gap-48 {
   gap: 12rem;
+  --flex-gap: 12rem;
 }
 
 .gap-x-48 {
   column-gap: 12rem;
+  --flex-gap: 12rem;
 }
 
 .gap-y-48 {
@@ -24843,10 +24369,12 @@ code {
 
 .gap-56 {
   gap: 14rem;
+  --flex-gap: 14rem;
 }
 
 .gap-x-56 {
   column-gap: 14rem;
+  --flex-gap: 14rem;
 }
 
 .gap-y-56 {
@@ -24933,10 +24461,12 @@ code {
 
 .gap-64 {
   gap: 16rem;
+  --flex-gap: 16rem;
 }
 
 .gap-x-64 {
   column-gap: 16rem;
+  --flex-gap: 16rem;
 }
 
 .gap-y-64 {
@@ -32447,36 +31977,6 @@ code {
     bottom: 16rem;
   }
 }
-/**
- * @mixin animate-bounce
- * @description Creates a bouncing animation
- * @param {Map} $props - Animation properties
- */
-/**
- * @mixin animate-pulse
- * @description Creates a pulsing opacity animation
- * @param {Map} $props - Animation properties
- */
-/**
- * @mixin animate-spin
- * @description Creates a spinning animation
- * @param {Map} $props - Animation properties
- */
-/**
- * @mixin animate-ping
- * @description Creates a ping animation (scale + fade)
- * @param {Map} $props - Animation properties
- */
-/**
- * @mixin animate-fade
- * @description Creates fade in/out animation
- * @param {Map} $props - Animation properties
- */
-/**
- * @mixin animate-shake
- * @description Creates a shake animation
- * @param {Map} $props - Animation properties
- */
 .animate-pulse {
   animation: anim-pulse-50-100 1s ease-in-out infinite;
 }
@@ -32564,9 +32064,9 @@ code {
 }
 
 .animate-shake {
-  animation: anim-shake-5 0.5s ease-in-out 1;
+  animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
 }
-@keyframes anim-shake-5 {
+@keyframes anim-shake-strip-unit(5px) {
   0%, 100% {
     transform: translateX(0);
   }
@@ -32601,7 +32101,7 @@ code {
     animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
   }
   .animate-shake\@xs {
-    animation: anim-shake-5 0.5s ease-in-out 1;
+    animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
   }
 }
 @media (min-width: 640px) {
@@ -32627,7 +32127,7 @@ code {
     animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
   }
   .animate-shake\@sm {
-    animation: anim-shake-5 0.5s ease-in-out 1;
+    animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
   }
 }
 @media (min-width: 768px) {
@@ -32653,7 +32153,7 @@ code {
     animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
   }
   .animate-shake\@md {
-    animation: anim-shake-5 0.5s ease-in-out 1;
+    animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
   }
 }
 @media (min-width: 1024px) {
@@ -32679,7 +32179,7 @@ code {
     animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
   }
   .animate-shake\@lg {
-    animation: anim-shake-5 0.5s ease-in-out 1;
+    animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
   }
 }
 @media (min-width: 1280px) {
@@ -32705,7 +32205,7 @@ code {
     animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
   }
   .animate-shake\@xl {
-    animation: anim-shake-5 0.5s ease-in-out 1;
+    animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
   }
 }
 @media (min-width: 1536px) {
@@ -32731,7 +32231,7 @@ code {
     animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
   }
   .animate-shake\@2xl {
-    animation: anim-shake-5 0.5s ease-in-out 1;
+    animation: anim-shake-strip-unit(5px) 0.5s ease-in-out 1;
   }
 }
 .hover-ready {
@@ -32740,137 +32240,6 @@ code {
   transition-timing-function: ease-in-out;
 }
 
-/**
- * @component Position
- * @description Controls element positioning and placement within the document flow
- *
- * @example
- * <!-- Basic positioning -->
- * <div class="relative">
- *   <div class="absolute top-0 right-0">
- *     Positioned in top-right corner
- *   </div>
- * </div>
- * 
- * <!-- Sticky header -->
- * <header class="sticky top-0">
- *   This header sticks to the top when scrolling
- * </header>
- * 
- * <!-- Responsive positioning -->
- * <div class="relative@md">
- *   <div class="absolute@md top-2 left-2">
- *     Only positioned on medium screens and up
- *   </div>
- * </div>
- *
- * @classes
- * Position Types:
- * - static: Default position, follows document flow
- * - relative: Positioned relative to normal position
- * - absolute: Positioned relative to nearest positioned ancestor
- * - fixed: Positioned relative to viewport
- * - sticky: Positioned based on scroll position
- * 
- * Placement:
- * - top-{value}: Sets top position
- * - right-{value}: Sets right position
- * - bottom-{value}: Sets bottom position
- * - left-{value}: Sets left position
- * 
- * Common values: 0, 1, 2, 3, 4, 5, 10, etc. (based on spacing scale)
- *
- * @responsive
- * All position classes support responsive variants using @breakpoint suffix:
- * - relative@md: Relative positioning on medium screens and up
- * - top-0@lg: Zero top position on large screens
- *
- * @see z-index, transform
- */
-/**
- * @mixin static
- * @description Sets position to static (default document flow)
- * @example
- * .element {
- *   @include static;
- * }
- */
-/**
- * @mixin relative
- * @description Sets position to relative, creating a positioning context
- * @example
- * .container {
- *   @include relative;
- * }
- */
-/**
- * @mixin absolute
- * @description Sets position to absolute, removing from normal document flow
- * @example
- * .popup {
- *   @include absolute;
- *   top: 0;
- *   left: 0;
- * }
- */
-/**
- * @mixin absolute
- * @description Sets position to absolute, removing from normal document flow
- * @example
- * .popup {
- *   @include absolute;
- *   top: 0;
- *   left: 0;
- * }
- */
-/**
- * @mixin sticky
- * @description Creates a sticky element that remains in view during scrolling
- * @example
- * .nav {
- *   @include sticky;
- * }
- */
-/**
- * @mixin top
- * @description Sets the top position of an element
- * @param {Number|Length} $value - Position value (in px, rem, etc.)
- * @example
- * .toast {
- *   @include absolute;
- *   @include top(1rem);
- * }
- */
-/**
-  * @mixin right
-  * @description Sets the right position of an element
-  * @param {Number|Length} $value - Position value (in px, rem, etc.)
-  * @example
-  * .badge {
-  *   @include absolute;
-  *   @include right(0);
-  * }
-  */
-/**
-  * @mixin bottom
-  * @description Sets the bottom position of an element
-  * @param {Number|Length} $value - Position value (in px, rem, etc.)
-  * @example
-  * .footer {
-  *   @include fixed;
-  *   @include bottom(0);
-  * }
-  */
-/**
-  * @mixin left
-  * @description Sets the left position of an element
-  * @param {Number|Length} $value - Position value (in px, rem, etc.)
-  * @example
-  * .sidebar {
-  *   @include fixed;
-  *   @include left(0);
-  * }
-  */
 .static {
   position: static;
 }