npm - @lobergdesign/dot-grid - Versions diffs - 1.0.0 → 1.0.2 - Mend

@lobergdesign/dot-grid 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/grid.css CHANGED Viewed

@@ -1,18 +1,3 @@
-/*!
- * dot-grid v1.0.0
- * A modern, flexible 12-column CSS Grid system
- *
- * Features:
- * - Container queries for responsive layouts
- * - Fluid/automatic layout utilities
- * - Subgrid support
- * - CSS custom properties for easy customization
- * - Cascade layers for better specificity control
- *
- * (c) 2024 Jean Loberg
- * Released under the MIT License
- * https://github.com/lobergdesign/dot-grid
- */
 :root {
   --grid-columns: 12;
   --grid-gap: clamp(1rem, 2vw, 2rem);
@@ -21,39 +6,18 @@
   --grid-bp-lg: 1024px;
   --grid-bp-xl: 1280px;
   --grid-bp-xxl: 1536px;
-  --grid-wrap-max-width: 180rem;
-  --grid-wrap-width: 90vw;
-  --grid-gap-none: 0;
-  --grid-gap-xs: 0.5rem;
-  --grid-gap-sm: 1rem;
-  --grid-gap-md: clamp(1rem, 2vw, 2rem);
-  --grid-gap-lg: 3rem;
-  --grid-gap-xl: 4rem;
+  --grid-w-max-width: 180rem;
+  --grid-w-width: 90vw;
 }
-/*!
- * dot-grid v1.0.0
- * A modern, flexible 12-column CSS Grid system
- *
- * Features:
- * - Container queries for responsive layouts
- * - Fluid/automatic layout utilities
- * - Subgrid support
- * - CSS custom properties for easy customization
- * - Cascade layers for better specificity control
- *
- * (c) 2024 Jean Loberg
- * Released under the MIT License
- * https://github.com/lobergdesign/dot-grid
- */
 @layer grid.base, grid.utilities, grid.responsive, grid.fluid;
 @layer grid.base {
-  .wrap {
-    width: var(--grid-wrap-width, 90vw);
-    max-width: var(--grid-wrap-max-width, 180rem);
+  .grid-w {
+    width: var(--grid-w-width, 90vw);
+    max-width: var(--grid-w-max-width, 180rem);
     margin-inline: auto;
   }
-  .row {
+  .grid-r {
     display: grid;
     grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
     gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
@@ -61,145 +25,105 @@
     container-type: inline-size;
     container-name: grid;
   }
-  .row > * {
+  .grid-r > * {
     grid-column-end: span var(--grid-columns, 12);
   }
-  .col {
+  .grid-c {
     grid-column-end: span var(--grid-columns, 12);
   }
-  .col-1 {
+  .grid-c-1 {
     grid-column-end: span 1;
   }
-  .col-2 {
+  .grid-c-2 {
     grid-column-end: span 2;
   }
-  .col-3 {
+  .grid-c-3 {
     grid-column-end: span 3;
   }
-  .col-4 {
+  .grid-c-4 {
     grid-column-end: span 4;
   }
-  .col-5 {
+  .grid-c-5 {
     grid-column-end: span 5;
   }
-  .col-6 {
+  .grid-c-6 {
     grid-column-end: span 6;
   }
-  .col-7 {
+  .grid-c-7 {
     grid-column-end: span 7;
   }
-  .col-8 {
+  .grid-c-8 {
     grid-column-end: span 8;
   }
-  .col-9 {
+  .grid-c-9 {
     grid-column-end: span 9;
   }
-  .col-10 {
+  .grid-c-10 {
     grid-column-end: span 10;
   }
-  .col-11 {
+  .grid-c-11 {
     grid-column-end: span 11;
   }
-  .col-12 {
+  .grid-c-12 {
     grid-column-end: span 12;
   }
-  .col-start-1 {
+  .grid-c-start-1 {
     grid-column-start: 1;
   }
-  .col-start-2 {
+  .grid-c-start-2 {
     grid-column-start: 2;
   }
-  .col-start-3 {
+  .grid-c-start-3 {
     grid-column-start: 3;
   }
-  .col-start-4 {
+  .grid-c-start-4 {
     grid-column-start: 4;
   }
-  .col-start-5 {
+  .grid-c-start-5 {
     grid-column-start: 5;
   }
-  .col-start-6 {
+  .grid-c-start-6 {
     grid-column-start: 6;
   }
-  .col-start-7 {
+  .grid-c-start-7 {
     grid-column-start: 7;
   }
-  .col-start-8 {
+  .grid-c-start-8 {
     grid-column-start: 8;
   }
-  .col-start-9 {
+  .grid-c-start-9 {
     grid-column-start: 9;
   }
-  .col-start-10 {
+  .grid-c-start-10 {
     grid-column-start: 10;
   }
-  .col-start-11 {
+  .grid-c-start-11 {
     grid-column-start: 11;
   }
-  .col-start-12 {
+  .grid-c-start-12 {
     grid-column-start: 12;
   }
-  .row-subgrid {
+  .grid-r-subgrid {
     display: grid;
     grid-template-columns: subgrid;
     grid-column: 1/-1;
   }
-  .row-subgrid:not([style*=gap]) {
+  .grid-r-subgrid:not([style*=gap]) {
     gap: inherit;
   }
-  .col-subgrid {
+  .grid-c-subgrid {
     display: grid;
     grid-template-rows: subgrid;
     grid-row: 1/-1;
   }
-  .row .row {
+  .grid-r .grid-r {
     grid-column: 1/-1;
     padding-block-end: 0;
   }
 }
-/*!
- * dot-grid v1.0.0
- * A modern, flexible 12-column CSS Grid system
- *
- * Features:
- * - Container queries for responsive layouts
- * - Fluid/automatic layout utilities
- * - Subgrid support
- * - CSS custom properties for easy customization
- * - Cascade layers for better specificity control
- *
- * (c) 2024 Jean Loberg
- * Released under the MIT License
- * https://github.com/lobergdesign/dot-grid
- */
 @layer grid.utilities {
-  .gap-none,
   .no-gap {
-    gap: var(--grid-gap-none, 0) !important;
-  }
-  .gap-xs {
-    gap: var(--grid-gap-xs, 0.5rem) !important;
-  }
-  .gap-sm {
-    gap: var(--grid-gap-sm, 1rem) !important;
-  }
-  .gap,
-  .gap-md {
-    gap: var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important;
-  }
-  .gap-lg {
-    gap: var(--grid-gap-lg, 3rem) !important;
-  }
-  .gap-xl {
-    gap: var(--grid-gap-xl, 4rem) !important;
-  }
-  .gap-b-none,
-  .no-gap-b {
-    row-gap: 0 !important;
-  }
-  .gap-sides-none,
-  .no-gap-sides {
-    column-gap: 0 !important;
+    gap: 0;
   }
   .place-t-l {
     display: grid;
@@ -273,1028 +197,884 @@
     display: flex;
     justify-content: space-evenly;
   }
-  .aspect-square {
-    aspect-ratio: 1/1;
-  }
-  .aspect-video {
-    aspect-ratio: 16/9;
-  }
-  .aspect-4-3 {
-    aspect-ratio: 4/3;
-  }
-  .aspect-21-9 {
-    aspect-ratio: 21/9;
-  }
-  .aspect-auto {
-    aspect-ratio: auto;
-  }
-  .col-min {
+  .grid-c-min {
     width: min-content;
     grid-column: auto;
   }
-  .col-max {
+  .grid-c-max {
     width: max-content;
     grid-column: auto;
   }
-  .col-fit {
+  .grid-c-fit {
     width: fit-content;
     grid-column: auto;
   }
   .hidden {
-    display: none !important;
-  }
-  .order-first {
-    order: -1;
-  }
-  .order-last {
-    order: 999;
-  }
-  .order-none {
-    order: 0;
+    display: none;
   }
 }
-/*!
- * dot-grid v1.0.0
- * A modern, flexible 12-column CSS Grid system
- *
- * Features:
- * - Container queries for responsive layouts
- * - Fluid/automatic layout utilities
- * - Subgrid support
- * - CSS custom properties for easy customization
- * - Cascade layers for better specificity control
- *
- * (c) 2024 Jean Loberg
- * Released under the MIT License
- * https://github.com/lobergdesign/dot-grid
- */
 @layer grid.responsive {
   @container grid (min-width: 640px) {
-    .col-sm-1 {
+    .grid-c-sm-1 {
       grid-column-end: span 1;
     }
-    .col-sm-2 {
+    .grid-c-sm-2 {
       grid-column-end: span 2;
     }
-    .col-sm-3 {
+    .grid-c-sm-3 {
       grid-column-end: span 3;
     }
-    .col-sm-4 {
+    .grid-c-sm-4 {
       grid-column-end: span 4;
     }
-    .col-sm-5 {
+    .grid-c-sm-5 {
       grid-column-end: span 5;
     }
-    .col-sm-6 {
+    .grid-c-sm-6 {
       grid-column-end: span 6;
     }
-    .col-sm-7 {
+    .grid-c-sm-7 {
       grid-column-end: span 7;
     }
-    .col-sm-8 {
+    .grid-c-sm-8 {
       grid-column-end: span 8;
     }
-    .col-sm-9 {
+    .grid-c-sm-9 {
       grid-column-end: span 9;
     }
-    .col-sm-10 {
+    .grid-c-sm-10 {
       grid-column-end: span 10;
     }
-    .col-sm-11 {
+    .grid-c-sm-11 {
       grid-column-end: span 11;
     }
-    .col-sm-12 {
+    .grid-c-sm-12 {
       grid-column-end: span 12;
     }
-    .col-start-sm-1 {
+    .grid-c-start-sm-1 {
       grid-column-start: 1;
     }
-    .col-start-sm-2 {
+    .grid-c-start-sm-2 {
       grid-column-start: 2;
     }
-    .col-start-sm-3 {
+    .grid-c-start-sm-3 {
       grid-column-start: 3;
     }
-    .col-start-sm-4 {
+    .grid-c-start-sm-4 {
       grid-column-start: 4;
     }
-    .col-start-sm-5 {
+    .grid-c-start-sm-5 {
       grid-column-start: 5;
     }
-    .col-start-sm-6 {
+    .grid-c-start-sm-6 {
       grid-column-start: 6;
     }
-    .col-start-sm-7 {
+    .grid-c-start-sm-7 {
       grid-column-start: 7;
     }
-    .col-start-sm-8 {
+    .grid-c-start-sm-8 {
       grid-column-start: 8;
     }
-    .col-start-sm-9 {
+    .grid-c-start-sm-9 {
       grid-column-start: 9;
     }
-    .col-start-sm-10 {
+    .grid-c-start-sm-10 {
       grid-column-start: 10;
     }
-    .col-start-sm-11 {
+    .grid-c-start-sm-11 {
       grid-column-start: 11;
     }
-    .col-start-sm-12 {
+    .grid-c-start-sm-12 {
       grid-column-start: 12;
     }
-    .gap-sm-none {
-      gap: 0 !important;
-    }
-    .gap-sm-xs {
-      gap: var(--grid-gap-xs, 0.5rem) !important;
-    }
-    .gap-sm-sm {
-      gap: var(--grid-gap-sm, 1rem) !important;
-    }
-    .gap-sm-md {
-      gap: var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important;
-    }
-    .gap-sm-lg {
-      gap: var(--grid-gap-lg, 3rem) !important;
-    }
-    .gap-sm-xl {
-      gap: var(--grid-gap-xl, 4rem) !important;
-    }
     .hidden-sm {
-      display: none !important;
+      display: none;
     }
     .block-sm {
-      display: block !important;
+      display: block;
     }
     .grid-sm {
-      display: grid !important;
+      display: grid;
     }
     .flex-sm {
-      display: flex !important;
+      display: flex;
     }
   }
   @container grid (min-width: 768px) {
-    .col-md-1 {
+    .grid-c-md-1 {
       grid-column-end: span 1;
     }
-    .col-md-2 {
+    .grid-c-md-2 {
       grid-column-end: span 2;
     }
-    .col-md-3 {
+    .grid-c-md-3 {
       grid-column-end: span 3;
     }
-    .col-md-4 {
+    .grid-c-md-4 {
       grid-column-end: span 4;
     }
-    .col-md-5 {
+    .grid-c-md-5 {
       grid-column-end: span 5;
     }
-    .col-md-6 {
+    .grid-c-md-6 {
       grid-column-end: span 6;
     }
-    .col-md-7 {
+    .grid-c-md-7 {
       grid-column-end: span 7;
     }
-    .col-md-8 {
+    .grid-c-md-8 {
       grid-column-end: span 8;
     }
-    .col-md-9 {
+    .grid-c-md-9 {
       grid-column-end: span 9;
     }
-    .col-md-10 {
+    .grid-c-md-10 {
       grid-column-end: span 10;
     }
-    .col-md-11 {
+    .grid-c-md-11 {
       grid-column-end: span 11;
     }
-    .col-md-12 {
+    .grid-c-md-12 {
       grid-column-end: span 12;
     }
-    .col-start-md-1 {
+    .grid-c-start-md-1 {
       grid-column-start: 1;
     }
-    .col-start-md-2 {
+    .grid-c-start-md-2 {
       grid-column-start: 2;
     }
-    .col-start-md-3 {
+    .grid-c-start-md-3 {
       grid-column-start: 3;
     }
-    .col-start-md-4 {
+    .grid-c-start-md-4 {
       grid-column-start: 4;
     }
-    .col-start-md-5 {
+    .grid-c-start-md-5 {
       grid-column-start: 5;
     }
-    .col-start-md-6 {
+    .grid-c-start-md-6 {
       grid-column-start: 6;
     }
-    .col-start-md-7 {
+    .grid-c-start-md-7 {
       grid-column-start: 7;
     }
-    .col-start-md-8 {
+    .grid-c-start-md-8 {
       grid-column-start: 8;
     }
-    .col-start-md-9 {
+    .grid-c-start-md-9 {
       grid-column-start: 9;
     }
-    .col-start-md-10 {
+    .grid-c-start-md-10 {
       grid-column-start: 10;
     }
-    .col-start-md-11 {
+    .grid-c-start-md-11 {
       grid-column-start: 11;
     }
-    .col-start-md-12 {
+    .grid-c-start-md-12 {
       grid-column-start: 12;
     }
-    .gap-md-none {
-      gap: 0 !important;
-    }
-    .gap-md-xs {
-      gap: var(--grid-gap-xs, 0.5rem) !important;
-    }
-    .gap-md-sm {
-      gap: var(--grid-gap-sm, 1rem) !important;
-    }
-    .gap-md-md {
-      gap: var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important;
-    }
-    .gap-md-lg {
-      gap: var(--grid-gap-lg, 3rem) !important;
-    }
-    .gap-md-xl {
-      gap: var(--grid-gap-xl, 4rem) !important;
-    }
     .hidden-md {
-      display: none !important;
+      display: none;
     }
     .block-md {
-      display: block !important;
+      display: block;
     }
     .grid-md {
-      display: grid !important;
+      display: grid;
     }
     .flex-md {
-      display: flex !important;
+      display: flex;
     }
   }
   @container grid (min-width: 1024px) {
-    .col-lg-1 {
+    .grid-c-lg-1 {
       grid-column-end: span 1;
     }
-    .col-lg-2 {
+    .grid-c-lg-2 {
       grid-column-end: span 2;
     }
-    .col-lg-3 {
+    .grid-c-lg-3 {
       grid-column-end: span 3;
     }
-    .col-lg-4 {
+    .grid-c-lg-4 {
       grid-column-end: span 4;
     }
-    .col-lg-5 {
+    .grid-c-lg-5 {
       grid-column-end: span 5;
     }
-    .col-lg-6 {
+    .grid-c-lg-6 {
       grid-column-end: span 6;
     }
-    .col-lg-7 {
+    .grid-c-lg-7 {
       grid-column-end: span 7;
     }
-    .col-lg-8 {
+    .grid-c-lg-8 {
       grid-column-end: span 8;
     }
-    .col-lg-9 {
+    .grid-c-lg-9 {
       grid-column-end: span 9;
     }
-    .col-lg-10 {
+    .grid-c-lg-10 {
       grid-column-end: span 10;
     }
-    .col-lg-11 {
+    .grid-c-lg-11 {
       grid-column-end: span 11;
     }
-    .col-lg-12 {
+    .grid-c-lg-12 {
       grid-column-end: span 12;
     }
-    .col-start-lg-1 {
+    .grid-c-start-lg-1 {
       grid-column-start: 1;
     }
-    .col-start-lg-2 {
+    .grid-c-start-lg-2 {
       grid-column-start: 2;
     }
-    .col-start-lg-3 {
+    .grid-c-start-lg-3 {
       grid-column-start: 3;
     }
-    .col-start-lg-4 {
+    .grid-c-start-lg-4 {
       grid-column-start: 4;
     }
-    .col-start-lg-5 {
+    .grid-c-start-lg-5 {
       grid-column-start: 5;
     }
-    .col-start-lg-6 {
+    .grid-c-start-lg-6 {
       grid-column-start: 6;
     }
-    .col-start-lg-7 {
+    .grid-c-start-lg-7 {
       grid-column-start: 7;
     }
-    .col-start-lg-8 {
+    .grid-c-start-lg-8 {
       grid-column-start: 8;
     }
-    .col-start-lg-9 {
+    .grid-c-start-lg-9 {
       grid-column-start: 9;
     }
-    .col-start-lg-10 {
+    .grid-c-start-lg-10 {
       grid-column-start: 10;
     }
-    .col-start-lg-11 {
+    .grid-c-start-lg-11 {
       grid-column-start: 11;
     }
-    .col-start-lg-12 {
+    .grid-c-start-lg-12 {
       grid-column-start: 12;
     }
-    .gap-lg-none {
-      gap: 0 !important;
-    }
-    .gap-lg-xs {
-      gap: var(--grid-gap-xs, 0.5rem) !important;
-    }
-    .gap-lg-sm {
-      gap: var(--grid-gap-sm, 1rem) !important;
-    }
-    .gap-lg-md {
-      gap: var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important;
-    }
-    .gap-lg-lg {
-      gap: var(--grid-gap-lg, 3rem) !important;
-    }
-    .gap-lg-xl {
-      gap: var(--grid-gap-xl, 4rem) !important;
-    }
     .hidden-lg {
-      display: none !important;
+      display: none;
     }
     .block-lg {
-      display: block !important;
+      display: block;
     }
     .grid-lg {
-      display: grid !important;
+      display: grid;
     }
     .flex-lg {
-      display: flex !important;
+      display: flex;
     }
   }
   @container grid (min-width: 1280px) {
-    .col-xl-1 {
+    .grid-c-xl-1 {
       grid-column-end: span 1;
     }
-    .col-xl-2 {
+    .grid-c-xl-2 {
       grid-column-end: span 2;
     }
-    .col-xl-3 {
+    .grid-c-xl-3 {
       grid-column-end: span 3;
     }
-    .col-xl-4 {
+    .grid-c-xl-4 {
       grid-column-end: span 4;
     }
-    .col-xl-5 {
+    .grid-c-xl-5 {
       grid-column-end: span 5;
     }
-    .col-xl-6 {
+    .grid-c-xl-6 {
       grid-column-end: span 6;
     }
-    .col-xl-7 {
+    .grid-c-xl-7 {
       grid-column-end: span 7;
     }
-    .col-xl-8 {
+    .grid-c-xl-8 {
       grid-column-end: span 8;
     }
-    .col-xl-9 {
+    .grid-c-xl-9 {
       grid-column-end: span 9;
     }
-    .col-xl-10 {
+    .grid-c-xl-10 {
       grid-column-end: span 10;
     }
-    .col-xl-11 {
+    .grid-c-xl-11 {
       grid-column-end: span 11;
     }
-    .col-xl-12 {
+    .grid-c-xl-12 {
       grid-column-end: span 12;
     }
-    .col-start-xl-1 {
+    .grid-c-start-xl-1 {
       grid-column-start: 1;
     }
-    .col-start-xl-2 {
+    .grid-c-start-xl-2 {
       grid-column-start: 2;
     }
-    .col-start-xl-3 {
+    .grid-c-start-xl-3 {
       grid-column-start: 3;
     }
-    .col-start-xl-4 {
+    .grid-c-start-xl-4 {
       grid-column-start: 4;
     }
-    .col-start-xl-5 {
+    .grid-c-start-xl-5 {
       grid-column-start: 5;
     }
-    .col-start-xl-6 {
+    .grid-c-start-xl-6 {
       grid-column-start: 6;
     }
-    .col-start-xl-7 {
+    .grid-c-start-xl-7 {
       grid-column-start: 7;
     }
-    .col-start-xl-8 {
+    .grid-c-start-xl-8 {
       grid-column-start: 8;
     }
-    .col-start-xl-9 {
+    .grid-c-start-xl-9 {
       grid-column-start: 9;
     }
-    .col-start-xl-10 {
+    .grid-c-start-xl-10 {
       grid-column-start: 10;
     }
-    .col-start-xl-11 {
+    .grid-c-start-xl-11 {
       grid-column-start: 11;
     }
-    .col-start-xl-12 {
+    .grid-c-start-xl-12 {
       grid-column-start: 12;
     }
-    .gap-xl-none {
-      gap: 0 !important;
-    }
-    .gap-xl-xs {
-      gap: var(--grid-gap-xs, 0.5rem) !important;
-    }
-    .gap-xl-sm {
-      gap: var(--grid-gap-sm, 1rem) !important;
-    }
-    .gap-xl-md {
-      gap: var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important;
-    }
-    .gap-xl-lg {
-      gap: var(--grid-gap-lg, 3rem) !important;
-    }
-    .gap-xl-xl {
-      gap: var(--grid-gap-xl, 4rem) !important;
-    }
     .hidden-xl {
-      display: none !important;
+      display: none;
     }
     .block-xl {
-      display: block !important;
+      display: block;
     }
     .grid-xl {
-      display: grid !important;
+      display: grid;
     }
     .flex-xl {
-      display: flex !important;
+      display: flex;
     }
   }
   @container grid (min-width: 1536px) {
-    .col-xxl-1 {
+    .grid-c-xxl-1 {
       grid-column-end: span 1;
     }
-    .col-xxl-2 {
+    .grid-c-xxl-2 {
       grid-column-end: span 2;
     }
-    .col-xxl-3 {
+    .grid-c-xxl-3 {
       grid-column-end: span 3;
     }
-    .col-xxl-4 {
+    .grid-c-xxl-4 {
       grid-column-end: span 4;
     }
-    .col-xxl-5 {
+    .grid-c-xxl-5 {
       grid-column-end: span 5;
     }
-    .col-xxl-6 {
+    .grid-c-xxl-6 {
       grid-column-end: span 6;
     }
-    .col-xxl-7 {
+    .grid-c-xxl-7 {
       grid-column-end: span 7;
     }
-    .col-xxl-8 {
+    .grid-c-xxl-8 {
       grid-column-end: span 8;
     }
-    .col-xxl-9 {
+    .grid-c-xxl-9 {
       grid-column-end: span 9;
     }
-    .col-xxl-10 {
+    .grid-c-xxl-10 {
       grid-column-end: span 10;
     }
-    .col-xxl-11 {
+    .grid-c-xxl-11 {
       grid-column-end: span 11;
     }
-    .col-xxl-12 {
+    .grid-c-xxl-12 {
       grid-column-end: span 12;
     }
-    .col-start-xxl-1 {
+    .grid-c-start-xxl-1 {
       grid-column-start: 1;
     }
-    .col-start-xxl-2 {
+    .grid-c-start-xxl-2 {
       grid-column-start: 2;
     }
-    .col-start-xxl-3 {
+    .grid-c-start-xxl-3 {
       grid-column-start: 3;
     }
-    .col-start-xxl-4 {
+    .grid-c-start-xxl-4 {
       grid-column-start: 4;
     }
-    .col-start-xxl-5 {
+    .grid-c-start-xxl-5 {
       grid-column-start: 5;
     }
-    .col-start-xxl-6 {
+    .grid-c-start-xxl-6 {
       grid-column-start: 6;
     }
-    .col-start-xxl-7 {
+    .grid-c-start-xxl-7 {
       grid-column-start: 7;
     }
-    .col-start-xxl-8 {
+    .grid-c-start-xxl-8 {
       grid-column-start: 8;
     }
-    .col-start-xxl-9 {
+    .grid-c-start-xxl-9 {
       grid-column-start: 9;
     }
-    .col-start-xxl-10 {
+    .grid-c-start-xxl-10 {
       grid-column-start: 10;
     }
-    .col-start-xxl-11 {
+    .grid-c-start-xxl-11 {
       grid-column-start: 11;
     }
-    .col-start-xxl-12 {
+    .grid-c-start-xxl-12 {
       grid-column-start: 12;
     }
-    .gap-xxl-none {
-      gap: 0 !important;
-    }
-    .gap-xxl-xs {
-      gap: var(--grid-gap-xs, 0.5rem) !important;
-    }
-    .gap-xxl-sm {
-      gap: var(--grid-gap-sm, 1rem) !important;
-    }
-    .gap-xxl-md {
-      gap: var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important;
-    }
-    .gap-xxl-lg {
-      gap: var(--grid-gap-lg, 3rem) !important;
-    }
-    .gap-xxl-xl {
-      gap: var(--grid-gap-xl, 4rem) !important;
-    }
     .hidden-xxl {
-      display: none !important;
+      display: none;
     }
     .block-xxl {
-      display: block !important;
+      display: block;
     }
     .grid-xxl {
-      display: grid !important;
+      display: grid;
     }
     .flex-xxl {
-      display: flex !important;
+      display: flex;
     }
   }
   @media (min-width: 640px) {
-    .col-vp-sm-1 {
+    .grid-c-vp-sm-1 {
       grid-column-end: span 1;
     }
-    .col-vp-sm-2 {
+    .grid-c-vp-sm-2 {
       grid-column-end: span 2;
     }
-    .col-vp-sm-3 {
+    .grid-c-vp-sm-3 {
       grid-column-end: span 3;
     }
-    .col-vp-sm-4 {
+    .grid-c-vp-sm-4 {
       grid-column-end: span 4;
     }
-    .col-vp-sm-5 {
+    .grid-c-vp-sm-5 {
       grid-column-end: span 5;
     }
-    .col-vp-sm-6 {
+    .grid-c-vp-sm-6 {
       grid-column-end: span 6;
     }
-    .col-vp-sm-7 {
+    .grid-c-vp-sm-7 {
       grid-column-end: span 7;
     }
-    .col-vp-sm-8 {
+    .grid-c-vp-sm-8 {
       grid-column-end: span 8;
     }
-    .col-vp-sm-9 {
+    .grid-c-vp-sm-9 {
       grid-column-end: span 9;
     }
-    .col-vp-sm-10 {
+    .grid-c-vp-sm-10 {
       grid-column-end: span 10;
     }
-    .col-vp-sm-11 {
+    .grid-c-vp-sm-11 {
       grid-column-end: span 11;
     }
-    .col-vp-sm-12 {
+    .grid-c-vp-sm-12 {
       grid-column-end: span 12;
     }
-    .col-start-vp-sm-1 {
+    .grid-c-start-vp-sm-1 {
       grid-column-start: 1;
     }
-    .col-start-vp-sm-2 {
+    .grid-c-start-vp-sm-2 {
       grid-column-start: 2;
     }
-    .col-start-vp-sm-3 {
+    .grid-c-start-vp-sm-3 {
       grid-column-start: 3;
     }
-    .col-start-vp-sm-4 {
+    .grid-c-start-vp-sm-4 {
       grid-column-start: 4;
     }
-    .col-start-vp-sm-5 {
+    .grid-c-start-vp-sm-5 {
       grid-column-start: 5;
     }
-    .col-start-vp-sm-6 {
+    .grid-c-start-vp-sm-6 {
       grid-column-start: 6;
     }
-    .col-start-vp-sm-7 {
+    .grid-c-start-vp-sm-7 {
       grid-column-start: 7;
     }
-    .col-start-vp-sm-8 {
+    .grid-c-start-vp-sm-8 {
       grid-column-start: 8;
     }
-    .col-start-vp-sm-9 {
+    .grid-c-start-vp-sm-9 {
       grid-column-start: 9;
     }
-    .col-start-vp-sm-10 {
+    .grid-c-start-vp-sm-10 {
       grid-column-start: 10;
     }
-    .col-start-vp-sm-11 {
+    .grid-c-start-vp-sm-11 {
       grid-column-start: 11;
     }
-    .col-start-vp-sm-12 {
+    .grid-c-start-vp-sm-12 {
       grid-column-start: 12;
     }
     .hidden-vp-sm {
-      display: none !important;
+      display: none;
     }
     .block-vp-sm {
-      display: block !important;
+      display: block;
     }
     .grid-vp-sm {
-      display: grid !important;
+      display: grid;
     }
     .flex-vp-sm {
-      display: flex !important;
+      display: flex;
     }
   }
   @media (min-width: 768px) {
-    .col-vp-md-1 {
+    .grid-c-vp-md-1 {
       grid-column-end: span 1;
     }
-    .col-vp-md-2 {
+    .grid-c-vp-md-2 {
       grid-column-end: span 2;
     }
-    .col-vp-md-3 {
+    .grid-c-vp-md-3 {
       grid-column-end: span 3;
     }
-    .col-vp-md-4 {
+    .grid-c-vp-md-4 {
       grid-column-end: span 4;
     }
-    .col-vp-md-5 {
+    .grid-c-vp-md-5 {
       grid-column-end: span 5;
     }
-    .col-vp-md-6 {
+    .grid-c-vp-md-6 {
       grid-column-end: span 6;
     }
-    .col-vp-md-7 {
+    .grid-c-vp-md-7 {
       grid-column-end: span 7;
     }
-    .col-vp-md-8 {
+    .grid-c-vp-md-8 {
       grid-column-end: span 8;
     }
-    .col-vp-md-9 {
+    .grid-c-vp-md-9 {
       grid-column-end: span 9;
     }
-    .col-vp-md-10 {
+    .grid-c-vp-md-10 {
       grid-column-end: span 10;
     }
-    .col-vp-md-11 {
+    .grid-c-vp-md-11 {
       grid-column-end: span 11;
     }
-    .col-vp-md-12 {
+    .grid-c-vp-md-12 {
       grid-column-end: span 12;
     }
-    .col-start-vp-md-1 {
+    .grid-c-start-vp-md-1 {
       grid-column-start: 1;
     }
-    .col-start-vp-md-2 {
+    .grid-c-start-vp-md-2 {
       grid-column-start: 2;
     }
-    .col-start-vp-md-3 {
+    .grid-c-start-vp-md-3 {
       grid-column-start: 3;
     }
-    .col-start-vp-md-4 {
+    .grid-c-start-vp-md-4 {
       grid-column-start: 4;
     }
-    .col-start-vp-md-5 {
+    .grid-c-start-vp-md-5 {
       grid-column-start: 5;
     }
-    .col-start-vp-md-6 {
+    .grid-c-start-vp-md-6 {
       grid-column-start: 6;
     }
-    .col-start-vp-md-7 {
+    .grid-c-start-vp-md-7 {
       grid-column-start: 7;
     }
-    .col-start-vp-md-8 {
+    .grid-c-start-vp-md-8 {
       grid-column-start: 8;
     }
-    .col-start-vp-md-9 {
+    .grid-c-start-vp-md-9 {
       grid-column-start: 9;
     }
-    .col-start-vp-md-10 {
+    .grid-c-start-vp-md-10 {
       grid-column-start: 10;
     }
-    .col-start-vp-md-11 {
+    .grid-c-start-vp-md-11 {
       grid-column-start: 11;
     }
-    .col-start-vp-md-12 {
+    .grid-c-start-vp-md-12 {
       grid-column-start: 12;
     }
     .hidden-vp-md {
-      display: none !important;
+      display: none;
     }
     .block-vp-md {
-      display: block !important;
+      display: block;
     }
     .grid-vp-md {
-      display: grid !important;
+      display: grid;
     }
     .flex-vp-md {
-      display: flex !important;
+      display: flex;
     }
   }
   @media (min-width: 1024px) {
-    .col-vp-lg-1 {
+    .grid-c-vp-lg-1 {
       grid-column-end: span 1;
     }
-    .col-vp-lg-2 {
+    .grid-c-vp-lg-2 {
       grid-column-end: span 2;
     }
-    .col-vp-lg-3 {
+    .grid-c-vp-lg-3 {
       grid-column-end: span 3;
     }
-    .col-vp-lg-4 {
+    .grid-c-vp-lg-4 {
       grid-column-end: span 4;
     }
-    .col-vp-lg-5 {
+    .grid-c-vp-lg-5 {
       grid-column-end: span 5;
     }
-    .col-vp-lg-6 {
+    .grid-c-vp-lg-6 {
       grid-column-end: span 6;
     }
-    .col-vp-lg-7 {
+    .grid-c-vp-lg-7 {
       grid-column-end: span 7;
     }
-    .col-vp-lg-8 {
+    .grid-c-vp-lg-8 {
       grid-column-end: span 8;
     }
-    .col-vp-lg-9 {
+    .grid-c-vp-lg-9 {
       grid-column-end: span 9;
     }
-    .col-vp-lg-10 {
+    .grid-c-vp-lg-10 {
       grid-column-end: span 10;
     }
-    .col-vp-lg-11 {
+    .grid-c-vp-lg-11 {
       grid-column-end: span 11;
     }
-    .col-vp-lg-12 {
+    .grid-c-vp-lg-12 {
       grid-column-end: span 12;
     }
-    .col-start-vp-lg-1 {
+    .grid-c-start-vp-lg-1 {
       grid-column-start: 1;
     }
-    .col-start-vp-lg-2 {
+    .grid-c-start-vp-lg-2 {
       grid-column-start: 2;
     }
-    .col-start-vp-lg-3 {
+    .grid-c-start-vp-lg-3 {
       grid-column-start: 3;
     }
-    .col-start-vp-lg-4 {
+    .grid-c-start-vp-lg-4 {
       grid-column-start: 4;
     }
-    .col-start-vp-lg-5 {
+    .grid-c-start-vp-lg-5 {
       grid-column-start: 5;
     }
-    .col-start-vp-lg-6 {
+    .grid-c-start-vp-lg-6 {
       grid-column-start: 6;
     }
-    .col-start-vp-lg-7 {
+    .grid-c-start-vp-lg-7 {
       grid-column-start: 7;
     }
-    .col-start-vp-lg-8 {
+    .grid-c-start-vp-lg-8 {
       grid-column-start: 8;
     }
-    .col-start-vp-lg-9 {
+    .grid-c-start-vp-lg-9 {
       grid-column-start: 9;
     }
-    .col-start-vp-lg-10 {
+    .grid-c-start-vp-lg-10 {
       grid-column-start: 10;
     }
-    .col-start-vp-lg-11 {
+    .grid-c-start-vp-lg-11 {
       grid-column-start: 11;
     }
-    .col-start-vp-lg-12 {
+    .grid-c-start-vp-lg-12 {
       grid-column-start: 12;
     }
     .hidden-vp-lg {
-      display: none !important;
+      display: none;
     }
     .block-vp-lg {
-      display: block !important;
+      display: block;
     }
     .grid-vp-lg {
-      display: grid !important;
+      display: grid;
     }
     .flex-vp-lg {
-      display: flex !important;
+      display: flex;
     }
   }
   @media (min-width: 1280px) {
-    .col-vp-xl-1 {
+    .grid-c-vp-xl-1 {
       grid-column-end: span 1;
     }
-    .col-vp-xl-2 {
+    .grid-c-vp-xl-2 {
       grid-column-end: span 2;
     }
-    .col-vp-xl-3 {
+    .grid-c-vp-xl-3 {
       grid-column-end: span 3;
     }
-    .col-vp-xl-4 {
+    .grid-c-vp-xl-4 {
       grid-column-end: span 4;
     }
-    .col-vp-xl-5 {
+    .grid-c-vp-xl-5 {
       grid-column-end: span 5;
     }
-    .col-vp-xl-6 {
+    .grid-c-vp-xl-6 {
       grid-column-end: span 6;
     }
-    .col-vp-xl-7 {
+    .grid-c-vp-xl-7 {
       grid-column-end: span 7;
     }
-    .col-vp-xl-8 {
+    .grid-c-vp-xl-8 {
       grid-column-end: span 8;
     }
-    .col-vp-xl-9 {
+    .grid-c-vp-xl-9 {
       grid-column-end: span 9;
     }
-    .col-vp-xl-10 {
+    .grid-c-vp-xl-10 {
       grid-column-end: span 10;
     }
-    .col-vp-xl-11 {
+    .grid-c-vp-xl-11 {
       grid-column-end: span 11;
     }
-    .col-vp-xl-12 {
+    .grid-c-vp-xl-12 {
       grid-column-end: span 12;
     }
-    .col-start-vp-xl-1 {
+    .grid-c-start-vp-xl-1 {
       grid-column-start: 1;
     }
-    .col-start-vp-xl-2 {
+    .grid-c-start-vp-xl-2 {
       grid-column-start: 2;
     }
-    .col-start-vp-xl-3 {
+    .grid-c-start-vp-xl-3 {
       grid-column-start: 3;
     }
-    .col-start-vp-xl-4 {
+    .grid-c-start-vp-xl-4 {
       grid-column-start: 4;
     }
-    .col-start-vp-xl-5 {
+    .grid-c-start-vp-xl-5 {
       grid-column-start: 5;
     }
-    .col-start-vp-xl-6 {
+    .grid-c-start-vp-xl-6 {
       grid-column-start: 6;
     }
-    .col-start-vp-xl-7 {
+    .grid-c-start-vp-xl-7 {
       grid-column-start: 7;
     }
-    .col-start-vp-xl-8 {
+    .grid-c-start-vp-xl-8 {
       grid-column-start: 8;
     }
-    .col-start-vp-xl-9 {
+    .grid-c-start-vp-xl-9 {
       grid-column-start: 9;
     }
-    .col-start-vp-xl-10 {
+    .grid-c-start-vp-xl-10 {
       grid-column-start: 10;
     }
-    .col-start-vp-xl-11 {
+    .grid-c-start-vp-xl-11 {
       grid-column-start: 11;
     }
-    .col-start-vp-xl-12 {
+    .grid-c-start-vp-xl-12 {
       grid-column-start: 12;
     }
     .hidden-vp-xl {
-      display: none !important;
+      display: none;
     }
     .block-vp-xl {
-      display: block !important;
+      display: block;
     }
     .grid-vp-xl {
-      display: grid !important;
+      display: grid;
     }
     .flex-vp-xl {
-      display: flex !important;
+      display: flex;
     }
   }
   @media (min-width: 1536px) {
-    .col-vp-xxl-1 {
+    .grid-c-vp-xxl-1 {
       grid-column-end: span 1;
     }
-    .col-vp-xxl-2 {
+    .grid-c-vp-xxl-2 {
       grid-column-end: span 2;
     }
-    .col-vp-xxl-3 {
+    .grid-c-vp-xxl-3 {
       grid-column-end: span 3;
     }
-    .col-vp-xxl-4 {
+    .grid-c-vp-xxl-4 {
       grid-column-end: span 4;
     }
-    .col-vp-xxl-5 {
+    .grid-c-vp-xxl-5 {
       grid-column-end: span 5;
     }
-    .col-vp-xxl-6 {
+    .grid-c-vp-xxl-6 {
       grid-column-end: span 6;
     }
-    .col-vp-xxl-7 {
+    .grid-c-vp-xxl-7 {
       grid-column-end: span 7;
     }
-    .col-vp-xxl-8 {
+    .grid-c-vp-xxl-8 {
       grid-column-end: span 8;
     }
-    .col-vp-xxl-9 {
+    .grid-c-vp-xxl-9 {
       grid-column-end: span 9;
     }
-    .col-vp-xxl-10 {
+    .grid-c-vp-xxl-10 {
       grid-column-end: span 10;
     }
-    .col-vp-xxl-11 {
+    .grid-c-vp-xxl-11 {
       grid-column-end: span 11;
     }
-    .col-vp-xxl-12 {
+    .grid-c-vp-xxl-12 {
       grid-column-end: span 12;
     }
-    .col-start-vp-xxl-1 {
+    .grid-c-start-vp-xxl-1 {
       grid-column-start: 1;
     }
-    .col-start-vp-xxl-2 {
+    .grid-c-start-vp-xxl-2 {
       grid-column-start: 2;
     }
-    .col-start-vp-xxl-3 {
+    .grid-c-start-vp-xxl-3 {
       grid-column-start: 3;
     }
-    .col-start-vp-xxl-4 {
+    .grid-c-start-vp-xxl-4 {
       grid-column-start: 4;
     }
-    .col-start-vp-xxl-5 {
+    .grid-c-start-vp-xxl-5 {
       grid-column-start: 5;
     }
-    .col-start-vp-xxl-6 {
+    .grid-c-start-vp-xxl-6 {
       grid-column-start: 6;
     }
-    .col-start-vp-xxl-7 {
+    .grid-c-start-vp-xxl-7 {
       grid-column-start: 7;
     }
-    .col-start-vp-xxl-8 {
+    .grid-c-start-vp-xxl-8 {
       grid-column-start: 8;
     }
-    .col-start-vp-xxl-9 {
+    .grid-c-start-vp-xxl-9 {
       grid-column-start: 9;
     }
-    .col-start-vp-xxl-10 {
+    .grid-c-start-vp-xxl-10 {
       grid-column-start: 10;
     }
-    .col-start-vp-xxl-11 {
+    .grid-c-start-vp-xxl-11 {
       grid-column-start: 11;
     }
-    .col-start-vp-xxl-12 {
+    .grid-c-start-vp-xxl-12 {
       grid-column-start: 12;
     }
     .hidden-vp-xxl {
-      display: none !important;
+      display: none;
     }
     .block-vp-xxl {
-      display: block !important;
+      display: block;
     }
     .grid-vp-xxl {
-      display: grid !important;
+      display: grid;
     }
     .flex-vp-xxl {
-      display: flex !important;
+      display: flex;
     }
   }
 }
-/*!
- * dot-grid v1.0.0
- * A modern, flexible 12-column CSS Grid system
- *
- * Features:
- * - Container queries for responsive layouts
- * - Fluid/automatic layout utilities
- * - Subgrid support
- * - CSS custom properties for easy customization
- * - Cascade layers for better specificity control
- *
- * (c) 2024 Jean Loberg
- * Released under the MIT License
- * https://github.com/lobergdesign/dot-grid
- */
 @layer grid.fluid {
   .grid-auto-fit {
     display: grid;
@@ -1306,52 +1086,52 @@
     grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));
     gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
   }
-  .col-auto {
+  .grid-c-auto {
     grid-column: auto;
     width: auto;
   }
-  .col-fluid {
-    min-width: var(--col-min-width, 200px);
-    flex: 1 1 var(--col-min-width, 200px);
+  .grid-c-fluid {
+    min-width: var(--grid-c-min-width, 200px);
+    flex: 1 1 var(--grid-c-min-width, 200px);
   }
-  .row-fluid-2 {
+  .grid-r-fluid-2 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(50% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) / 2, 100%), 1fr));
     gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
   }
-  .row-fluid-3 {
+  .grid-r-fluid-3 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(33.333% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 2 / 3, 100%), 1fr));
     gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
   }
-  .row-fluid-4 {
+  .grid-r-fluid-4 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(25% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 3 / 4, 100%), 1fr));
     gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
   }
-  .row-ram {
+  .grid-r-ram {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 250px), 1fr));
     gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
   }
-  .row-ram > * {
-    grid-column: auto !important;
+  .grid-r-ram > * {
+    grid-column: auto;
   }
-  .row-intrinsic {
+  .grid-r-intrinsic {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0, max-content));
     gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
   }
-  .row-even {
+  .grid-r-even {
     display: grid;
     grid-auto-columns: 1fr;
     grid-auto-flow: column;
     gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
   }
-  .row-dense {
+  .grid-r-dense {
     grid-auto-flow: dense;
   }
-  .row-flexible {
+  .grid-r-flexible {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(clamp(var(--col-min, 200px), (100% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * (var(--col-count, 3) - 1)) / var(--col-count, 3), 1fr), 1fr));
     gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
@@ -1360,16 +1140,16 @@
 /*
 BASIC GRID:
-<div class="wrap">
-  <div class="row">
-    <div class="col-12 col-md-6 col-lg-4">Column</div>
-    <div class="col-12 col-md-6 col-lg-4">Column</div>
-    <div class="col-12 col-md-6 col-lg-4">Column</div>
+<div class="grid-w">
+  <div class="grid-r">
+    <div class="grid-c-12 grid-c-md-6 grid-c-lg-4">Column</div>
+    <div class="grid-c-12 grid-c-md-6 grid-c-lg-4">Column</div>
+    <div class="grid-c-12 grid-c-md-6 grid-c-lg-4">Column</div>
   </div>
 </div>
 FLUID GRID (auto-responsive):
-<div class="wrap">
+<div class="grid-w">
   <div class="grid-auto-fit">
     <div>Card 1</div>
     <div>Card 2</div>
@@ -1378,23 +1158,23 @@ FLUID GRID (auto-responsive):
 </div>
 SUBGRID:
-<div class="row">
-  <div class="col-12 row-subgrid">
-    <div class="col-4">Nested 1</div>
-    <div class="col-4">Nested 2</div>
-    <div class="col-4">Nested 3</div>
+<div class="grid-r">
+  <div class="grid-c-12 grid-r-subgrid">
+    <div class="grid-c-4">Nested 1</div>
+    <div class="grid-c-4">Nested 2</div>
+    <div class="grid-c-4">Nested 3</div>
   </div>
 </div>
-CUSTOM GAP:
-<div class="row gap-lg">
-  <div class="col-6">Large gap</div>
-  <div class="col-6">Large gap</div>
+NO GAP:
+<div class="grid-r no-gap">
+  <div class="grid-c-6">No gap</div>
+  <div class="grid-c-6">No gap</div>
 </div>
 PLACEMENT:
-<div class="row">
-  <div class="col-6 place-c-c">Centered content</div>
+<div class="grid-r">
+  <div class="grid-c-6 place-c-c">Centered content</div>
 </div>
 */