@dialpad/dialtone 9.72.3 → 9.73.0-beta.2

package/dist/css/dialtone-default-theme.css

@@ -7456,6 +7456,17 @@ legend .d-label--md {
   padding-top: unset !important;
   padding-bottom: unset !important;
 }
+.d-cg-unset {
+  -webkit-column-gap: unset !important;
+     -moz-column-gap: unset !important;
+          column-gap: unset !important;
+}
+.d-rg-unset {
+  row-gap: unset !important;
+}
+.d-g-unset {
+  gap: unset !important;
+}
 .d-ff-custom {
   font-family: var(--dt-font-family-body) !important;
 }
@@ -12288,7 +12299,7 @@ body {
 }
 
 .d-fl-col1 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 1);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12296,7 +12307,7 @@ body {
 }
 
 .d-fl-col2 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 2);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12304,7 +12315,7 @@ body {
 }
 
 .d-fl-col3 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 3);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12312,7 +12323,7 @@ body {
 }
 
 .d-fl-col4 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 4);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12320,7 +12331,7 @@ body {
 }
 
 .d-fl-col5 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 5);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12328,7 +12339,7 @@ body {
 }
 
 .d-fl-col6 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 6);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12336,7 +12347,7 @@ body {
 }
 
 .d-fl-col7 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 7);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12344,7 +12355,7 @@ body {
 }
 
 .d-fl-col8 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 8);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12352,7 +12363,7 @@ body {
 }
 
 .d-fl-col9 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 9);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12360,7 +12371,7 @@ body {
 }
 
 .d-fl-col10 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 10);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12368,7 +12379,7 @@ body {
 }
 
 .d-fl-col11 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 11);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12376,7 +12387,7 @@ body {
 }
 
 .d-fl-col12 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 12);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12384,7 +12395,7 @@ body {
 }
 
 .d-fl-col1 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 1);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12392,7 +12403,7 @@ body {
 }
 
 .d-fl-col2 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 2);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12400,7 +12411,7 @@ body {
 }
 
 .d-fl-col3 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 3);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12408,7 +12419,7 @@ body {
 }
 
 .d-fl-col4 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 4);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12416,7 +12427,7 @@ body {
 }
 
 .d-fl-col5 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 5);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12424,7 +12435,7 @@ body {
 }
 
 .d-fl-col6 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 6);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12432,7 +12443,7 @@ body {
 }
 
 .d-fl-col7 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 7);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12440,7 +12451,7 @@ body {
 }
 
 .d-fl-col8 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 8);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12448,7 +12459,7 @@ body {
 }
 
 .d-fl-col9 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 9);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12456,7 +12467,7 @@ body {
 }
 
 .d-fl-col10 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 10);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12464,7 +12475,7 @@ body {
 }
 
 .d-fl-col11 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 11);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12472,7 +12483,7 @@ body {
 }
 
 .d-fl-col12 > * {
-  --fl-gap: 0;
+  --fl-gap: var(--dt-space-0);
   --fl-basis: calc(100% / 12);
   display: inline-flex;
   margin: var(--fl-gap);
@@ -12480,99 +12491,99 @@ body {
 }
 
 .d-fl-col1 > *:nth-child(-n + 1) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col2 > *:nth-child(-n + 2) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col3 > *:nth-child(-n + 3) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col4 > *:nth-child(-n + 4) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col5 > *:nth-child(-n + 5) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col6 > *:nth-child(-n + 6) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col7 > *:nth-child(-n + 7) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col8 > *:nth-child(-n + 8) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col9 > *:nth-child(-n + 9) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col10 > *:nth-child(-n + 10) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col11 > *:nth-child(-n + 11) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col12 > *:nth-child(-n + 12) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col1 > *:nth-child(-n + 1) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col2 > *:nth-child(-n + 2) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col3 > *:nth-child(-n + 3) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col4 > *:nth-child(-n + 4) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col5 > *:nth-child(-n + 5) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col6 > *:nth-child(-n + 6) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col7 > *:nth-child(-n + 7) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col8 > *:nth-child(-n + 8) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col9 > *:nth-child(-n + 9) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col10 > *:nth-child(-n + 10) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col11 > *:nth-child(-n + 11) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col12 > *:nth-child(-n + 12) {
-  margin-top: 0;
+  margin-top: var(--dt-space-0);
 }
 
 .d-fl-col1.d-fd-column > * {
@@ -13055,6 +13066,582 @@ body {
   border-bottom-left-radius: var(--dt-size-radius-600) !important;
 }
 
+.d-g0 {
+  gap: var(--dt-space-0) !important;
+}
+
+.d-g1 {
+  gap: var(--dt-space-100) !important;
+}
+
+.d-g2 {
+  gap: var(--dt-space-200) !important;
+}
+
+.d-g4 {
+  gap: var(--dt-space-300) !important;
+}
+
+.d-g6 {
+  gap: var(--dt-space-350) !important;
+}
+
+.d-g8 {
+  gap: var(--dt-space-400) !important;
+}
+
+.d-g12 {
+  gap: var(--dt-space-450) !important;
+}
+
+.d-g16 {
+  gap: var(--dt-space-500) !important;
+}
+
+.d-g24 {
+  gap: var(--dt-space-550) !important;
+}
+
+.d-g32 {
+  gap: var(--dt-space-600) !important;
+}
+
+.d-g48 {
+  gap: var(--dt-space-650) !important;
+}
+
+.d-g64 {
+  gap: var(--dt-space-700) !important;
+}
+
+.d-g0 {
+  gap: var(--dt-space-0) !important;
+}
+
+.d-g1 {
+  gap: var(--dt-space-100) !important;
+}
+
+.d-g2 {
+  gap: var(--dt-space-200) !important;
+}
+
+.d-g4 {
+  gap: var(--dt-space-300) !important;
+}
+
+.d-g6 {
+  gap: var(--dt-space-350) !important;
+}
+
+.d-g8 {
+  gap: var(--dt-space-400) !important;
+}
+
+.d-g12 {
+  gap: var(--dt-space-450) !important;
+}
+
+.d-g16 {
+  gap: var(--dt-space-500) !important;
+}
+
+.d-g24 {
+  gap: var(--dt-space-550) !important;
+}
+
+.d-g32 {
+  gap: var(--dt-space-600) !important;
+}
+
+.d-g48 {
+  gap: var(--dt-space-650) !important;
+}
+
+.d-g64 {
+  gap: var(--dt-space-700) !important;
+}
+
+.d-rg0 {
+  row-gap: var(--dt-space-0) !important;
+}
+
+.d-rg1 {
+  row-gap: var(--dt-space-100) !important;
+}
+
+.d-rg2 {
+  row-gap: var(--dt-space-200) !important;
+}
+
+.d-rg4 {
+  row-gap: var(--dt-space-300) !important;
+}
+
+.d-rg6 {
+  row-gap: var(--dt-space-350) !important;
+}
+
+.d-rg8 {
+  row-gap: var(--dt-space-400) !important;
+}
+
+.d-rg12 {
+  row-gap: var(--dt-space-450) !important;
+}
+
+.d-rg16 {
+  row-gap: var(--dt-space-500) !important;
+}
+
+.d-rg24 {
+  row-gap: var(--dt-space-550) !important;
+}
+
+.d-rg32 {
+  row-gap: var(--dt-space-600) !important;
+}
+
+.d-rg48 {
+  row-gap: var(--dt-space-650) !important;
+}
+
+.d-rg64 {
+  row-gap: var(--dt-space-700) !important;
+}
+
+.d-rg0 {
+  row-gap: var(--dt-space-0) !important;
+}
+
+.d-rg1 {
+  row-gap: var(--dt-space-100) !important;
+}
+
+.d-rg2 {
+  row-gap: var(--dt-space-200) !important;
+}
+
+.d-rg4 {
+  row-gap: var(--dt-space-300) !important;
+}
+
+.d-rg6 {
+  row-gap: var(--dt-space-350) !important;
+}
+
+.d-rg8 {
+  row-gap: var(--dt-space-400) !important;
+}
+
+.d-rg12 {
+  row-gap: var(--dt-space-450) !important;
+}
+
+.d-rg16 {
+  row-gap: var(--dt-space-500) !important;
+}
+
+.d-rg24 {
+  row-gap: var(--dt-space-550) !important;
+}
+
+.d-rg32 {
+  row-gap: var(--dt-space-600) !important;
+}
+
+.d-rg48 {
+  row-gap: var(--dt-space-650) !important;
+}
+
+.d-rg64 {
+  row-gap: var(--dt-space-700) !important;
+}
+
+.d-cg0 {
+  -webkit-column-gap: var(--dt-space-0) !important;
+     -moz-column-gap: var(--dt-space-0) !important;
+          column-gap: var(--dt-space-0) !important;
+}
+
+.d-cg1 {
+  -webkit-column-gap: var(--dt-space-100) !important;
+     -moz-column-gap: var(--dt-space-100) !important;
+          column-gap: var(--dt-space-100) !important;
+}
+
+.d-cg2 {
+  -webkit-column-gap: var(--dt-space-200) !important;
+     -moz-column-gap: var(--dt-space-200) !important;
+          column-gap: var(--dt-space-200) !important;
+}
+
+.d-cg4 {
+  -webkit-column-gap: var(--dt-space-300) !important;
+     -moz-column-gap: var(--dt-space-300) !important;
+          column-gap: var(--dt-space-300) !important;
+}
+
+.d-cg6 {
+  -webkit-column-gap: var(--dt-space-350) !important;
+     -moz-column-gap: var(--dt-space-350) !important;
+          column-gap: var(--dt-space-350) !important;
+}
+
+.d-cg8 {
+  -webkit-column-gap: var(--dt-space-400) !important;
+     -moz-column-gap: var(--dt-space-400) !important;
+          column-gap: var(--dt-space-400) !important;
+}
+
+.d-cg12 {
+  -webkit-column-gap: var(--dt-space-450) !important;
+     -moz-column-gap: var(--dt-space-450) !important;
+          column-gap: var(--dt-space-450) !important;
+}
+
+.d-cg16 {
+  -webkit-column-gap: var(--dt-space-500) !important;
+     -moz-column-gap: var(--dt-space-500) !important;
+          column-gap: var(--dt-space-500) !important;
+}
+
+.d-cg24 {
+  -webkit-column-gap: var(--dt-space-550) !important;
+     -moz-column-gap: var(--dt-space-550) !important;
+          column-gap: var(--dt-space-550) !important;
+}
+
+.d-cg32 {
+  -webkit-column-gap: var(--dt-space-600) !important;
+     -moz-column-gap: var(--dt-space-600) !important;
+          column-gap: var(--dt-space-600) !important;
+}
+
+.d-cg48 {
+  -webkit-column-gap: var(--dt-space-650) !important;
+     -moz-column-gap: var(--dt-space-650) !important;
+          column-gap: var(--dt-space-650) !important;
+}
+
+.d-cg64 {
+  -webkit-column-gap: var(--dt-space-700) !important;
+     -moz-column-gap: var(--dt-space-700) !important;
+          column-gap: var(--dt-space-700) !important;
+}
+
+.d-cg0 {
+  -webkit-column-gap: var(--dt-space-0) !important;
+     -moz-column-gap: var(--dt-space-0) !important;
+          column-gap: var(--dt-space-0) !important;
+}
+
+.d-cg1 {
+  -webkit-column-gap: var(--dt-space-100) !important;
+     -moz-column-gap: var(--dt-space-100) !important;
+          column-gap: var(--dt-space-100) !important;
+}
+
+.d-cg2 {
+  -webkit-column-gap: var(--dt-space-200) !important;
+     -moz-column-gap: var(--dt-space-200) !important;
+          column-gap: var(--dt-space-200) !important;
+}
+
+.d-cg4 {
+  -webkit-column-gap: var(--dt-space-300) !important;
+     -moz-column-gap: var(--dt-space-300) !important;
+          column-gap: var(--dt-space-300) !important;
+}
+
+.d-cg6 {
+  -webkit-column-gap: var(--dt-space-350) !important;
+     -moz-column-gap: var(--dt-space-350) !important;
+          column-gap: var(--dt-space-350) !important;
+}
+
+.d-cg8 {
+  -webkit-column-gap: var(--dt-space-400) !important;
+     -moz-column-gap: var(--dt-space-400) !important;
+          column-gap: var(--dt-space-400) !important;
+}
+
+.d-cg12 {
+  -webkit-column-gap: var(--dt-space-450) !important;
+     -moz-column-gap: var(--dt-space-450) !important;
+          column-gap: var(--dt-space-450) !important;
+}
+
+.d-cg16 {
+  -webkit-column-gap: var(--dt-space-500) !important;
+     -moz-column-gap: var(--dt-space-500) !important;
+          column-gap: var(--dt-space-500) !important;
+}
+
+.d-cg24 {
+  -webkit-column-gap: var(--dt-space-550) !important;
+     -moz-column-gap: var(--dt-space-550) !important;
+          column-gap: var(--dt-space-550) !important;
+}
+
+.d-cg32 {
+  -webkit-column-gap: var(--dt-space-600) !important;
+     -moz-column-gap: var(--dt-space-600) !important;
+          column-gap: var(--dt-space-600) !important;
+}
+
+.d-cg48 {
+  -webkit-column-gap: var(--dt-space-650) !important;
+     -moz-column-gap: var(--dt-space-650) !important;
+          column-gap: var(--dt-space-650) !important;
+}
+
+.d-cg64 {
+  -webkit-column-gap: var(--dt-space-700) !important;
+     -moz-column-gap: var(--dt-space-700) !important;
+          column-gap: var(--dt-space-700) !important;
+}
+
+.d-g0 > * {
+  --fl-gap: var(--dt-space-0);
+  margin: unset;
+}
+
+.d-g1 > * {
+  --fl-gap: var(--dt-space-100);
+  margin: unset;
+}
+
+.d-g2 > * {
+  --fl-gap: var(--dt-space-200);
+  margin: unset;
+}
+
+.d-g4 > * {
+  --fl-gap: var(--dt-space-300);
+  margin: unset;
+}
+
+.d-g6 > * {
+  --fl-gap: var(--dt-space-350);
+  margin: unset;
+}
+
+.d-g8 > * {
+  --fl-gap: var(--dt-space-400);
+  margin: unset;
+}
+
+.d-g12 > * {
+  --fl-gap: var(--dt-space-450);
+  margin: unset;
+}
+
+.d-g16 > * {
+  --fl-gap: var(--dt-space-500);
+  margin: unset;
+}
+
+.d-g24 > * {
+  --fl-gap: var(--dt-space-550);
+  margin: unset;
+}
+
+.d-g32 > * {
+  --fl-gap: var(--dt-space-600);
+  margin: unset;
+}
+
+.d-g48 > * {
+  --fl-gap: var(--dt-space-650);
+  margin: unset;
+}
+
+.d-g64 > * {
+  --fl-gap: var(--dt-space-700);
+  margin: unset;
+}
+
+.d-g0 > * {
+  --fl-gap: var(--dt-space-0);
+  margin: unset;
+}
+
+.d-g1 > * {
+  --fl-gap: var(--dt-space-100);
+  margin: unset;
+}
+
+.d-g2 > * {
+  --fl-gap: var(--dt-space-200);
+  margin: unset;
+}
+
+.d-g4 > * {
+  --fl-gap: var(--dt-space-300);
+  margin: unset;
+}
+
+.d-g6 > * {
+  --fl-gap: var(--dt-space-350);
+  margin: unset;
+}
+
+.d-g8 > * {
+  --fl-gap: var(--dt-space-400);
+  margin: unset;
+}
+
+.d-g12 > * {
+  --fl-gap: var(--dt-space-450);
+  margin: unset;
+}
+
+.d-g16 > * {
+  --fl-gap: var(--dt-space-500);
+  margin: unset;
+}
+
+.d-g24 > * {
+  --fl-gap: var(--dt-space-550);
+  margin: unset;
+}
+
+.d-g32 > * {
+  --fl-gap: var(--dt-space-600);
+  margin: unset;
+}
+
+.d-g48 > * {
+  --fl-gap: var(--dt-space-650);
+  margin: unset;
+}
+
+.d-g64 > * {
+  --fl-gap: var(--dt-space-700);
+  margin: unset;
+}
+
+.d-cg0 > * {
+  --fl-gap: var(--dt-space-0);
+  margin: unset;
+}
+
+.d-cg1 > * {
+  --fl-gap: var(--dt-space-100);
+  margin: unset;
+}
+
+.d-cg2 > * {
+  --fl-gap: var(--dt-space-200);
+  margin: unset;
+}
+
+.d-cg4 > * {
+  --fl-gap: var(--dt-space-300);
+  margin: unset;
+}
+
+.d-cg6 > * {
+  --fl-gap: var(--dt-space-350);
+  margin: unset;
+}
+
+.d-cg8 > * {
+  --fl-gap: var(--dt-space-400);
+  margin: unset;
+}
+
+.d-cg12 > * {
+  --fl-gap: var(--dt-space-450);
+  margin: unset;
+}
+
+.d-cg16 > * {
+  --fl-gap: var(--dt-space-500);
+  margin: unset;
+}
+
+.d-cg24 > * {
+  --fl-gap: var(--dt-space-550);
+  margin: unset;
+}
+
+.d-cg32 > * {
+  --fl-gap: var(--dt-space-600);
+  margin: unset;
+}
+
+.d-cg48 > * {
+  --fl-gap: var(--dt-space-650);
+  margin: unset;
+}
+
+.d-cg64 > * {
+  --fl-gap: var(--dt-space-700);
+  margin: unset;
+}
+
+.d-cg0 > * {
+  --fl-gap: var(--dt-space-0);
+  margin: unset;
+}
+
+.d-cg1 > * {
+  --fl-gap: var(--dt-space-100);
+  margin: unset;
+}
+
+.d-cg2 > * {
+  --fl-gap: var(--dt-space-200);
+  margin: unset;
+}
+
+.d-cg4 > * {
+  --fl-gap: var(--dt-space-300);
+  margin: unset;
+}
+
+.d-cg6 > * {
+  --fl-gap: var(--dt-space-350);
+  margin: unset;
+}
+
+.d-cg8 > * {
+  --fl-gap: var(--dt-space-400);
+  margin: unset;
+}
+
+.d-cg12 > * {
+  --fl-gap: var(--dt-space-450);
+  margin: unset;
+}
+
+.d-cg16 > * {
+  --fl-gap: var(--dt-space-500);
+  margin: unset;
+}
+
+.d-cg24 > * {
+  --fl-gap: var(--dt-space-550);
+  margin: unset;
+}
+
+.d-cg32 > * {
+  --fl-gap: var(--dt-space-600);
+  margin: unset;
+}
+
+.d-cg48 > * {
+  --fl-gap: var(--dt-space-650);
+  margin: unset;
+}
+
+.d-cg64 > * {
+  --fl-gap: var(--dt-space-700);
+  margin: unset;
+}
+
 .d-g-cols1 {
   grid-template-columns: [full-start] repeat(1, [col-start] var(--col-width, minmax(0,1fr)) [col-end]) [full-end] !important;
 }