@medyll/cssfabric 0.1.12 → 0.2.2

package/{lib/styles/core → src/lib/styles}/box/box.responsive.css

@@ -1,15 +1,15 @@
 @media only screen and (max-width: 1300px) {
   .marg-xxl .marg-xxl-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xxl .marg-xxl-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xxl .marg-xxl-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xxl .marg-xxl-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xxl, .marg-xxl-1 {
     margin: var(--box-density-1);
@@ -49,16 +49,16 @@
   }
 
   .marg-xxl-t .marg-xxl-t-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xxl-t .marg-xxl-t-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xxl-t .marg-xxl-t-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xxl-t .marg-xxl-t-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xxl-t, .marg-xxl-t-1 {
     margin-top: var(--box-density-1);
@@ -98,16 +98,16 @@
   }
 
   .marg-xxl-b .marg-xxl-b-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xxl-b .marg-xxl-b-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xxl-b .marg-xxl-b-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xxl-b .marg-xxl-b-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xxl-b, .marg-xxl-b-1 {
     margin-bottom: var(--box-density-1);
@@ -147,16 +147,16 @@
   }
 
   .marg-xxl-l .marg-xxl-l-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xxl-l .marg-xxl-l-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xxl-l .marg-xxl-l-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xxl-l .marg-xxl-l-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xxl-l, .marg-xxl-l-1 {
     margin-left: var(--box-density-1);
@@ -196,16 +196,16 @@
   }
 
   .marg-xxl-r .marg-xxl-r-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xxl-r .marg-xxl-r-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xxl-r .marg-xxl-r-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xxl-r .marg-xxl-r-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xxl-r, .marg-xxl-r-1 {
     margin-right: var(--box-density-1);
@@ -245,16 +245,16 @@
   }
 
   .marg-xxl-all .marg-xxl-all-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xxl-all .marg-xxl-all-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xxl-all .marg-xxl-all-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xxl-all .marg-xxl-all-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xxl-all, .marg-xxl-all-1 {
     margin: var(--box-density-1);
@@ -294,16 +294,16 @@
   }
 
   .marg-xxl-u .marg-xxl-u-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xxl-u .marg-xxl-u-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xxl-u .marg-xxl-u-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xxl-u .marg-xxl-u-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xxl-u, .marg-xxl-u-1 {
     margin-bottom: var(--box-density-1);
@@ -367,16 +367,16 @@
   }
 
   .marg-xxl-ii .marg-xxl-ii-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xxl-ii .marg-xxl-ii-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xxl-ii .marg-xxl-ii-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xxl-ii .marg-xxl-ii-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xxl-ii, .marg-xxl-ii-1 {
     margin-left: var(--box-density-1);
@@ -428,16 +428,16 @@
   }
 
   .marg-xxl-tb .marg-xxl-tb-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xxl-tb .marg-xxl-tb-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xxl-tb .marg-xxl-tb-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xxl-tb .marg-xxl-tb-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xxl-tb, .marg-xxl-tb-1 {
     margin-top: var(--box-density-1);
@@ -489,16 +489,16 @@
   }
 
   .pad-xxl .pad-xxl-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xxl .pad-xxl-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xxl .pad-xxl-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xxl .pad-xxl-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xxl, .pad-xxl-1 {
     padding: var(--box-density-1);
@@ -538,16 +538,16 @@
   }
 
   .pad-xxl-t .pad-xxl-t-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xxl-t .pad-xxl-t-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xxl-t .pad-xxl-t-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xxl-t .pad-xxl-t-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xxl-t, .pad-xxl-t-1 {
     padding-top: var(--box-density-1);
@@ -587,16 +587,16 @@
   }
 
   .pad-xxl-b .pad-xxl-b-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xxl-b .pad-xxl-b-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xxl-b .pad-xxl-b-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xxl-b .pad-xxl-b-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xxl-b, .pad-xxl-b-1 {
     padding-bottom: var(--box-density-1);
@@ -636,16 +636,16 @@
   }
 
   .pad-xxl-l .pad-xxl-l-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xxl-l .pad-xxl-l-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xxl-l .pad-xxl-l-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xxl-l .pad-xxl-l-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xxl-l, .pad-xxl-l-1 {
     padding-left: var(--box-density-1);
@@ -685,16 +685,16 @@
   }
 
   .pad-xxl-r .pad-xxl-r-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xxl-r .pad-xxl-r-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xxl-r .pad-xxl-r-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xxl-r .pad-xxl-r-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xxl-r, .pad-xxl-r-1 {
     padding-right: var(--box-density-1);
@@ -734,16 +734,16 @@
   }
 
   .pad-xxl-all .pad-xxl-all-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xxl-all .pad-xxl-all-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xxl-all .pad-xxl-all-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xxl-all .pad-xxl-all-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xxl-all, .pad-xxl-all-1 {
     padding: var(--box-density-1);
@@ -783,16 +783,16 @@
   }
 
   .pad-xxl-u .pad-xxl-u-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xxl-u .pad-xxl-u-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xxl-u .pad-xxl-u-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xxl-u .pad-xxl-u-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xxl-u, .pad-xxl-u-1 {
     padding-bottom: var(--box-density-1);
@@ -856,16 +856,16 @@
   }
 
   .pad-xxl-ii .pad-xxl-ii-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xxl-ii .pad-xxl-ii-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xxl-ii .pad-xxl-ii-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xxl-ii .pad-xxl-ii-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xxl-ii, .pad-xxl-ii-1 {
     padding-left: var(--box-density-1);
@@ -917,16 +917,16 @@
   }
 
   .pad-xxl-tb .pad-xxl-tb-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xxl-tb .pad-xxl-tb-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xxl-tb .pad-xxl-tb-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xxl-tb .pad-xxl-tb-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xxl-tb, .pad-xxl-tb-1 {
     padding-top: var(--box-density-1);
@@ -978,105 +978,105 @@
   }
 
   .border-xxl, .border-xxl-1 {
-    border: 1px solid #ededed;
+    border: 1px solid var(--theme-color-border);
   }
   .border-xxl-2 {
-    border: 2px solid #ededed;
+    border: 2px solid var(--theme-color-border);
   }
   .border-xxl-3 {
-    border: 3px solid #ededed;
+    border: 3px solid var(--theme-color-border);
   }
 
   .border-xxl-t, .border-xxl-t-1 {
-    border-top: 1px solid #ededed;
+    border-top: 1px solid var(--theme-color-border);
   }
   .border-xxl-t-2 {
-    border-top: 2px solid #ededed;
+    border-top: 2px solid var(--theme-color-border);
   }
   .border-xxl-t-3 {
-    border-top: 3px solid #ededed;
+    border-top: 3px solid var(--theme-color-border);
   }
 
   .border-xxl-b, .border-xxl-b-1 {
-    border-bottom: 1px solid #ededed;
+    border-bottom: 1px solid var(--theme-color-border);
   }
   .border-xxl-b-2 {
-    border-bottom: 2px solid #ededed;
+    border-bottom: 2px solid var(--theme-color-border);
   }
   .border-xxl-b-3 {
-    border-bottom: 3px solid #ededed;
+    border-bottom: 3px solid var(--theme-color-border);
   }
 
   .border-xxl-l, .border-xxl-l-1 {
-    border-left: 1px solid #ededed;
+    border-left: 1px solid var(--theme-color-border);
   }
   .border-xxl-l-2 {
-    border-left: 2px solid #ededed;
+    border-left: 2px solid var(--theme-color-border);
   }
   .border-xxl-l-3 {
-    border-left: 3px solid #ededed;
+    border-left: 3px solid var(--theme-color-border);
   }
 
   .border-xxl-r, .border-xxl-r-1 {
-    border-right: 1px solid #ededed;
+    border-right: 1px solid var(--theme-color-border);
   }
   .border-xxl-r-2 {
-    border-right: 2px solid #ededed;
+    border-right: 2px solid var(--theme-color-border);
   }
   .border-xxl-r-3 {
-    border-right: 3px solid #ededed;
+    border-right: 3px solid var(--theme-color-border);
   }
 
   .border-xxl-all, .border-xxl-all-1 {
-    border: 1px solid #ededed;
+    border: 1px solid var(--theme-color-border);
   }
   .border-xxl-all-2 {
-    border: 2px solid #ededed;
+    border: 2px solid var(--theme-color-border);
   }
   .border-xxl-all-3 {
-    border: 3px solid #ededed;
+    border: 3px solid var(--theme-color-border);
   }
 
   .border-xxl-u, .border-xxl-u-1 {
-    border-bottom: 1px solid #ededed;
-    border-left: 1px solid #ededed;
-    border-right: 1px solid #ededed;
+    border-bottom: 1px solid var(--theme-color-border);
+    border-left: 1px solid var(--theme-color-border);
+    border-right: 1px solid var(--theme-color-border);
   }
   .border-xxl-u-2 {
-    border-bottom: 2px solid #ededed;
-    border-left: 2px solid #ededed;
-    border-right: 2px solid #ededed;
+    border-bottom: 2px solid var(--theme-color-border);
+    border-left: 2px solid var(--theme-color-border);
+    border-right: 2px solid var(--theme-color-border);
   }
   .border-xxl-u-3 {
-    border-bottom: 3px solid #ededed;
-    border-left: 3px solid #ededed;
-    border-right: 3px solid #ededed;
+    border-bottom: 3px solid var(--theme-color-border);
+    border-left: 3px solid var(--theme-color-border);
+    border-right: 3px solid var(--theme-color-border);
   }
 
   .border-xxl-ii, .border-xxl-ii-1 {
-    border-left: 1px solid #ededed;
-    border-right: 1px solid #ededed;
+    border-left: 1px solid var(--theme-color-border);
+    border-right: 1px solid var(--theme-color-border);
   }
   .border-xxl-ii-2 {
-    border-left: 2px solid #ededed;
-    border-right: 2px solid #ededed;
+    border-left: 2px solid var(--theme-color-border);
+    border-right: 2px solid var(--theme-color-border);
   }
   .border-xxl-ii-3 {
-    border-left: 3px solid #ededed;
-    border-right: 3px solid #ededed;
+    border-left: 3px solid var(--theme-color-border);
+    border-right: 3px solid var(--theme-color-border);
   }
 
   .border-xxl-tb, .border-xxl-tb-1 {
-    border-top: 1px solid #ededed;
-    border-bottom: 1px solid #ededed;
+    border-top: 1px solid var(--theme-color-border);
+    border-bottom: 1px solid var(--theme-color-border);
   }
   .border-xxl-tb-2 {
-    border-top: 2px solid #ededed;
-    border-bottom: 2px solid #ededed;
+    border-top: 2px solid var(--theme-color-border);
+    border-bottom: 2px solid var(--theme-color-border);
   }
   .border-xxl-tb-3 {
-    border-top: 3px solid #ededed;
-    border-bottom: 3px solid #ededed;
+    border-top: 3px solid var(--theme-color-border);
+    border-bottom: 3px solid var(--theme-color-border);
   }
 
   .dsp-xxl-block {
@@ -1362,19 +1362,35 @@
   .shad-xxl-5 {
     box-shadow: var(--box-shad-xxl-5);
   }
+
+  .gap-xxl-tiny {
+    gap-xxl: var(--box-density-preset-tiny);
+  }
+
+  .gap-xxl-small {
+    gap-xxl: var(--box-density-preset-small);
+  }
+
+  .gap-xxl-medium {
+    gap-xxl: var(--box-density-preset-medium);
+  }
+
+  .gap-xxl-large {
+    gap-xxl: var(--box-density-preset-large);
+  }
 }
 @media only screen and (max-width: 1200px) {
   .marg-xl .marg-xl-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xl .marg-xl-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xl .marg-xl-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xl .marg-xl-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xl, .marg-xl-1 {
     margin: var(--box-density-1);
@@ -1414,16 +1430,16 @@
   }
 
   .marg-xl-t .marg-xl-t-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xl-t .marg-xl-t-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xl-t .marg-xl-t-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xl-t .marg-xl-t-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xl-t, .marg-xl-t-1 {
     margin-top: var(--box-density-1);
@@ -1463,16 +1479,16 @@
   }
 
   .marg-xl-b .marg-xl-b-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xl-b .marg-xl-b-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xl-b .marg-xl-b-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xl-b .marg-xl-b-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xl-b, .marg-xl-b-1 {
     margin-bottom: var(--box-density-1);
@@ -1512,16 +1528,16 @@
   }
 
   .marg-xl-l .marg-xl-l-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xl-l .marg-xl-l-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xl-l .marg-xl-l-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xl-l .marg-xl-l-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xl-l, .marg-xl-l-1 {
     margin-left: var(--box-density-1);
@@ -1561,16 +1577,16 @@
   }
 
   .marg-xl-r .marg-xl-r-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xl-r .marg-xl-r-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xl-r .marg-xl-r-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xl-r .marg-xl-r-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xl-r, .marg-xl-r-1 {
     margin-right: var(--box-density-1);
@@ -1610,16 +1626,16 @@
   }
 
   .marg-xl-all .marg-xl-all-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xl-all .marg-xl-all-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xl-all .marg-xl-all-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xl-all .marg-xl-all-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xl-all, .marg-xl-all-1 {
     margin: var(--box-density-1);
@@ -1659,16 +1675,16 @@
   }
 
   .marg-xl-u .marg-xl-u-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xl-u .marg-xl-u-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xl-u .marg-xl-u-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xl-u .marg-xl-u-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xl-u, .marg-xl-u-1 {
     margin-bottom: var(--box-density-1);
@@ -1732,16 +1748,16 @@
   }
 
   .marg-xl-ii .marg-xl-ii-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xl-ii .marg-xl-ii-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xl-ii .marg-xl-ii-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xl-ii .marg-xl-ii-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xl-ii, .marg-xl-ii-1 {
     margin-left: var(--box-density-1);
@@ -1793,16 +1809,16 @@
   }
 
   .marg-xl-tb .marg-xl-tb-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-xl-tb .marg-xl-tb-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-xl-tb .marg-xl-tb-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-xl-tb .marg-xl-tb-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-xl-tb, .marg-xl-tb-1 {
     margin-top: var(--box-density-1);
@@ -1854,16 +1870,16 @@
   }
 
   .pad-xl .pad-xl-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xl .pad-xl-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xl .pad-xl-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xl .pad-xl-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xl, .pad-xl-1 {
     padding: var(--box-density-1);
@@ -1903,16 +1919,16 @@
   }
 
   .pad-xl-t .pad-xl-t-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xl-t .pad-xl-t-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xl-t .pad-xl-t-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xl-t .pad-xl-t-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xl-t, .pad-xl-t-1 {
     padding-top: var(--box-density-1);
@@ -1952,16 +1968,16 @@
   }
 
   .pad-xl-b .pad-xl-b-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xl-b .pad-xl-b-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xl-b .pad-xl-b-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xl-b .pad-xl-b-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xl-b, .pad-xl-b-1 {
     padding-bottom: var(--box-density-1);
@@ -2001,16 +2017,16 @@
   }
 
   .pad-xl-l .pad-xl-l-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xl-l .pad-xl-l-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xl-l .pad-xl-l-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xl-l .pad-xl-l-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xl-l, .pad-xl-l-1 {
     padding-left: var(--box-density-1);
@@ -2050,16 +2066,16 @@
   }
 
   .pad-xl-r .pad-xl-r-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xl-r .pad-xl-r-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xl-r .pad-xl-r-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xl-r .pad-xl-r-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xl-r, .pad-xl-r-1 {
     padding-right: var(--box-density-1);
@@ -2099,16 +2115,16 @@
   }
 
   .pad-xl-all .pad-xl-all-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xl-all .pad-xl-all-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xl-all .pad-xl-all-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xl-all .pad-xl-all-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xl-all, .pad-xl-all-1 {
     padding: var(--box-density-1);
@@ -2148,16 +2164,16 @@
   }
 
   .pad-xl-u .pad-xl-u-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xl-u .pad-xl-u-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xl-u .pad-xl-u-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xl-u .pad-xl-u-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xl-u, .pad-xl-u-1 {
     padding-bottom: var(--box-density-1);
@@ -2221,16 +2237,16 @@
   }
 
   .pad-xl-ii .pad-xl-ii-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xl-ii .pad-xl-ii-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xl-ii .pad-xl-ii-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xl-ii .pad-xl-ii-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xl-ii, .pad-xl-ii-1 {
     padding-left: var(--box-density-1);
@@ -2282,16 +2298,16 @@
   }
 
   .pad-xl-tb .pad-xl-tb-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-xl-tb .pad-xl-tb-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-xl-tb .pad-xl-tb-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-xl-tb .pad-xl-tb-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-xl-tb, .pad-xl-tb-1 {
     padding-top: var(--box-density-1);
@@ -2343,105 +2359,105 @@
   }
 
   .border-xl, .border-xl-1 {
-    border: 1px solid #ededed;
+    border: 1px solid var(--theme-color-border);
   }
   .border-xl-2 {
-    border: 2px solid #ededed;
+    border: 2px solid var(--theme-color-border);
   }
   .border-xl-3 {
-    border: 3px solid #ededed;
+    border: 3px solid var(--theme-color-border);
   }
 
   .border-xl-t, .border-xl-t-1 {
-    border-top: 1px solid #ededed;
+    border-top: 1px solid var(--theme-color-border);
   }
   .border-xl-t-2 {
-    border-top: 2px solid #ededed;
+    border-top: 2px solid var(--theme-color-border);
   }
   .border-xl-t-3 {
-    border-top: 3px solid #ededed;
+    border-top: 3px solid var(--theme-color-border);
   }
 
   .border-xl-b, .border-xl-b-1 {
-    border-bottom: 1px solid #ededed;
+    border-bottom: 1px solid var(--theme-color-border);
   }
   .border-xl-b-2 {
-    border-bottom: 2px solid #ededed;
+    border-bottom: 2px solid var(--theme-color-border);
   }
   .border-xl-b-3 {
-    border-bottom: 3px solid #ededed;
+    border-bottom: 3px solid var(--theme-color-border);
   }
 
   .border-xl-l, .border-xl-l-1 {
-    border-left: 1px solid #ededed;
+    border-left: 1px solid var(--theme-color-border);
   }
   .border-xl-l-2 {
-    border-left: 2px solid #ededed;
+    border-left: 2px solid var(--theme-color-border);
   }
   .border-xl-l-3 {
-    border-left: 3px solid #ededed;
+    border-left: 3px solid var(--theme-color-border);
   }
 
   .border-xl-r, .border-xl-r-1 {
-    border-right: 1px solid #ededed;
+    border-right: 1px solid var(--theme-color-border);
   }
   .border-xl-r-2 {
-    border-right: 2px solid #ededed;
+    border-right: 2px solid var(--theme-color-border);
   }
   .border-xl-r-3 {
-    border-right: 3px solid #ededed;
+    border-right: 3px solid var(--theme-color-border);
   }
 
   .border-xl-all, .border-xl-all-1 {
-    border: 1px solid #ededed;
+    border: 1px solid var(--theme-color-border);
   }
   .border-xl-all-2 {
-    border: 2px solid #ededed;
+    border: 2px solid var(--theme-color-border);
   }
   .border-xl-all-3 {
-    border: 3px solid #ededed;
+    border: 3px solid var(--theme-color-border);
   }
 
   .border-xl-u, .border-xl-u-1 {
-    border-bottom: 1px solid #ededed;
-    border-left: 1px solid #ededed;
-    border-right: 1px solid #ededed;
+    border-bottom: 1px solid var(--theme-color-border);
+    border-left: 1px solid var(--theme-color-border);
+    border-right: 1px solid var(--theme-color-border);
   }
   .border-xl-u-2 {
-    border-bottom: 2px solid #ededed;
-    border-left: 2px solid #ededed;
-    border-right: 2px solid #ededed;
+    border-bottom: 2px solid var(--theme-color-border);
+    border-left: 2px solid var(--theme-color-border);
+    border-right: 2px solid var(--theme-color-border);
   }
   .border-xl-u-3 {
-    border-bottom: 3px solid #ededed;
-    border-left: 3px solid #ededed;
-    border-right: 3px solid #ededed;
+    border-bottom: 3px solid var(--theme-color-border);
+    border-left: 3px solid var(--theme-color-border);
+    border-right: 3px solid var(--theme-color-border);
   }
 
   .border-xl-ii, .border-xl-ii-1 {
-    border-left: 1px solid #ededed;
-    border-right: 1px solid #ededed;
+    border-left: 1px solid var(--theme-color-border);
+    border-right: 1px solid var(--theme-color-border);
   }
   .border-xl-ii-2 {
-    border-left: 2px solid #ededed;
-    border-right: 2px solid #ededed;
+    border-left: 2px solid var(--theme-color-border);
+    border-right: 2px solid var(--theme-color-border);
   }
   .border-xl-ii-3 {
-    border-left: 3px solid #ededed;
-    border-right: 3px solid #ededed;
+    border-left: 3px solid var(--theme-color-border);
+    border-right: 3px solid var(--theme-color-border);
   }
 
   .border-xl-tb, .border-xl-tb-1 {
-    border-top: 1px solid #ededed;
-    border-bottom: 1px solid #ededed;
+    border-top: 1px solid var(--theme-color-border);
+    border-bottom: 1px solid var(--theme-color-border);
   }
   .border-xl-tb-2 {
-    border-top: 2px solid #ededed;
-    border-bottom: 2px solid #ededed;
+    border-top: 2px solid var(--theme-color-border);
+    border-bottom: 2px solid var(--theme-color-border);
   }
   .border-xl-tb-3 {
-    border-top: 3px solid #ededed;
-    border-bottom: 3px solid #ededed;
+    border-top: 3px solid var(--theme-color-border);
+    border-bottom: 3px solid var(--theme-color-border);
   }
 
   .dsp-xl-block {
@@ -2727,19 +2743,35 @@
   .shad-xl-5 {
     box-shadow: var(--box-shad-xl-5);
   }
+
+  .gap-xl-tiny {
+    gap-xl: var(--box-density-preset-tiny);
+  }
+
+  .gap-xl-small {
+    gap-xl: var(--box-density-preset-small);
+  }
+
+  .gap-xl-medium {
+    gap-xl: var(--box-density-preset-medium);
+  }
+
+  .gap-xl-large {
+    gap-xl: var(--box-density-preset-large);
+  }
 }
 @media only screen and (max-width: 960px) {
   .marg-lg .marg-lg-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-lg .marg-lg-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-lg .marg-lg-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-lg .marg-lg-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-lg, .marg-lg-1 {
     margin: var(--box-density-1);
@@ -2779,16 +2811,16 @@
   }
 
   .marg-lg-t .marg-lg-t-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-lg-t .marg-lg-t-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-lg-t .marg-lg-t-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-lg-t .marg-lg-t-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-lg-t, .marg-lg-t-1 {
     margin-top: var(--box-density-1);
@@ -2828,16 +2860,16 @@
   }
 
   .marg-lg-b .marg-lg-b-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-lg-b .marg-lg-b-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-lg-b .marg-lg-b-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-lg-b .marg-lg-b-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-lg-b, .marg-lg-b-1 {
     margin-bottom: var(--box-density-1);
@@ -2877,16 +2909,16 @@
   }
 
   .marg-lg-l .marg-lg-l-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-lg-l .marg-lg-l-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-lg-l .marg-lg-l-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-lg-l .marg-lg-l-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-lg-l, .marg-lg-l-1 {
     margin-left: var(--box-density-1);
@@ -2926,16 +2958,16 @@
   }
 
   .marg-lg-r .marg-lg-r-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-lg-r .marg-lg-r-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-lg-r .marg-lg-r-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-lg-r .marg-lg-r-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-lg-r, .marg-lg-r-1 {
     margin-right: var(--box-density-1);
@@ -2975,16 +3007,16 @@
   }
 
   .marg-lg-all .marg-lg-all-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-lg-all .marg-lg-all-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-lg-all .marg-lg-all-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-lg-all .marg-lg-all-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-lg-all, .marg-lg-all-1 {
     margin: var(--box-density-1);
@@ -3024,16 +3056,16 @@
   }
 
   .marg-lg-u .marg-lg-u-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-lg-u .marg-lg-u-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-lg-u .marg-lg-u-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-lg-u .marg-lg-u-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-lg-u, .marg-lg-u-1 {
     margin-bottom: var(--box-density-1);
@@ -3097,16 +3129,16 @@
   }
 
   .marg-lg-ii .marg-lg-ii-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-lg-ii .marg-lg-ii-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-lg-ii .marg-lg-ii-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-lg-ii .marg-lg-ii-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-lg-ii, .marg-lg-ii-1 {
     margin-left: var(--box-density-1);
@@ -3158,16 +3190,16 @@
   }
 
   .marg-lg-tb .marg-lg-tb-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-lg-tb .marg-lg-tb-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-lg-tb .marg-lg-tb-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-lg-tb .marg-lg-tb-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-lg-tb, .marg-lg-tb-1 {
     margin-top: var(--box-density-1);
@@ -3219,16 +3251,16 @@
   }
 
   .pad-lg .pad-lg-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-lg .pad-lg-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-lg .pad-lg-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-lg .pad-lg-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-lg, .pad-lg-1 {
     padding: var(--box-density-1);
@@ -3268,16 +3300,16 @@
   }
 
   .pad-lg-t .pad-lg-t-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-lg-t .pad-lg-t-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-lg-t .pad-lg-t-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-lg-t .pad-lg-t-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-lg-t, .pad-lg-t-1 {
     padding-top: var(--box-density-1);
@@ -3317,16 +3349,16 @@
   }
 
   .pad-lg-b .pad-lg-b-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-lg-b .pad-lg-b-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-lg-b .pad-lg-b-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-lg-b .pad-lg-b-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-lg-b, .pad-lg-b-1 {
     padding-bottom: var(--box-density-1);
@@ -3366,16 +3398,16 @@
   }
 
   .pad-lg-l .pad-lg-l-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-lg-l .pad-lg-l-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-lg-l .pad-lg-l-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-lg-l .pad-lg-l-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-lg-l, .pad-lg-l-1 {
     padding-left: var(--box-density-1);
@@ -3415,16 +3447,16 @@
   }
 
   .pad-lg-r .pad-lg-r-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-lg-r .pad-lg-r-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-lg-r .pad-lg-r-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-lg-r .pad-lg-r-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-lg-r, .pad-lg-r-1 {
     padding-right: var(--box-density-1);
@@ -3464,16 +3496,16 @@
   }
 
   .pad-lg-all .pad-lg-all-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-lg-all .pad-lg-all-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-lg-all .pad-lg-all-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-lg-all .pad-lg-all-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-lg-all, .pad-lg-all-1 {
     padding: var(--box-density-1);
@@ -3513,16 +3545,16 @@
   }
 
   .pad-lg-u .pad-lg-u-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-lg-u .pad-lg-u-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-lg-u .pad-lg-u-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-lg-u .pad-lg-u-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-lg-u, .pad-lg-u-1 {
     padding-bottom: var(--box-density-1);
@@ -3586,16 +3618,16 @@
   }
 
   .pad-lg-ii .pad-lg-ii-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-lg-ii .pad-lg-ii-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-lg-ii .pad-lg-ii-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-lg-ii .pad-lg-ii-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-lg-ii, .pad-lg-ii-1 {
     padding-left: var(--box-density-1);
@@ -3647,16 +3679,16 @@
   }
 
   .pad-lg-tb .pad-lg-tb-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-lg-tb .pad-lg-tb-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-lg-tb .pad-lg-tb-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-lg-tb .pad-lg-tb-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-lg-tb, .pad-lg-tb-1 {
     padding-top: var(--box-density-1);
@@ -3708,105 +3740,105 @@
   }
 
   .border-lg, .border-lg-1 {
-    border: 1px solid #ededed;
+    border: 1px solid var(--theme-color-border);
   }
   .border-lg-2 {
-    border: 2px solid #ededed;
+    border: 2px solid var(--theme-color-border);
   }
   .border-lg-3 {
-    border: 3px solid #ededed;
+    border: 3px solid var(--theme-color-border);
   }
 
   .border-lg-t, .border-lg-t-1 {
-    border-top: 1px solid #ededed;
+    border-top: 1px solid var(--theme-color-border);
   }
   .border-lg-t-2 {
-    border-top: 2px solid #ededed;
+    border-top: 2px solid var(--theme-color-border);
   }
   .border-lg-t-3 {
-    border-top: 3px solid #ededed;
+    border-top: 3px solid var(--theme-color-border);
   }
 
   .border-lg-b, .border-lg-b-1 {
-    border-bottom: 1px solid #ededed;
+    border-bottom: 1px solid var(--theme-color-border);
   }
   .border-lg-b-2 {
-    border-bottom: 2px solid #ededed;
+    border-bottom: 2px solid var(--theme-color-border);
   }
   .border-lg-b-3 {
-    border-bottom: 3px solid #ededed;
+    border-bottom: 3px solid var(--theme-color-border);
   }
 
   .border-lg-l, .border-lg-l-1 {
-    border-left: 1px solid #ededed;
+    border-left: 1px solid var(--theme-color-border);
   }
   .border-lg-l-2 {
-    border-left: 2px solid #ededed;
+    border-left: 2px solid var(--theme-color-border);
   }
   .border-lg-l-3 {
-    border-left: 3px solid #ededed;
+    border-left: 3px solid var(--theme-color-border);
   }
 
   .border-lg-r, .border-lg-r-1 {
-    border-right: 1px solid #ededed;
+    border-right: 1px solid var(--theme-color-border);
   }
   .border-lg-r-2 {
-    border-right: 2px solid #ededed;
+    border-right: 2px solid var(--theme-color-border);
   }
   .border-lg-r-3 {
-    border-right: 3px solid #ededed;
+    border-right: 3px solid var(--theme-color-border);
   }
 
   .border-lg-all, .border-lg-all-1 {
-    border: 1px solid #ededed;
+    border: 1px solid var(--theme-color-border);
   }
   .border-lg-all-2 {
-    border: 2px solid #ededed;
+    border: 2px solid var(--theme-color-border);
   }
   .border-lg-all-3 {
-    border: 3px solid #ededed;
+    border: 3px solid var(--theme-color-border);
   }
 
   .border-lg-u, .border-lg-u-1 {
-    border-bottom: 1px solid #ededed;
-    border-left: 1px solid #ededed;
-    border-right: 1px solid #ededed;
+    border-bottom: 1px solid var(--theme-color-border);
+    border-left: 1px solid var(--theme-color-border);
+    border-right: 1px solid var(--theme-color-border);
   }
   .border-lg-u-2 {
-    border-bottom: 2px solid #ededed;
-    border-left: 2px solid #ededed;
-    border-right: 2px solid #ededed;
+    border-bottom: 2px solid var(--theme-color-border);
+    border-left: 2px solid var(--theme-color-border);
+    border-right: 2px solid var(--theme-color-border);
   }
   .border-lg-u-3 {
-    border-bottom: 3px solid #ededed;
-    border-left: 3px solid #ededed;
-    border-right: 3px solid #ededed;
+    border-bottom: 3px solid var(--theme-color-border);
+    border-left: 3px solid var(--theme-color-border);
+    border-right: 3px solid var(--theme-color-border);
   }
 
   .border-lg-ii, .border-lg-ii-1 {
-    border-left: 1px solid #ededed;
-    border-right: 1px solid #ededed;
+    border-left: 1px solid var(--theme-color-border);
+    border-right: 1px solid var(--theme-color-border);
   }
   .border-lg-ii-2 {
-    border-left: 2px solid #ededed;
-    border-right: 2px solid #ededed;
+    border-left: 2px solid var(--theme-color-border);
+    border-right: 2px solid var(--theme-color-border);
   }
   .border-lg-ii-3 {
-    border-left: 3px solid #ededed;
-    border-right: 3px solid #ededed;
+    border-left: 3px solid var(--theme-color-border);
+    border-right: 3px solid var(--theme-color-border);
   }
 
   .border-lg-tb, .border-lg-tb-1 {
-    border-top: 1px solid #ededed;
-    border-bottom: 1px solid #ededed;
+    border-top: 1px solid var(--theme-color-border);
+    border-bottom: 1px solid var(--theme-color-border);
   }
   .border-lg-tb-2 {
-    border-top: 2px solid #ededed;
-    border-bottom: 2px solid #ededed;
+    border-top: 2px solid var(--theme-color-border);
+    border-bottom: 2px solid var(--theme-color-border);
   }
   .border-lg-tb-3 {
-    border-top: 3px solid #ededed;
-    border-bottom: 3px solid #ededed;
+    border-top: 3px solid var(--theme-color-border);
+    border-bottom: 3px solid var(--theme-color-border);
   }
 
   .dsp-lg-block {
@@ -4092,19 +4124,35 @@
   .shad-lg-5 {
     box-shadow: var(--box-shad-lg-5);
   }
+
+  .gap-lg-tiny {
+    gap-lg: var(--box-density-preset-tiny);
+  }
+
+  .gap-lg-small {
+    gap-lg: var(--box-density-preset-small);
+  }
+
+  .gap-lg-medium {
+    gap-lg: var(--box-density-preset-medium);
+  }
+
+  .gap-lg-large {
+    gap-lg: var(--box-density-preset-large);
+  }
 }
 @media only screen and (max-width: 760px) {
   .marg-md .marg-md-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-md .marg-md-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-md .marg-md-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-md .marg-md-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-md, .marg-md-1 {
     margin: var(--box-density-1);
@@ -4144,16 +4192,16 @@
   }
 
   .marg-md-t .marg-md-t-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-md-t .marg-md-t-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-md-t .marg-md-t-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-md-t .marg-md-t-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-md-t, .marg-md-t-1 {
     margin-top: var(--box-density-1);
@@ -4193,16 +4241,16 @@
   }
 
   .marg-md-b .marg-md-b-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-md-b .marg-md-b-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-md-b .marg-md-b-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-md-b .marg-md-b-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-md-b, .marg-md-b-1 {
     margin-bottom: var(--box-density-1);
@@ -4242,16 +4290,16 @@
   }
 
   .marg-md-l .marg-md-l-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-md-l .marg-md-l-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-md-l .marg-md-l-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-md-l .marg-md-l-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-md-l, .marg-md-l-1 {
     margin-left: var(--box-density-1);
@@ -4291,16 +4339,16 @@
   }
 
   .marg-md-r .marg-md-r-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-md-r .marg-md-r-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-md-r .marg-md-r-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-md-r .marg-md-r-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-md-r, .marg-md-r-1 {
     margin-right: var(--box-density-1);
@@ -4340,16 +4388,16 @@
   }
 
   .marg-md-all .marg-md-all-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-md-all .marg-md-all-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-md-all .marg-md-all-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-md-all .marg-md-all-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-md-all, .marg-md-all-1 {
     margin: var(--box-density-1);
@@ -4389,16 +4437,16 @@
   }
 
   .marg-md-u .marg-md-u-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-md-u .marg-md-u-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-md-u .marg-md-u-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-md-u .marg-md-u-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-md-u, .marg-md-u-1 {
     margin-bottom: var(--box-density-1);
@@ -4462,16 +4510,16 @@
   }
 
   .marg-md-ii .marg-md-ii-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-md-ii .marg-md-ii-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-md-ii .marg-md-ii-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-md-ii .marg-md-ii-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-md-ii, .marg-md-ii-1 {
     margin-left: var(--box-density-1);
@@ -4523,16 +4571,16 @@
   }
 
   .marg-md-tb .marg-md-tb-tiny {
-    margin: --box-density-preset-tiny;
+    margin: var(--box-density-preset-tiny);
   }
   .marg-md-tb .marg-md-tb-small {
-    margin: --box-density-preset-small;
+    margin: var(--box-density-preset-small);
   }
   .marg-md-tb .marg-md-tb-medium {
-    margin: --box-density-preset-medium;
+    margin: var(--box-density-preset-medium);
   }
   .marg-md-tb .marg-md-tb-large {
-    margin: --box-density-preset-large;
+    margin: var(--box-density-preset-large);
   }
   .marg-md-tb, .marg-md-tb-1 {
     margin-top: var(--box-density-1);
@@ -4584,16 +4632,16 @@
   }
 
   .pad-md .pad-md-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-md .pad-md-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-md .pad-md-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-md .pad-md-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-md, .pad-md-1 {
     padding: var(--box-density-1);
@@ -4633,16 +4681,16 @@
   }
 
   .pad-md-t .pad-md-t-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-md-t .pad-md-t-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-md-t .pad-md-t-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-md-t .pad-md-t-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-md-t, .pad-md-t-1 {
     padding-top: var(--box-density-1);
@@ -4682,16 +4730,16 @@
   }
 
   .pad-md-b .pad-md-b-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-md-b .pad-md-b-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-md-b .pad-md-b-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-md-b .pad-md-b-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-md-b, .pad-md-b-1 {
     padding-bottom: var(--box-density-1);
@@ -4731,16 +4779,16 @@
   }
 
   .pad-md-l .pad-md-l-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-md-l .pad-md-l-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-md-l .pad-md-l-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-md-l .pad-md-l-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-md-l, .pad-md-l-1 {
     padding-left: var(--box-density-1);
@@ -4780,16 +4828,16 @@
   }
 
   .pad-md-r .pad-md-r-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-md-r .pad-md-r-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-md-r .pad-md-r-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-md-r .pad-md-r-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-md-r, .pad-md-r-1 {
     padding-right: var(--box-density-1);
@@ -4829,16 +4877,16 @@
   }
 
   .pad-md-all .pad-md-all-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-md-all .pad-md-all-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-md-all .pad-md-all-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-md-all .pad-md-all-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-md-all, .pad-md-all-1 {
     padding: var(--box-density-1);
@@ -4878,16 +4926,16 @@
   }
 
   .pad-md-u .pad-md-u-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-md-u .pad-md-u-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-md-u .pad-md-u-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-md-u .pad-md-u-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-md-u, .pad-md-u-1 {
     padding-bottom: var(--box-density-1);
@@ -4951,16 +4999,16 @@
   }
 
   .pad-md-ii .pad-md-ii-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-md-ii .pad-md-ii-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-md-ii .pad-md-ii-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-md-ii .pad-md-ii-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-md-ii, .pad-md-ii-1 {
     padding-left: var(--box-density-1);
@@ -5012,16 +5060,16 @@
   }
 
   .pad-md-tb .pad-md-tb-tiny {
-    padding: --box-density-preset-tiny;
+    padding: var(--box-density-preset-tiny);
   }
   .pad-md-tb .pad-md-tb-small {
-    padding: --box-density-preset-small;
+    padding: var(--box-density-preset-small);
   }
   .pad-md-tb .pad-md-tb-medium {
-    padding: --box-density-preset-medium;
+    padding: var(--box-density-preset-medium);
   }
   .pad-md-tb .pad-md-tb-large {
-    padding: --box-density-preset-large;
+    padding: var(--box-density-preset-large);
   }
   .pad-md-tb, .pad-md-tb-1 {
     padding-top: var(--box-density-1);
@@ -5073,105 +5121,105 @@
   }
 
   .border-md, .border-md-1 {
-    border: 1px solid #ededed;
+    border: 1px solid var(--theme-color-border);
   }
   .border-md-2 {
-    border: 2px solid #ededed;
+    border: 2px solid var(--theme-color-border);
   }
   .border-md-3 {
-    border: 3px solid #ededed;
+    border: 3px solid var(--theme-color-border);
   }
 
   .border-md-t, .border-md-t-1 {
-    border-top: 1px solid #ededed;
+    border-top: 1px solid var(--theme-color-border);
   }
   .border-md-t-2 {
-    border-top: 2px solid #ededed;
+    border-top: 2px solid var(--theme-color-border);
   }
   .border-md-t-3 {
-    border-top: 3px solid #ededed;
+    border-top: 3px solid var(--theme-color-border);
   }
 
   .border-md-b, .border-md-b-1 {
-    border-bottom: 1px solid #ededed;
+    border-bottom: 1px solid var(--theme-color-border);
   }
   .border-md-b-2 {
-    border-bottom: 2px solid #ededed;
+    border-bottom: 2px solid var(--theme-color-border);
   }
   .border-md-b-3 {
-    border-bottom: 3px solid #ededed;
+    border-bottom: 3px solid var(--theme-color-border);
   }
 
   .border-md-l, .border-md-l-1 {
-    border-left: 1px solid #ededed;
+    border-left: 1px solid var(--theme-color-border);
   }
   .border-md-l-2 {
-    border-left: 2px solid #ededed;
+    border-left: 2px solid var(--theme-color-border);
   }
   .border-md-l-3 {
-    border-left: 3px solid #ededed;
+    border-left: 3px solid var(--theme-color-border);
   }
 
   .border-md-r, .border-md-r-1 {
-    border-right: 1px solid #ededed;
+    border-right: 1px solid var(--theme-color-border);
   }
   .border-md-r-2 {
-    border-right: 2px solid #ededed;
+    border-right: 2px solid var(--theme-color-border);
   }
   .border-md-r-3 {
-    border-right: 3px solid #ededed;
+    border-right: 3px solid var(--theme-color-border);
   }
 
   .border-md-all, .border-md-all-1 {
-    border: 1px solid #ededed;
+    border: 1px solid var(--theme-color-border);
   }
   .border-md-all-2 {
-    border: 2px solid #ededed;
+    border: 2px solid var(--theme-color-border);
   }
   .border-md-all-3 {
-    border: 3px solid #ededed;
+    border: 3px solid var(--theme-color-border);
   }
 
   .border-md-u, .border-md-u-1 {
-    border-bottom: 1px solid #ededed;
-    border-left: 1px solid #ededed;
-    border-right: 1px solid #ededed;
+    border-bottom: 1px solid var(--theme-color-border);
+    border-left: 1px solid var(--theme-color-border);
+    border-right: 1px solid var(--theme-color-border);
   }
   .border-md-u-2 {
-    border-bottom: 2px solid #ededed;
-    border-left: 2px solid #ededed;
-    border-right: 2px solid #ededed;
+    border-bottom: 2px solid var(--theme-color-border);
+    border-left: 2px solid var(--theme-color-border);
+    border-right: 2px solid var(--theme-color-border);
   }
   .border-md-u-3 {
-    border-bottom: 3px solid #ededed;
-    border-left: 3px solid #ededed;
-    border-right: 3px solid #ededed;
+    border-bottom: 3px solid var(--theme-color-border);
+    border-left: 3px solid var(--theme-color-border);
+    border-right: 3px solid var(--theme-color-border);
   }
 
   .border-md-ii, .border-md-ii-1 {
-    border-left: 1px solid #ededed;
-    border-right: 1px solid #ededed;
+    border-left: 1px solid var(--theme-color-border);
+    border-right: 1px solid var(--theme-color-border);
   }
   .border-md-ii-2 {
-    border-left: 2px solid #ededed;
-    border-right: 2px solid #ededed;
+    border-left: 2px solid var(--theme-color-border);
+    border-right: 2px solid var(--theme-color-border);
   }
   .border-md-ii-3 {
-    border-left: 3px solid #ededed;
-    border-right: 3px solid #ededed;
+    border-left: 3px solid var(--theme-color-border);
+    border-right: 3px solid var(--theme-color-border);
   }
 
   .border-md-tb, .border-md-tb-1 {
-    border-top: 1px solid #ededed;
-    border-bottom: 1px solid #ededed;
+    border-top: 1px solid var(--theme-color-border);
+    border-bottom: 1px solid var(--theme-color-border);
   }
   .border-md-tb-2 {
-    border-top: 2px solid #ededed;
-    border-bottom: 2px solid #ededed;
+    border-top: 2px solid var(--theme-color-border);
+    border-bottom: 2px solid var(--theme-color-border);
   }
   .border-md-tb-3 {
-    border-top: 3px solid #ededed;
-    border-bottom: 3px solid #ededed;
+    border-top: 3px solid var(--theme-color-border);
+    border-bottom: 3px solid var(--theme-color-border);
   }
 
   .dsp-md-block {
@@ -5457,4 +5505,20 @@
   .shad-md-5 {
     box-shadow: var(--box-shad-md-5);
   }
+
+  .gap-md-tiny {
+    gap-md: var(--box-density-preset-tiny);
+  }
+
+  .gap-md-small {
+    gap-md: var(--box-density-preset-small);
+  }
+
+  .gap-md-medium {
+    gap-md: var(--box-density-preset-medium);
+  }
+
+  .gap-md-large {
+    gap-md: var(--box-density-preset-large);
+  }
 }