@wizco/fenixds-core 1.0.7 → 1.0.9

package/styles/core.css

@@ -1,6 +1,6 @@
 :root {
   --wco-font-family: 'Figtree', sans-serif;
-  --wco-color-primary-text: #fff;
+  --wco-color-primary-text: #fcfcfc;
   --wco-color-primary-50: #fff0e4;
   --wco-color-primary-100: #ffb578;
   --wco-color-primary-300: #ff8826;
@@ -8,7 +8,7 @@
   --wco-color-primary-600: #bf5600;
   --wco-color-primary-700: #8f4000;
   --wco-color-primary-900: #301600;
-  --wco-color-secondary-text: #fff;
+  --wco-color-secondary-text: #fcfcfc;
   --wco-color-secondary-50: #ecdff0;
   --wco-color-secondary-100: #c69ed3;
   --wco-color-secondary-300: #aa6ebc;
@@ -623,7 +623,7 @@ a.btn {
   button.btn.btn-primary,
   a.btn.btn-primary {
     --bgBtn: var(--wco-color-primary-600);
-    --textBtn: var(--wco-color-primary-50);
+    --textBtn: var(--wco-color-primary-text);
     --btn-focus: var(--wco-color-primary-900); }
     button.btn.btn-primary:hover:not(.btn-outline),
     a.btn.btn-primary:hover:not(.btn-outline) {
@@ -799,6 +799,13 @@ a.btn {
   100% {
     transform: scale(1); } }
 
+.wco-card, .wco-content {
+  display: block;
+  padding: var(--wco-spacing-xs);
+  border-radius: var(--wco-radius-md);
+  background-color: var(--wco-color-panel);
+  width: 100%; }
+
 .display-1,
 .display-2,
 .display-3,
@@ -808,17 +815,38 @@ a.btn {
   font-family: var(--wco-font-family);
   line-height: var(--wco-font-lineheight-500);
   font-weight: var(--wco-font-weight-500); }
-  .display-1 strong,
+  .display-1 strong, .display-1.bold,
   .display-2 strong,
+  .display-2.bold,
   .display-3 strong,
+  .display-3.bold,
   .display-4 strong,
+  .display-4.bold,
   .display-5 strong,
-  .display-6 strong {
+  .display-5.bold,
+  .display-6 strong,
+  .display-6.bold {
     font-weight: var(--wco-font-weight-bold); }
+  .display-1:not([class*="text-neutral-"]), .display-1:not([class*="text-primary-"]), .display-1:not([class*="text-secondary-"]),
+  .display-2:not([class*="text-neutral-"]),
+  .display-2:not([class*="text-primary-"]),
+  .display-2:not([class*="text-secondary-"]),
+  .display-3:not([class*="text-neutral-"]),
+  .display-3:not([class*="text-primary-"]),
+  .display-3:not([class*="text-secondary-"]),
+  .display-4:not([class*="text-neutral-"]),
+  .display-4:not([class*="text-primary-"]),
+  .display-4:not([class*="text-secondary-"]),
+  .display-5:not([class*="text-neutral-"]),
+  .display-5:not([class*="text-primary-"]),
+  .display-5:not([class*="text-secondary-"]),
+  .display-6:not([class*="text-neutral-"]),
+  .display-6:not([class*="text-primary-"]),
+  .display-6:not([class*="text-secondary-"]) {
+    color: var(--wco-color-neutral-900); }
 
 .display-1 {
   font-size: var(--wco-font-size-huge);
-  color: var(--wco-color-neutral-900);
   font-weight: var(--wco-font-weight-bold); }
   @media (max-width: 768px) {
     .display-1 {
@@ -1307,75 +1335,204 @@ a.btn {
   justify-content: space-evenly; }
 
 .gap-none {
-  gap: var(--wco-none); }
+  gap: var(--wco-spacing-none); }
 
-.gap-spacing-quark {
+.gap-quark {
   gap: var(--wco-spacing-quark); }
 
-.gap-spacing-nano {
+.gap-nano {
   gap: var(--wco-spacing-nano); }
 
-.gap-spacing-xxxs {
+.gap-xxxs {
   gap: var(--wco-spacing-xxxs); }
 
-.gap-spacing-xxs {
+.gap-xxs {
   gap: var(--wco-spacing-xxs); }
 
-.gap-spacing-xs {
+.gap-xs {
   gap: var(--wco-spacing-xs); }
 
-.gap-spacing-sm {
+.gap-sm {
   gap: var(--wco-spacing-sm); }
 
+.gap-md {
+  gap: var(--wco-spacing-md); }
+
+.gap-lg {
+  gap: var(--wco-spacing-lg); }
+
+.gap-xl {
+  gap: var(--wco-spacing-xl); }
+
+.gap-xxl {
+  gap: var(--wco-spacing-xxl); }
+
+.gap-xxxl {
+  gap: var(--wco-spacing-xxxl); }
+
+.gap-huge {
+  gap: var(--wco-spacing-huge); }
+
 .gap-x-none {
-  -moz-column-gap: var(--wco-none);
-  column-gap: var(--wco-none); }
+  -moz-column-gap: var(--wco-spacing-none);
+  column-gap: var(--wco-spacing-none); }
 
-.gap-x-spacing-quark {
+.gap-x-quark {
   -moz-column-gap: var(--wco-spacing-quark);
   column-gap: var(--wco-spacing-quark); }
 
-.gap-x-spacing-nano {
+.gap-x-nano {
   -moz-column-gap: var(--wco-spacing-nano);
   column-gap: var(--wco-spacing-nano); }
 
-.gap-x-spacing-xxxs {
+.gap-x-xxxs {
   -moz-column-gap: var(--wco-spacing-xxxs);
   column-gap: var(--wco-spacing-xxxs); }
 
-.gap-x-spacing-xxs {
+.gap-x-xxs {
   -moz-column-gap: var(--wco-spacing-xxs);
   column-gap: var(--wco-spacing-xxs); }
 
-.gap-x-spacing-xs {
+.gap-x-xs {
   -moz-column-gap: var(--wco-spacing-xs);
   column-gap: var(--wco-spacing-xs); }
 
-.gap-x-spacing-sm {
+.gap-x-sm {
   -moz-column-gap: var(--wco-spacing-sm);
   column-gap: var(--wco-spacing-sm); }
 
+.gap-x-md {
+  -moz-column-gap: var(--wco-spacing-md);
+  column-gap: var(--wco-spacing-md); }
+
+.gap-x-lg {
+  -moz-column-gap: var(--wco-spacing-lg);
+  column-gap: var(--wco-spacing-lg); }
+
+.gap-x-xl {
+  -moz-column-gap: var(--wco-spacing-xl);
+  column-gap: var(--wco-spacing-xl); }
+
+.gap-x-xxl {
+  -moz-column-gap: var(--wco-spacing-xxl);
+  column-gap: var(--wco-spacing-xxl); }
+
+.gap-x-xxxl {
+  -moz-column-gap: var(--wco-spacing-xxxl);
+  column-gap: var(--wco-spacing-xxxl); }
+
+.gap-x-huge {
+  -moz-column-gap: var(--wco-spacing-huge);
+  column-gap: var(--wco-spacing-huge); }
+
 .gap-y-none {
-  row-gap: var(--wco-none); }
+  row-gap: var(--wco-spacing-none); }
 
-.gap-y-spacing-quark {
+.gap-y-quark {
   row-gap: var(--wco-spacing-quark); }
 
-.gap-y-spacing-nano {
+.gap-y-nano {
   row-gap: var(--wco-spacing-nano); }
 
-.gap-y-spacing-xxxs {
+.gap-y-xxxs {
   row-gap: var(--wco-spacing-xxxs); }
 
-.gap-y-spacing-xxs {
+.gap-y-xxs {
   row-gap: var(--wco-spacing-xxs); }
 
-.gap-y-spacing-xs {
+.gap-y-xs {
   row-gap: var(--wco-spacing-xs); }
 
-.gap-y-spacing-sm {
+.gap-y-sm {
   row-gap: var(--wco-spacing-sm); }
 
+.gap-y-md {
+  row-gap: var(--wco-spacing-md); }
+
+.gap-y-lg {
+  row-gap: var(--wco-spacing-lg); }
+
+.gap-y-xl {
+  row-gap: var(--wco-spacing-xl); }
+
+.gap-y-xxl {
+  row-gap: var(--wco-spacing-xxl); }
+
+.gap-y-xxxl {
+  row-gap: var(--wco-spacing-xxxl); }
+
+.gap-y-huge {
+  row-gap: var(--wco-spacing-huge); }
+
+.bg-primary-50 {
+  background-color: var(--wco-color-primary-50); }
+
+.bg-primary-100 {
+  background-color: var(--wco-color-primary-100); }
+
+.bg-primary-300 {
+  background-color: var(--wco-color-primary-300); }
+
+.bg-primary-500 {
+  background-color: var(--wco-color-primary-500); }
+
+.bg-primary-600 {
+  background-color: var(--wco-color-primary-600); }
+
+.bg-primary-700 {
+  background-color: var(--wco-color-primary-700); }
+
+.bg-primary-900 {
+  background-color: var(--wco-color-primary-900); }
+
+.bg-primary-text {
+  background-color: var(--wco-color-primary-text); }
+
+.bg-secondary-50 {
+  background-color: var(--wco-color-secondary-50); }
+
+.bg-secondary-100 {
+  background-color: var(--wco-color-secondary-100); }
+
+.bg-secondary-300 {
+  background-color: var(--wco-color-secondary-300); }
+
+.bg-secondary-500 {
+  background-color: var(--wco-color-secondary-500); }
+
+.bg-secondary-600 {
+  background-color: var(--wco-color-secondary-600); }
+
+.bg-secondary-700 {
+  background-color: var(--wco-color-secondary-700); }
+
+.bg-secondary-900 {
+  background-color: var(--wco-color-secondary-900); }
+
+.bg-secondary-text {
+  background-color: var(--wco-color-secondary-text); }
+
+.bg-neutral-50 {
+  background-color: var(--wco-color-neutral-50); }
+
+.bg-neutral-100 {
+  background-color: var(--wco-color-neutral-100); }
+
+.bg-neutral-300 {
+  background-color: var(--wco-color-neutral-300); }
+
+.bg-neutral-500 {
+  background-color: var(--wco-color-neutral-500); }
+
+.bg-neutral-600 {
+  background-color: var(--wco-color-neutral-600); }
+
+.bg-neutral-700 {
+  background-color: var(--wco-color-neutral-700); }
+
+.bg-neutral-900 {
+  background-color: var(--wco-color-neutral-900); }
+
 .p-none {
   padding: var(--wco-spacing-none); }
 
@@ -1687,6 +1844,75 @@ a.btn {
 .text-justify {
   text-align: justify; }
 
+.text-primary-50 {
+  color: var(--wco-color-primary-50); }
+
+.text-primary-100 {
+  color: var(--wco-color-primary-100); }
+
+.text-primary-300 {
+  color: var(--wco-color-primary-300); }
+
+.text-primary-500 {
+  color: var(--wco-color-primary-500); }
+
+.text-primary-600 {
+  color: var(--wco-color-primary-600); }
+
+.text-primary-700 {
+  color: var(--wco-color-primary-700); }
+
+.text-primary-900 {
+  color: var(--wco-color-primary-900); }
+
+.text-primary-text {
+  color: var(--wco-color-primary-text); }
+
+.text-secondary-50 {
+  color: var(--wco-color-secondary-50); }
+
+.text-secondary-100 {
+  color: var(--wco-color-secondary-100); }
+
+.text-secondary-300 {
+  color: var(--wco-color-secondary-300); }
+
+.text-secondary-500 {
+  color: var(--wco-color-secondary-500); }
+
+.text-secondary-600 {
+  color: var(--wco-color-secondary-600); }
+
+.text-secondary-700 {
+  color: var(--wco-color-secondary-700); }
+
+.text-secondary-900 {
+  color: var(--wco-color-secondary-900); }
+
+.text-secondary-text {
+  color: var(--wco-color-secondary-text); }
+
+.text-neutral-50 {
+  color: var(--wco-color-neutral-50); }
+
+.text-neutral-100 {
+  color: var(--wco-color-neutral-100); }
+
+.text-neutral-300 {
+  color: var(--wco-color-neutral-300); }
+
+.text-neutral-500 {
+  color: var(--wco-color-neutral-500); }
+
+.text-neutral-600 {
+  color: var(--wco-color-neutral-600); }
+
+.text-neutral-700 {
+  color: var(--wco-color-neutral-700); }
+
+.text-neutral-900 {
+  color: var(--wco-color-neutral-900); }
+
 @media (min-width: 640px) {
   .md\:m-none {
     margin: var(--wco-spacing-none); }
@@ -1983,54 +2209,96 @@ a.btn {
   .md\:justify-evenly {
     justify-content: space-evenly; }
   .md\:gap-none {
-    gap: var(--wco-none); }
-  .md\:gap-spacing-quark {
+    gap: var(--wco-spacing-none); }
+  .md\:gap-quark {
     gap: var(--wco-spacing-quark); }
-  .md\:gap-spacing-nano {
+  .md\:gap-nano {
     gap: var(--wco-spacing-nano); }
-  .md\:gap-spacing-xxxs {
+  .md\:gap-xxxs {
     gap: var(--wco-spacing-xxxs); }
-  .md\:gap-spacing-xxs {
+  .md\:gap-xxs {
     gap: var(--wco-spacing-xxs); }
-  .md\:gap-spacing-xs {
+  .md\:gap-xs {
     gap: var(--wco-spacing-xs); }
-  .md\:gap-spacing-sm {
+  .md\:gap-sm {
     gap: var(--wco-spacing-sm); }
+  .md\:gap-md {
+    gap: var(--wco-spacing-md); }
+  .md\:gap-lg {
+    gap: var(--wco-spacing-lg); }
+  .md\:gap-xl {
+    gap: var(--wco-spacing-xl); }
+  .md\:gap-xxl {
+    gap: var(--wco-spacing-xxl); }
+  .md\:gap-xxxl {
+    gap: var(--wco-spacing-xxxl); }
+  .md\:gap-huge {
+    gap: var(--wco-spacing-huge); }
   .md\:gap-x-none {
-    -moz-column-gap: var(--wco-none);
-    column-gap: var(--wco-none); }
-  .md\:gap-x-spacing-quark {
+    -moz-column-gap: var(--wco-spacing-none);
+    column-gap: var(--wco-spacing-none); }
+  .md\:gap-x-quark {
     -moz-column-gap: var(--wco-spacing-quark);
     column-gap: var(--wco-spacing-quark); }
-  .md\:gap-x-spacing-nano {
+  .md\:gap-x-nano {
     -moz-column-gap: var(--wco-spacing-nano);
     column-gap: var(--wco-spacing-nano); }
-  .md\:gap-x-spacing-xxxs {
+  .md\:gap-x-xxxs {
     -moz-column-gap: var(--wco-spacing-xxxs);
     column-gap: var(--wco-spacing-xxxs); }
-  .md\:gap-x-spacing-xxs {
+  .md\:gap-x-xxs {
     -moz-column-gap: var(--wco-spacing-xxs);
     column-gap: var(--wco-spacing-xxs); }
-  .md\:gap-x-spacing-xs {
+  .md\:gap-x-xs {
     -moz-column-gap: var(--wco-spacing-xs);
     column-gap: var(--wco-spacing-xs); }
-  .md\:gap-x-spacing-sm {
+  .md\:gap-x-sm {
     -moz-column-gap: var(--wco-spacing-sm);
     column-gap: var(--wco-spacing-sm); }
+  .md\:gap-x-md {
+    -moz-column-gap: var(--wco-spacing-md);
+    column-gap: var(--wco-spacing-md); }
+  .md\:gap-x-lg {
+    -moz-column-gap: var(--wco-spacing-lg);
+    column-gap: var(--wco-spacing-lg); }
+  .md\:gap-x-xl {
+    -moz-column-gap: var(--wco-spacing-xl);
+    column-gap: var(--wco-spacing-xl); }
+  .md\:gap-x-xxl {
+    -moz-column-gap: var(--wco-spacing-xxl);
+    column-gap: var(--wco-spacing-xxl); }
+  .md\:gap-x-xxxl {
+    -moz-column-gap: var(--wco-spacing-xxxl);
+    column-gap: var(--wco-spacing-xxxl); }
+  .md\:gap-x-huge {
+    -moz-column-gap: var(--wco-spacing-huge);
+    column-gap: var(--wco-spacing-huge); }
   .md\:gap-y-none {
-    row-gap: var(--wco-none); }
-  .md\:gap-y-spacing-quark {
+    row-gap: var(--wco-spacing-none); }
+  .md\:gap-y-quark {
     row-gap: var(--wco-spacing-quark); }
-  .md\:gap-y-spacing-nano {
+  .md\:gap-y-nano {
     row-gap: var(--wco-spacing-nano); }
-  .md\:gap-y-spacing-xxxs {
+  .md\:gap-y-xxxs {
     row-gap: var(--wco-spacing-xxxs); }
-  .md\:gap-y-spacing-xxs {
+  .md\:gap-y-xxs {
     row-gap: var(--wco-spacing-xxs); }
-  .md\:gap-y-spacing-xs {
+  .md\:gap-y-xs {
     row-gap: var(--wco-spacing-xs); }
-  .md\:gap-y-spacing-sm {
+  .md\:gap-y-sm {
     row-gap: var(--wco-spacing-sm); }
+  .md\:gap-y-md {
+    row-gap: var(--wco-spacing-md); }
+  .md\:gap-y-lg {
+    row-gap: var(--wco-spacing-lg); }
+  .md\:gap-y-xl {
+    row-gap: var(--wco-spacing-xl); }
+  .md\:gap-y-xxl {
+    row-gap: var(--wco-spacing-xxl); }
+  .md\:gap-y-xxxl {
+    row-gap: var(--wco-spacing-xxxl); }
+  .md\:gap-y-huge {
+    row-gap: var(--wco-spacing-huge); }
   .md\:p-none {
     padding: var(--wco-spacing-none); }
   .md\:p-quark {
@@ -2544,54 +2812,96 @@ a.btn {
   .lg\:justify-evenly {
     justify-content: space-evenly; }
   .lg\:gap-none {
-    gap: var(--wco-none); }
-  .lg\:gap-spacing-quark {
+    gap: var(--wco-spacing-none); }
+  .lg\:gap-quark {
     gap: var(--wco-spacing-quark); }
-  .lg\:gap-spacing-nano {
+  .lg\:gap-nano {
     gap: var(--wco-spacing-nano); }
-  .lg\:gap-spacing-xxxs {
+  .lg\:gap-xxxs {
     gap: var(--wco-spacing-xxxs); }
-  .lg\:gap-spacing-xxs {
+  .lg\:gap-xxs {
     gap: var(--wco-spacing-xxs); }
-  .lg\:gap-spacing-xs {
+  .lg\:gap-xs {
     gap: var(--wco-spacing-xs); }
-  .lg\:gap-spacing-sm {
+  .lg\:gap-sm {
     gap: var(--wco-spacing-sm); }
+  .lg\:gap-md {
+    gap: var(--wco-spacing-md); }
+  .lg\:gap-lg {
+    gap: var(--wco-spacing-lg); }
+  .lg\:gap-xl {
+    gap: var(--wco-spacing-xl); }
+  .lg\:gap-xxl {
+    gap: var(--wco-spacing-xxl); }
+  .lg\:gap-xxxl {
+    gap: var(--wco-spacing-xxxl); }
+  .lg\:gap-huge {
+    gap: var(--wco-spacing-huge); }
   .lg\:gap-x-none {
-    -moz-column-gap: var(--wco-none);
-    column-gap: var(--wco-none); }
-  .lg\:gap-x-spacing-quark {
+    -moz-column-gap: var(--wco-spacing-none);
+    column-gap: var(--wco-spacing-none); }
+  .lg\:gap-x-quark {
     -moz-column-gap: var(--wco-spacing-quark);
     column-gap: var(--wco-spacing-quark); }
-  .lg\:gap-x-spacing-nano {
+  .lg\:gap-x-nano {
     -moz-column-gap: var(--wco-spacing-nano);
     column-gap: var(--wco-spacing-nano); }
-  .lg\:gap-x-spacing-xxxs {
+  .lg\:gap-x-xxxs {
     -moz-column-gap: var(--wco-spacing-xxxs);
     column-gap: var(--wco-spacing-xxxs); }
-  .lg\:gap-x-spacing-xxs {
+  .lg\:gap-x-xxs {
     -moz-column-gap: var(--wco-spacing-xxs);
     column-gap: var(--wco-spacing-xxs); }
-  .lg\:gap-x-spacing-xs {
+  .lg\:gap-x-xs {
     -moz-column-gap: var(--wco-spacing-xs);
     column-gap: var(--wco-spacing-xs); }
-  .lg\:gap-x-spacing-sm {
+  .lg\:gap-x-sm {
     -moz-column-gap: var(--wco-spacing-sm);
     column-gap: var(--wco-spacing-sm); }
+  .lg\:gap-x-md {
+    -moz-column-gap: var(--wco-spacing-md);
+    column-gap: var(--wco-spacing-md); }
+  .lg\:gap-x-lg {
+    -moz-column-gap: var(--wco-spacing-lg);
+    column-gap: var(--wco-spacing-lg); }
+  .lg\:gap-x-xl {
+    -moz-column-gap: var(--wco-spacing-xl);
+    column-gap: var(--wco-spacing-xl); }
+  .lg\:gap-x-xxl {
+    -moz-column-gap: var(--wco-spacing-xxl);
+    column-gap: var(--wco-spacing-xxl); }
+  .lg\:gap-x-xxxl {
+    -moz-column-gap: var(--wco-spacing-xxxl);
+    column-gap: var(--wco-spacing-xxxl); }
+  .lg\:gap-x-huge {
+    -moz-column-gap: var(--wco-spacing-huge);
+    column-gap: var(--wco-spacing-huge); }
   .lg\:gap-y-none {
-    row-gap: var(--wco-none); }
-  .lg\:gap-y-spacing-quark {
+    row-gap: var(--wco-spacing-none); }
+  .lg\:gap-y-quark {
     row-gap: var(--wco-spacing-quark); }
-  .lg\:gap-y-spacing-nano {
+  .lg\:gap-y-nano {
     row-gap: var(--wco-spacing-nano); }
-  .lg\:gap-y-spacing-xxxs {
+  .lg\:gap-y-xxxs {
     row-gap: var(--wco-spacing-xxxs); }
-  .lg\:gap-y-spacing-xxs {
+  .lg\:gap-y-xxs {
     row-gap: var(--wco-spacing-xxs); }
-  .lg\:gap-y-spacing-xs {
+  .lg\:gap-y-xs {
     row-gap: var(--wco-spacing-xs); }
-  .lg\:gap-y-spacing-sm {
+  .lg\:gap-y-sm {
     row-gap: var(--wco-spacing-sm); }
+  .lg\:gap-y-md {
+    row-gap: var(--wco-spacing-md); }
+  .lg\:gap-y-lg {
+    row-gap: var(--wco-spacing-lg); }
+  .lg\:gap-y-xl {
+    row-gap: var(--wco-spacing-xl); }
+  .lg\:gap-y-xxl {
+    row-gap: var(--wco-spacing-xxl); }
+  .lg\:gap-y-xxxl {
+    row-gap: var(--wco-spacing-xxxl); }
+  .lg\:gap-y-huge {
+    row-gap: var(--wco-spacing-huge); }
   .lg\:p-none {
     padding: var(--wco-spacing-none); }
   .lg\:p-quark {
@@ -3105,54 +3415,96 @@ a.btn {
   .xl\:justify-evenly {
     justify-content: space-evenly; }
   .xl\:gap-none {
-    gap: var(--wco-none); }
-  .xl\:gap-spacing-quark {
+    gap: var(--wco-spacing-none); }
+  .xl\:gap-quark {
     gap: var(--wco-spacing-quark); }
-  .xl\:gap-spacing-nano {
+  .xl\:gap-nano {
     gap: var(--wco-spacing-nano); }
-  .xl\:gap-spacing-xxxs {
+  .xl\:gap-xxxs {
     gap: var(--wco-spacing-xxxs); }
-  .xl\:gap-spacing-xxs {
+  .xl\:gap-xxs {
     gap: var(--wco-spacing-xxs); }
-  .xl\:gap-spacing-xs {
+  .xl\:gap-xs {
     gap: var(--wco-spacing-xs); }
-  .xl\:gap-spacing-sm {
+  .xl\:gap-sm {
     gap: var(--wco-spacing-sm); }
+  .xl\:gap-md {
+    gap: var(--wco-spacing-md); }
+  .xl\:gap-lg {
+    gap: var(--wco-spacing-lg); }
+  .xl\:gap-xl {
+    gap: var(--wco-spacing-xl); }
+  .xl\:gap-xxl {
+    gap: var(--wco-spacing-xxl); }
+  .xl\:gap-xxxl {
+    gap: var(--wco-spacing-xxxl); }
+  .xl\:gap-huge {
+    gap: var(--wco-spacing-huge); }
   .xl\:gap-x-none {
-    -moz-column-gap: var(--wco-none);
-    column-gap: var(--wco-none); }
-  .xl\:gap-x-spacing-quark {
+    -moz-column-gap: var(--wco-spacing-none);
+    column-gap: var(--wco-spacing-none); }
+  .xl\:gap-x-quark {
     -moz-column-gap: var(--wco-spacing-quark);
     column-gap: var(--wco-spacing-quark); }
-  .xl\:gap-x-spacing-nano {
+  .xl\:gap-x-nano {
     -moz-column-gap: var(--wco-spacing-nano);
     column-gap: var(--wco-spacing-nano); }
-  .xl\:gap-x-spacing-xxxs {
+  .xl\:gap-x-xxxs {
     -moz-column-gap: var(--wco-spacing-xxxs);
     column-gap: var(--wco-spacing-xxxs); }
-  .xl\:gap-x-spacing-xxs {
+  .xl\:gap-x-xxs {
     -moz-column-gap: var(--wco-spacing-xxs);
     column-gap: var(--wco-spacing-xxs); }
-  .xl\:gap-x-spacing-xs {
+  .xl\:gap-x-xs {
     -moz-column-gap: var(--wco-spacing-xs);
     column-gap: var(--wco-spacing-xs); }
-  .xl\:gap-x-spacing-sm {
+  .xl\:gap-x-sm {
     -moz-column-gap: var(--wco-spacing-sm);
     column-gap: var(--wco-spacing-sm); }
+  .xl\:gap-x-md {
+    -moz-column-gap: var(--wco-spacing-md);
+    column-gap: var(--wco-spacing-md); }
+  .xl\:gap-x-lg {
+    -moz-column-gap: var(--wco-spacing-lg);
+    column-gap: var(--wco-spacing-lg); }
+  .xl\:gap-x-xl {
+    -moz-column-gap: var(--wco-spacing-xl);
+    column-gap: var(--wco-spacing-xl); }
+  .xl\:gap-x-xxl {
+    -moz-column-gap: var(--wco-spacing-xxl);
+    column-gap: var(--wco-spacing-xxl); }
+  .xl\:gap-x-xxxl {
+    -moz-column-gap: var(--wco-spacing-xxxl);
+    column-gap: var(--wco-spacing-xxxl); }
+  .xl\:gap-x-huge {
+    -moz-column-gap: var(--wco-spacing-huge);
+    column-gap: var(--wco-spacing-huge); }
   .xl\:gap-y-none {
-    row-gap: var(--wco-none); }
-  .xl\:gap-y-spacing-quark {
+    row-gap: var(--wco-spacing-none); }
+  .xl\:gap-y-quark {
     row-gap: var(--wco-spacing-quark); }
-  .xl\:gap-y-spacing-nano {
+  .xl\:gap-y-nano {
     row-gap: var(--wco-spacing-nano); }
-  .xl\:gap-y-spacing-xxxs {
+  .xl\:gap-y-xxxs {
     row-gap: var(--wco-spacing-xxxs); }
-  .xl\:gap-y-spacing-xxs {
+  .xl\:gap-y-xxs {
     row-gap: var(--wco-spacing-xxs); }
-  .xl\:gap-y-spacing-xs {
+  .xl\:gap-y-xs {
     row-gap: var(--wco-spacing-xs); }
-  .xl\:gap-y-spacing-sm {
+  .xl\:gap-y-sm {
     row-gap: var(--wco-spacing-sm); }
+  .xl\:gap-y-md {
+    row-gap: var(--wco-spacing-md); }
+  .xl\:gap-y-lg {
+    row-gap: var(--wco-spacing-lg); }
+  .xl\:gap-y-xl {
+    row-gap: var(--wco-spacing-xl); }
+  .xl\:gap-y-xxl {
+    row-gap: var(--wco-spacing-xxl); }
+  .xl\:gap-y-xxxl {
+    row-gap: var(--wco-spacing-xxxl); }
+  .xl\:gap-y-huge {
+    row-gap: var(--wco-spacing-huge); }
   .xl\:p-none {
     padding: var(--wco-spacing-none); }
   .xl\:p-quark {