@tmorrow/cre8-wc 2.1.1 → 2.2.2

package/dist/assets/{grid-C5CKMXNe.js → grid-item-WCDk_zGh.js}

@@ -1,4 +1,4 @@
-import{a as g,b as c}from"./iframe-BNJP6ovU.js";import{C as h,n as d}from"./cre8-element-B35i4Lyg.js";const u=g`.cre8-u-content-knockout-brand {
+import{a as p,b as c}from"./iframe-CTa_pRc7.js";import{C as h,n as d}from"./cre8-element-q82VmUgi.js";const u=p`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -582,300 +590,643 @@ span.ripple {
  * Visually hidden from display
  */
 /**
- * 1) Item used for the various items within the grid
+ * 1) Grid layout for items like cards, etc.
  */
-.cre8-c-grid__item {
-  height: 100%;
-}`,o=class o extends h{render(){const e=this.componentClassNames("cre8-c-grid__item",{});return c`
-      <div class="${e}">
-        <slot></slot>
-      </div>
-    `}};o.styles=[u];let a=o;customElements.get("cre8-grid-item")===void 0&&customElements.define("cre8-grid-item",a);const f=g`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+.cre8-c-grid {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  margin: -0.75rem;
 }
 
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
+/**
+ * Grid with no gap in between items
+ */
+.cre8-c-grid--gap-none {
+  margin: 0;
 }
 
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
+/**
+ * Small gap grid
+ * 1) Spacing between grid items is smaller than default
+ */
+.cre8-c-grid--gap-sm {
+  margin: -0.25rem;
 }
 
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
+/**
+ * Large gap grid
+ * 1) Spacing between grid items is larger than default
+ */
+.cre8-c-grid--gap-lg {
+  margin: -1rem;
 }
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
+
+/**
+ * Side by Side Grid
+ * 1) Grid that stays 2 items per row on all screen sizes
+ */
+.cre8-c-grid--side-by-side {
+  flex-direction: row;
 }
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
+
+/**
+ * 2up grid
+ * 1) Stacked items on small screens to 2 items per row on medium/large screens
+ */
+@media all and (min-width: 768px) {
+  .cre8-c-grid--2up {
+    flex-direction: row;
   }
 }
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
+.cre8-c-grid--2up {
+  /**
+  * 2up grid that breaks faster
+  * 1) Grid that breaks from 1 to 2up at a smaller viewport than the default
+  */
 }
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
+@media all and (min-width: 560px) {
+  .cre8-c-grid--2up.cre8-c-grid--break-faster {
+    flex-direction: row;
   }
 }
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
+.cre8-c-grid--2up {
+  /**
+  * 2up grid that breaks slower
+  * 1) Grid that breaks from 1 to 2up at a larger viewport than the default
+  */
 }
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
+@media all and (min-width: 768px) {
+  .cre8-c-grid--2up.cre8-c-grid--break-slower {
+    flex-direction: column;
   }
 }
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
+@media all and (min-width: 1400px) {
+  .cre8-c-grid--2up.cre8-c-grid--break-slower {
+    flex-direction: row;
   }
 }
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
+
+/**
+ * 3up grid
+ * 1) Stacked items on small screens to 3 items per row on medium/large screens
+ */
+@media all and (min-width: 768px) {
+  .cre8-c-grid--3up {
+    flex-direction: row;
   }
 }
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
+
+/**
+ * 1 to 3up grid
+ * 1) Stacked items on small screens to 3 items per row on medium/large screens
+ */
+@media all and (min-width: 960px) {
+  .cre8-c-grid--1-3up {
+    flex-direction: row;
   }
 }
-.cre8-u-margin-none {
-  margin: 0 !important;
+.cre8-c-grid--1-3up {
+  /**
+  * 1 to 3 up grid that breaks faster
+  * 1) Grid that breaks from 1 to 3up at a smaller viewport than the default
+  */
 }
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
+@media all and (min-width: 768px) {
+  .cre8-c-grid--1-3up.cre8-c-grid--break-faster {
+    flex-direction: row;
+  }
 }
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
+.cre8-c-grid--1-3up {
+  /**
+  * 1 to 3up grid that breaks slower
+  * 1) Grid that breaks from 1 to 3up at a larger viewport than the default
+  */
 }
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
+@media all and (min-width: 960px) {
+  .cre8-c-grid--1-3up.cre8-c-grid--break-slower {
+    flex-direction: column;
+  }
 }
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
+@media all and (min-width: 1200px) {
+  .cre8-c-grid--1-3up.cre8-c-grid--break-slower {
+    flex-direction: row;
+  }
 }
 
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
+/**
+ * 1 to 2 to 4up grid
+ * 1) Stacked items on small screens to 2 items per row on medium screens to 4 items per row on large screens
+ */
+@media all and (min-width: 560px) {
+  .cre8-c-grid--1-2-4up {
+    flex-direction: row;
+  }
 }
 
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
+/**
+ * 1 to 4up grid
+ * 1) Stacked items on small screens to 4 items per row on medium/large screens
+ */
+@media all and (min-width: 768px) {
+  .cre8-c-grid--1-4up {
+    flex-direction: row;
+  }
 }
 
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+/**
+ * 1 to 2 to 4up grid
+ * 1) Stacked items on small screens to 2 items per row on small/medium screens to
+ * 3 items per row on medium screens and 4 items per row on large screens
+ */
+@media all and (min-width: 560px) {
+  .cre8-c-grid--4up {
+    flex-direction: row;
+  }
 }
 
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+/**
+  * Slotted grid item within 4up Grid
+  */
+.cre8-c-grid--2-4-6up {
+  flex-direction: row;
 }
 
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+/**
+ * Slotted grid item
+ */
+::slotted(cre8-grid-item) {
+  display: block;
+  padding: 0.75rem;
+  /**
+  * Slotted grid item within grid with no gap between items
+  */
 }
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+.cre8-c-grid--gap-none > ::slotted(cre8-grid-item) {
+  padding: 0;
 }
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within grid with small gap between items
+  */
 }
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
+.cre8-c-grid--gap-sm > ::slotted(cre8-grid-item) {
+  padding: 0.25rem;
 }
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within grid with large gap between items
+  */
 }
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+.cre8-c-grid--gap-lg > ::slotted(cre8-grid-item) {
+  padding: 1rem;
 }
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within side by side grid
+  * 1) Grid that stays 2 items per row on all screen sizes
+  */
 }
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+.cre8-c-grid--side-by-side > ::slotted(cre8-grid-item) {
+  width: 50%;
 }
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 2up Grid
+  */
 }
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
+@media all and (min-width: 768px) {
+  .cre8-c-grid--2up > ::slotted(cre8-grid-item) {
+    width: 50%;
+  }
 }
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 2up break faster (small to large screens) Grid
+  */
 }
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+@media all and (min-width: 560px) {
+  .cre8-c-grid--2up.cre8-c-grid--break-faster > ::slotted(cre8-grid-item) {
+    width: 50%;
+  }
 }
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 2up break slower (small to large screens) Grid
+  */
 }
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+@media all and (min-width: 768px) {
+  .cre8-c-grid--2up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {
+    width: 100%;
+  }
 }
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+@media all and (min-width: 1400px) {
+  .cre8-c-grid--2up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {
+    width: 50%;
+  }
 }
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 3up Grid
+  */
 }
-
 @media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+  .cre8-c-grid--3up > ::slotted(cre8-grid-item) {
+    width: 50%;
   }
 }
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+@media all and (min-width: 960px) {
+  .cre8-c-grid--3up > ::slotted(cre8-grid-item) {
+    width: 33.3333%;
+  }
 }
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 1-3up Grid
+  */
 }
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+@media all and (min-width: 960px) {
+  .cre8-c-grid--1-3up > ::slotted(cre8-grid-item) {
+    width: 33.3333%;
+  }
 }
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 1 to 3up break faster (small to large screens) grid
+  */
 }
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+@media all and (min-width: 768px) {
+  .cre8-c-grid--1-3up.cre8-c-grid--break-faster > ::slotted(cre8-grid-item) {
+    width: 33.33%;
+  }
 }
-
-.cre8-u-padding-none {
-  padding: 0 !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 2up break slower (small to large screens) Grid
+  */
 }
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
+@media all and (min-width: 960px) {
+  .cre8-c-grid--1-3up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {
+    width: 100%;
+  }
 }
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
+@media all and (min-width: 1200px) {
+  .cre8-c-grid--1-3up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {
+    width: 33.33%;
+  }
 }
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 1-2-4up Grid
+  */
 }
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
+@media all and (min-width: 560px) {
+  .cre8-c-grid--1-2-4up > ::slotted(cre8-grid-item) {
+    width: 50%;
+  }
 }
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
+@media all and (min-width: 960px) {
+  .cre8-c-grid--1-2-4up > ::slotted(cre8-grid-item) {
+    width: 25%;
+  }
 }
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 1-2-4up Grid
+  */
 }
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+@media all and (min-width: 768px) {
+  .cre8-c-grid--1-4up > ::slotted(cre8-grid-item) {
+    width: 25%;
+  }
 }
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 4up Grid
+  */
 }
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+@media all and (min-width: 560px) {
+  .cre8-c-grid--4up > ::slotted(cre8-grid-item) {
+    width: 50%;
+  }
 }
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+@media all and (min-width: 768px) {
+  .cre8-c-grid--4up > ::slotted(cre8-grid-item) {
+    width: 33.3333%;
+  }
 }
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+@media all and (min-width: 960px) {
+  .cre8-c-grid--4up > ::slotted(cre8-grid-item) {
+    width: 25%;
+  }
 }
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
+::slotted(cre8-grid-item) {
+  /**
+  * Slotted grid item within 4up Grid
+  */
 }
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+.cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {
+  width: 50%;
 }
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+@media all and (min-width: 960px) {
+  .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {
+    width: 25%;
+  }
 }
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+@media all and (min-width: 1200px) {
+  .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {
+    width: 16.66%;
+  }
+}`;var f=Object.defineProperty,n=(s,e,l,w)=>{for(var i=void 0,r=s.length-1,g;r>=0;r--)(g=s[r])&&(i=g(e,l,i)||i);return i&&f(e,l,i),i};const o=class o extends h{render(){const e=this.componentClassNames("cre8-c-grid",{"cre8-c-grid--side-by-side":this.variant==="side-by-side","cre8-c-grid--2up":this.variant==="2up","cre8-c-grid--3up":this.variant==="3up","cre8-c-grid--1-3up":this.variant==="1-3up","cre8-c-grid--4up":this.variant==="4up","cre8-c-grid--1-4up":this.variant==="1-4up","cre8-c-grid--1-2-4up":this.variant==="1-2-4up","cre8-c-grid--2-4-6up":this.variant==="2-4-6up","cre8-c-grid--gap-none":this.gap==="none","cre8-c-grid--gap-sm":this.gap==="sm","cre8-c-grid--gap-lg":this.gap==="lg","cre8-c-grid--break-faster":this.break==="faster","cre8-c-grid--break-slower":this.break==="slower"});return c`
+      <div class="${e}">
+        <slot></slot>
+      </div>
+    `}};o.styles=[u];let t=o;n([d()],t.prototype,"variant");n([d()],t.prototype,"gap");n([d()],t.prototype,"break");customElements.get("cre8-grid")===void 0&&customElements.define("cre8-grid",t);const x=p`.cre8-u-content-knockout-brand {
+  color: var(----cre8-color-content-knockout-brand);
 }
 
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+.cre8-u-is-hidden {
+  display: none !important;
+  visibility: hidden !important;
 }
 
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+.cre8-u-is-vishidden {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
 }
 
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
+@media all and (min-width: 23.4375rem) {
+  .cre8-u-hide-sm {
+    display: none !important;
+  }
 }
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+@media all and (min-width: 35rem) {
+  .cre8-u-hide-sm-2 {
+    display: none !important;
+  }
 }
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+@media all and (min-width: 48rem) {
+  .cre8-u-hide-md {
+    display: none !important;
+  }
 }
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+@media all and (min-width: 60rem) {
+  .cre8-u-hide-lg {
+    display: none !important;
+  }
 }
-
+@media all and (min-width: 75rem) {
+  .cre8-u-hide-xl {
+    display: none !important;
+  }
+}
+@media all and (max-width: 23.4375rem) {
+  .cre8-u-show-sm {
+    display: none !important;
+  }
+}
+@media all and (max-width: 35rem) {
+  .cre8-u-show-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (max-width: 48rem) {
+  .cre8-u-show-md {
+    display: none !important;
+  }
+}
+@media all and (max-width: 60rem) {
+  .cre8-u-show-lg {
+    display: none !important;
+  }
+}
+@media all and (max-width: 75rem) {
+  .cre8-u-show-xl {
+    display: none !important;
+  }
+}
+.cre8-u-margin-none {
+  margin: 0 !important;
+}
+
+.cre8-u-margin-sm {
+  margin: size(1) !important;
+}
+
+.cre8-u-margin-md {
+  margin: size(2) !important;
+}
+
+.cre8-u-margin-lg {
+  margin: size(3) !important;
+}
+
+.cre8-u-margin-xl {
+  margin: size(4) !important;
+}
+
+.cre8-u-margin-xxl {
+  margin: size(8) !important;
+}
+
+.cre8-u-margin-top-none {
+  margin-top: 0 !important;
+}
+
+.cre8-u-margin-top-sm {
+  margin-top: size(1) !important;
+}
+
+.cre8-u-margin-top-md {
+  margin-top: size(2) !important;
+}
+
+.cre8-u-margin-top-lg {
+  margin-top: size(3) !important;
+}
+
+.cre8-u-margin-top-xl {
+  margin-top: size(4) !important;
+}
+
+.cre8-u-margin-top-xxl {
+  margin-top: size(8) !important;
+}
+
+.cre8-u-margin-right-none {
+  margin-right: 0 !important;
+}
+
+.cre8-u-margin-right-sm {
+  margin-right: size(1) !important;
+}
+
+.cre8-u-margin-right-md {
+  margin-right: size(2) !important;
+}
+
+.cre8-u-margin-right-lg {
+  margin-right: size(3) !important;
+}
+
+.cre8-u-margin-right-xl {
+  margin-right: size(4) !important;
+}
+
+.cre8-u-margin-right-xxl {
+  margin-right: size(8) !important;
+}
+
+.cre8-u-margin-bottom-none {
+  margin-bottom: 0 !important;
+}
+
+.cre8-u-margin-bottom-sm {
+  margin-bottom: size(1) !important;
+}
+
+.cre8-u-margin-bottom-md {
+  margin-bottom: size(2) !important;
+}
+
+.cre8-u-margin-bottom-lg {
+  margin-bottom: size(3) !important;
+}
+
+.cre8-u-margin-bottom-xl {
+  margin-bottom: size(4) !important;
+}
+
+.cre8-u-margin-bottom-xxl {
+  margin-bottom: size(8) !important;
+}
+
+.cre8-u-margin-bottom-xl-xxl {
+  margin-bottom: size(4) !important;
+}
+
+@media all and (min-width: 768px) {
+  .cre8-u-margin-bottom-xl-xxl {
+    margin-bottom: size(8) !important;
+  }
+}
+.cre8-u-margin-left-none {
+  margin-left: 0 !important;
+}
+
+.cre8-u-margin-left-sm {
+  margin-left: size(1) !important;
+}
+
+.cre8-u-margin-left-md {
+  margin-left: size(2) !important;
+}
+
+.cre8-u-margin-left-lg {
+  margin-left: size(3) !important;
+}
+
+.cre8-u-margin-left-xl {
+  margin-left: size(4) !important;
+}
+
+.cre8-u-margin-left-xxl {
+  margin-left: size(8) !important;
+}
+
+.cre8-u-padding-none {
+  padding: 0 !important;
+}
+
+.cre8-u-padding-sm {
+  padding: size(1) !important;
+}
+
+.cre8-u-padding-md {
+  padding: size(2) !important;
+}
+
+.cre8-u-padding-lg {
+  padding: size(3) !important;
+}
+
+.cre8-u-padding-xl {
+  padding: size(4) !important;
+}
+
+.cre8-u-padding-xxl {
+  padding: size(8) !important;
+}
+
+.cre8-u-padding-top-none {
+  padding-top: 0 !important;
+}
+
+.cre8-u-padding-top-sm {
+  padding-top: size(1) !important;
+}
+
+.cre8-u-padding-top-md {
+  padding-top: size(2) !important;
+}
+
+.cre8-u-padding-top-lg {
+  padding-top: size(3) !important;
+}
+
+.cre8-u-padding-top-xl {
+  padding-top: size(4) !important;
+}
+
+.cre8-u-padding-top-xxl {
+  padding-top: size(8) !important;
+}
+
+.cre8-u-padding-right-none {
+  padding-right: 0 !important;
+}
+
+.cre8-u-padding-right-sm {
+  padding-right: size(1) !important;
+}
+
+.cre8-u-padding-right-md {
+  padding-right: size(2) !important;
+}
+
+.cre8-u-padding-right-lg {
+  padding-right: size(3) !important;
+}
+
+.cre8-u-padding-right-xl {
+  padding-right: size(4) !important;
+}
+
+.cre8-u-padding-right-xxl {
+  padding-right: size(8) !important;
+}
+
+.cre8-u-padding-bottom-none {
+  padding-bottom: 0 !important;
+}
+
+.cre8-u-padding-bottom-sm {
+  padding-bottom: size(1) !important;
+}
+
+.cre8-u-padding-bottom-md {
+  padding-bottom: size(2) !important;
+}
+
+.cre8-u-padding-bottom-lg {
+  padding-bottom: size(3) !important;
+}
+
 .cre8-u-padding-bottom-xl {
   padding-bottom: size(4) !important;
 }
@@ -964,6 +1315,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1136,6 +1491,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1174,355 +1533,12 @@ span.ripple {
  * Visually hidden from display
  */
 /**
- * 1) Grid layout for items like cards, etc.
+ * 1) Item used for the various items within the grid
  */
-.cre8-c-grid {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  margin: -0.75rem;
-}
-
-/**
- * Grid with no gap in between items
- */
-.cre8-c-grid--gap-none {
-  margin: 0;
-}
-
-/**
- * Small gap grid
- * 1) Spacing between grid items is smaller than default
- */
-.cre8-c-grid--gap-sm {
-  margin: -0.25rem;
-}
-
-/**
- * Large gap grid
- * 1) Spacing between grid items is larger than default
- */
-.cre8-c-grid--gap-lg {
-  margin: -1rem;
-}
-
-/**
- * Side by Side Grid
- * 1) Grid that stays 2 items per row on all screen sizes
- */
-.cre8-c-grid--side-by-side {
-  flex-direction: row;
-}
-
-/**
- * 2up grid
- * 1) Stacked items on small screens to 2 items per row on medium/large screens
- */
-@media all and (min-width: 768px) {
-  .cre8-c-grid--2up {
-    flex-direction: row;
-  }
-}
-.cre8-c-grid--2up {
-  /**
-  * 2up grid that breaks faster
-  * 1) Grid that breaks from 1 to 2up at a smaller viewport than the default
-  */
-}
-@media all and (min-width: 560px) {
-  .cre8-c-grid--2up.cre8-c-grid--break-faster {
-    flex-direction: row;
-  }
-}
-.cre8-c-grid--2up {
-  /**
-  * 2up grid that breaks slower
-  * 1) Grid that breaks from 1 to 2up at a larger viewport than the default
-  */
-}
-@media all and (min-width: 768px) {
-  .cre8-c-grid--2up.cre8-c-grid--break-slower {
-    flex-direction: column;
-  }
-}
-@media all and (min-width: 1400px) {
-  .cre8-c-grid--2up.cre8-c-grid--break-slower {
-    flex-direction: row;
-  }
-}
-
-/**
- * 3up grid
- * 1) Stacked items on small screens to 3 items per row on medium/large screens
- */
-@media all and (min-width: 768px) {
-  .cre8-c-grid--3up {
-    flex-direction: row;
-  }
-}
-
-/**
- * 1 to 3up grid
- * 1) Stacked items on small screens to 3 items per row on medium/large screens
- */
-@media all and (min-width: 960px) {
-  .cre8-c-grid--1-3up {
-    flex-direction: row;
-  }
-}
-.cre8-c-grid--1-3up {
-  /**
-  * 1 to 3 up grid that breaks faster
-  * 1) Grid that breaks from 1 to 3up at a smaller viewport than the default
-  */
-}
-@media all and (min-width: 768px) {
-  .cre8-c-grid--1-3up.cre8-c-grid--break-faster {
-    flex-direction: row;
-  }
-}
-.cre8-c-grid--1-3up {
-  /**
-  * 1 to 3up grid that breaks slower
-  * 1) Grid that breaks from 1 to 3up at a larger viewport than the default
-  */
-}
-@media all and (min-width: 960px) {
-  .cre8-c-grid--1-3up.cre8-c-grid--break-slower {
-    flex-direction: column;
-  }
-}
-@media all and (min-width: 1200px) {
-  .cre8-c-grid--1-3up.cre8-c-grid--break-slower {
-    flex-direction: row;
-  }
-}
-
-/**
- * 1 to 2 to 4up grid
- * 1) Stacked items on small screens to 2 items per row on medium screens to 4 items per row on large screens
- */
-@media all and (min-width: 560px) {
-  .cre8-c-grid--1-2-4up {
-    flex-direction: row;
-  }
-}
-
-/**
- * 1 to 4up grid
- * 1) Stacked items on small screens to 4 items per row on medium/large screens
- */
-@media all and (min-width: 768px) {
-  .cre8-c-grid--1-4up {
-    flex-direction: row;
-  }
-}
-
-/**
- * 1 to 2 to 4up grid
- * 1) Stacked items on small screens to 2 items per row on small/medium screens to
- * 3 items per row on medium screens and 4 items per row on large screens
- */
-@media all and (min-width: 560px) {
-  .cre8-c-grid--4up {
-    flex-direction: row;
-  }
-}
-
-/**
-  * Slotted grid item within 4up Grid
-  */
-.cre8-c-grid--2-4-6up {
-  flex-direction: row;
-}
-
-/**
- * Slotted grid item
- */
-::slotted(cre8-grid-item) {
-  display: block;
-  padding: 0.75rem;
-  /**
-  * Slotted grid item within grid with no gap between items
-  */
-}
-.cre8-c-grid--gap-none > ::slotted(cre8-grid-item) {
-  padding: 0;
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within grid with small gap between items
-  */
-}
-.cre8-c-grid--gap-sm > ::slotted(cre8-grid-item) {
-  padding: 0.25rem;
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within grid with large gap between items
-  */
-}
-.cre8-c-grid--gap-lg > ::slotted(cre8-grid-item) {
-  padding: 1rem;
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within side by side grid
-  * 1) Grid that stays 2 items per row on all screen sizes
-  */
-}
-.cre8-c-grid--side-by-side > ::slotted(cre8-grid-item) {
-  width: 50%;
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within 2up Grid
-  */
-}
-@media all and (min-width: 768px) {
-  .cre8-c-grid--2up > ::slotted(cre8-grid-item) {
-    width: 50%;
-  }
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within 2up break faster (small to large screens) Grid
-  */
-}
-@media all and (min-width: 560px) {
-  .cre8-c-grid--2up.cre8-c-grid--break-faster > ::slotted(cre8-grid-item) {
-    width: 50%;
-  }
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within 2up break slower (small to large screens) Grid
-  */
-}
-@media all and (min-width: 768px) {
-  .cre8-c-grid--2up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {
-    width: 100%;
-  }
-}
-@media all and (min-width: 1400px) {
-  .cre8-c-grid--2up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {
-    width: 50%;
-  }
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within 3up Grid
-  */
-}
-@media all and (min-width: 768px) {
-  .cre8-c-grid--3up > ::slotted(cre8-grid-item) {
-    width: 50%;
-  }
-}
-@media all and (min-width: 960px) {
-  .cre8-c-grid--3up > ::slotted(cre8-grid-item) {
-    width: 33.3333%;
-  }
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within 1-3up Grid
-  */
-}
-@media all and (min-width: 960px) {
-  .cre8-c-grid--1-3up > ::slotted(cre8-grid-item) {
-    width: 33.3333%;
-  }
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within 1 to 3up break faster (small to large screens) grid
-  */
-}
-@media all and (min-width: 768px) {
-  .cre8-c-grid--1-3up.cre8-c-grid--break-faster > ::slotted(cre8-grid-item) {
-    width: 33.33%;
-  }
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within 2up break slower (small to large screens) Grid
-  */
-}
-@media all and (min-width: 960px) {
-  .cre8-c-grid--1-3up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {
-    width: 100%;
-  }
-}
-@media all and (min-width: 1200px) {
-  .cre8-c-grid--1-3up.cre8-c-grid--break-slower > ::slotted(cre8-grid-item) {
-    width: 33.33%;
-  }
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within 1-2-4up Grid
-  */
-}
-@media all and (min-width: 560px) {
-  .cre8-c-grid--1-2-4up > ::slotted(cre8-grid-item) {
-    width: 50%;
-  }
-}
-@media all and (min-width: 960px) {
-  .cre8-c-grid--1-2-4up > ::slotted(cre8-grid-item) {
-    width: 25%;
-  }
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within 1-2-4up Grid
-  */
-}
-@media all and (min-width: 768px) {
-  .cre8-c-grid--1-4up > ::slotted(cre8-grid-item) {
-    width: 25%;
-  }
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within 4up Grid
-  */
-}
-@media all and (min-width: 560px) {
-  .cre8-c-grid--4up > ::slotted(cre8-grid-item) {
-    width: 50%;
-  }
-}
-@media all and (min-width: 768px) {
-  .cre8-c-grid--4up > ::slotted(cre8-grid-item) {
-    width: 33.3333%;
-  }
-}
-@media all and (min-width: 960px) {
-  .cre8-c-grid--4up > ::slotted(cre8-grid-item) {
-    width: 25%;
-  }
-}
-::slotted(cre8-grid-item) {
-  /**
-  * Slotted grid item within 4up Grid
-  */
-}
-.cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {
-  width: 50%;
-}
-@media all and (min-width: 960px) {
-  .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {
-    width: 25%;
-  }
-}
-@media all and (min-width: 1200px) {
-  .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {
-    width: 16.66%;
-  }
-}`;var x=Object.defineProperty,n=(s,e,l,w)=>{for(var i=void 0,r=s.length-1,p;r>=0;r--)(p=s[r])&&(i=p(e,l,i)||i);return i&&x(e,l,i),i};const m=class m extends h{render(){const e=this.componentClassNames("cre8-c-grid",{"cre8-c-grid--side-by-side":this.variant==="side-by-side","cre8-c-grid--2up":this.variant==="2up","cre8-c-grid--3up":this.variant==="3up","cre8-c-grid--1-3up":this.variant==="1-3up","cre8-c-grid--4up":this.variant==="4up","cre8-c-grid--1-4up":this.variant==="1-4up","cre8-c-grid--1-2-4up":this.variant==="1-2-4up","cre8-c-grid--2-4-6up":this.variant==="2-4-6up","cre8-c-grid--gap-none":this.gap==="none","cre8-c-grid--gap-sm":this.gap==="sm","cre8-c-grid--gap-lg":this.gap==="lg","cre8-c-grid--break-faster":this.break==="faster","cre8-c-grid--break-slower":this.break==="slower"});return c`
+.cre8-c-grid__item {
+  height: 100%;
+}`,m=class m extends h{render(){const e=this.componentClassNames("cre8-c-grid__item",{});return c`
       <div class="${e}">
         <slot></slot>
       </div>
-    `}};m.styles=[f];let t=m;n([d()],t.prototype,"variant");n([d()],t.prototype,"gap");n([d()],t.prototype,"break");customElements.get("cre8-grid")===void 0&&customElements.define("cre8-grid",t);
+    `}};m.styles=[x];let a=m;customElements.get("cre8-grid-item")===void 0&&customElements.define("cre8-grid-item",a);