@greese/ui 0.0.0-stage → 1.1.0

package/dist/css/Grid.css

@@ -0,0 +1,998 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Grid {
+    min-inline-size: 0;
+  }
+  .greese-Grid--container {
+    display: grid;
+  }
+  .greese-Grid--queries {
+    container-type: inline-size;
+  }
+  .greese-Grid--xs-columns {
+    grid-template-columns: var(--greese-grid-columns-xs);
+  }
+  .greese-Grid--xs-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .greese-Grid--xs-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .greese-Grid--xs-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .greese-Grid--xs-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .greese-Grid--xs-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .greese-Grid--xs-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .greese-Grid--xs-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .greese-Grid--xs-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .greese-Grid--xs-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .greese-Grid--xs-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .greese-Grid--xs-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .greese-Grid--xs-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  @media (width >= 600px) {
+    .greese-Grid--sm-columns {
+      grid-template-columns: var(--greese-grid-columns-sm);
+    }
+    .greese-Grid--sm-columns-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+    .greese-Grid--sm-columns-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .greese-Grid--sm-columns-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .greese-Grid--sm-columns-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    .greese-Grid--sm-columns-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+    .greese-Grid--sm-columns-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+    .greese-Grid--sm-columns-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+    .greese-Grid--sm-columns-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+    .greese-Grid--sm-columns-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+    .greese-Grid--sm-columns-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+    .greese-Grid--sm-columns-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+    .greese-Grid--sm-columns-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Grid--md-columns {
+      grid-template-columns: var(--greese-grid-columns-md);
+    }
+    .greese-Grid--md-columns-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+    .greese-Grid--md-columns-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .greese-Grid--md-columns-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .greese-Grid--md-columns-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    .greese-Grid--md-columns-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+    .greese-Grid--md-columns-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+    .greese-Grid--md-columns-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+    .greese-Grid--md-columns-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+    .greese-Grid--md-columns-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+    .greese-Grid--md-columns-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+    .greese-Grid--md-columns-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+    .greese-Grid--md-columns-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Grid--lg-columns {
+      grid-template-columns: var(--greese-grid-columns-lg);
+    }
+    .greese-Grid--lg-columns-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+    .greese-Grid--lg-columns-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .greese-Grid--lg-columns-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .greese-Grid--lg-columns-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    .greese-Grid--lg-columns-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+    .greese-Grid--lg-columns-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+    .greese-Grid--lg-columns-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+    .greese-Grid--lg-columns-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+    .greese-Grid--lg-columns-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+    .greese-Grid--lg-columns-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+    .greese-Grid--lg-columns-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+    .greese-Grid--lg-columns-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Grid--xl-columns {
+      grid-template-columns: var(--greese-grid-columns-xl);
+    }
+    .greese-Grid--xl-columns-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+    .greese-Grid--xl-columns-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .greese-Grid--xl-columns-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .greese-Grid--xl-columns-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    .greese-Grid--xl-columns-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+    .greese-Grid--xl-columns-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+    .greese-Grid--xl-columns-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+    .greese-Grid--xl-columns-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+    .greese-Grid--xl-columns-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+    .greese-Grid--xl-columns-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+    .greese-Grid--xl-columns-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+    .greese-Grid--xl-columns-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+  }
+  .greese-Grid--xs-min-child {
+    grid-template-columns: repeat(auto-fill, minmax(min(var(--greese-grid-min-child-xs), 100%), 1fr));
+  }
+  @media (width >= 600px) {
+    .greese-Grid--sm-min-child {
+      grid-template-columns: repeat(auto-fill, minmax(min(var(--greese-grid-min-child-sm), 100%), 1fr));
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Grid--md-min-child {
+      grid-template-columns: repeat(auto-fill, minmax(min(var(--greese-grid-min-child-md), 100%), 1fr));
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Grid--lg-min-child {
+      grid-template-columns: repeat(auto-fill, minmax(min(var(--greese-grid-min-child-lg), 100%), 1fr));
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Grid--xl-min-child {
+      grid-template-columns: repeat(auto-fill, minmax(min(var(--greese-grid-min-child-xl), 100%), 1fr));
+    }
+  }
+  .greese-Grid--xs-gap {
+    gap: var(--greese-grid-gap-xs);
+  }
+  .greese-Grid--xs-gap-0 {
+    gap: var(--greese-space-0);
+  }
+  .greese-Grid--xs-gap-1 {
+    gap: var(--greese-space-1);
+  }
+  .greese-Grid--xs-gap-2 {
+    gap: var(--greese-space-2);
+  }
+  .greese-Grid--xs-gap-3 {
+    gap: var(--greese-space-3);
+  }
+  .greese-Grid--xs-gap-4 {
+    gap: var(--greese-space-4);
+  }
+  .greese-Grid--xs-gap-5 {
+    gap: var(--greese-space-5);
+  }
+  .greese-Grid--xs-gap-6 {
+    gap: var(--greese-space-6);
+  }
+  .greese-Grid--xs-gap-7 {
+    gap: var(--greese-space-7);
+  }
+  .greese-Grid--xs-gap-8 {
+    gap: var(--greese-space-8);
+  }
+  @media (width >= 600px) {
+    .greese-Grid--sm-gap {
+      gap: var(--greese-grid-gap-sm);
+    }
+    .greese-Grid--sm-gap-0 {
+      gap: var(--greese-space-0);
+    }
+    .greese-Grid--sm-gap-1 {
+      gap: var(--greese-space-1);
+    }
+    .greese-Grid--sm-gap-2 {
+      gap: var(--greese-space-2);
+    }
+    .greese-Grid--sm-gap-3 {
+      gap: var(--greese-space-3);
+    }
+    .greese-Grid--sm-gap-4 {
+      gap: var(--greese-space-4);
+    }
+    .greese-Grid--sm-gap-5 {
+      gap: var(--greese-space-5);
+    }
+    .greese-Grid--sm-gap-6 {
+      gap: var(--greese-space-6);
+    }
+    .greese-Grid--sm-gap-7 {
+      gap: var(--greese-space-7);
+    }
+    .greese-Grid--sm-gap-8 {
+      gap: var(--greese-space-8);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Grid--md-gap {
+      gap: var(--greese-grid-gap-md);
+    }
+    .greese-Grid--md-gap-0 {
+      gap: var(--greese-space-0);
+    }
+    .greese-Grid--md-gap-1 {
+      gap: var(--greese-space-1);
+    }
+    .greese-Grid--md-gap-2 {
+      gap: var(--greese-space-2);
+    }
+    .greese-Grid--md-gap-3 {
+      gap: var(--greese-space-3);
+    }
+    .greese-Grid--md-gap-4 {
+      gap: var(--greese-space-4);
+    }
+    .greese-Grid--md-gap-5 {
+      gap: var(--greese-space-5);
+    }
+    .greese-Grid--md-gap-6 {
+      gap: var(--greese-space-6);
+    }
+    .greese-Grid--md-gap-7 {
+      gap: var(--greese-space-7);
+    }
+    .greese-Grid--md-gap-8 {
+      gap: var(--greese-space-8);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Grid--lg-gap {
+      gap: var(--greese-grid-gap-lg);
+    }
+    .greese-Grid--lg-gap-0 {
+      gap: var(--greese-space-0);
+    }
+    .greese-Grid--lg-gap-1 {
+      gap: var(--greese-space-1);
+    }
+    .greese-Grid--lg-gap-2 {
+      gap: var(--greese-space-2);
+    }
+    .greese-Grid--lg-gap-3 {
+      gap: var(--greese-space-3);
+    }
+    .greese-Grid--lg-gap-4 {
+      gap: var(--greese-space-4);
+    }
+    .greese-Grid--lg-gap-5 {
+      gap: var(--greese-space-5);
+    }
+    .greese-Grid--lg-gap-6 {
+      gap: var(--greese-space-6);
+    }
+    .greese-Grid--lg-gap-7 {
+      gap: var(--greese-space-7);
+    }
+    .greese-Grid--lg-gap-8 {
+      gap: var(--greese-space-8);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Grid--xl-gap {
+      gap: var(--greese-grid-gap-xl);
+    }
+    .greese-Grid--xl-gap-0 {
+      gap: var(--greese-space-0);
+    }
+    .greese-Grid--xl-gap-1 {
+      gap: var(--greese-space-1);
+    }
+    .greese-Grid--xl-gap-2 {
+      gap: var(--greese-space-2);
+    }
+    .greese-Grid--xl-gap-3 {
+      gap: var(--greese-space-3);
+    }
+    .greese-Grid--xl-gap-4 {
+      gap: var(--greese-space-4);
+    }
+    .greese-Grid--xl-gap-5 {
+      gap: var(--greese-space-5);
+    }
+    .greese-Grid--xl-gap-6 {
+      gap: var(--greese-space-6);
+    }
+    .greese-Grid--xl-gap-7 {
+      gap: var(--greese-space-7);
+    }
+    .greese-Grid--xl-gap-8 {
+      gap: var(--greese-space-8);
+    }
+  }
+  .greese-Grid--xs-align {
+    align-items: var(--greese-grid-align-xs);
+  }
+  .greese-Grid--xs-align-start {
+    align-items: start;
+  }
+  .greese-Grid--xs-align-center {
+    align-items: center;
+  }
+  .greese-Grid--xs-align-end {
+    align-items: end;
+  }
+  .greese-Grid--xs-align-stretch {
+    align-items: stretch;
+  }
+  @media (width >= 600px) {
+    .greese-Grid--sm-align {
+      align-items: var(--greese-grid-align-sm);
+    }
+    .greese-Grid--sm-align-start {
+      align-items: start;
+    }
+    .greese-Grid--sm-align-center {
+      align-items: center;
+    }
+    .greese-Grid--sm-align-end {
+      align-items: end;
+    }
+    .greese-Grid--sm-align-stretch {
+      align-items: stretch;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Grid--md-align {
+      align-items: var(--greese-grid-align-md);
+    }
+    .greese-Grid--md-align-start {
+      align-items: start;
+    }
+    .greese-Grid--md-align-center {
+      align-items: center;
+    }
+    .greese-Grid--md-align-end {
+      align-items: end;
+    }
+    .greese-Grid--md-align-stretch {
+      align-items: stretch;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Grid--lg-align {
+      align-items: var(--greese-grid-align-lg);
+    }
+    .greese-Grid--lg-align-start {
+      align-items: start;
+    }
+    .greese-Grid--lg-align-center {
+      align-items: center;
+    }
+    .greese-Grid--lg-align-end {
+      align-items: end;
+    }
+    .greese-Grid--lg-align-stretch {
+      align-items: stretch;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Grid--xl-align {
+      align-items: var(--greese-grid-align-xl);
+    }
+    .greese-Grid--xl-align-start {
+      align-items: start;
+    }
+    .greese-Grid--xl-align-center {
+      align-items: center;
+    }
+    .greese-Grid--xl-align-end {
+      align-items: end;
+    }
+    .greese-Grid--xl-align-stretch {
+      align-items: stretch;
+    }
+  }
+  .greese-Grid--xs-justify {
+    justify-items: var(--greese-grid-justify-xs);
+  }
+  .greese-Grid--xs-justify-start {
+    justify-items: start;
+  }
+  .greese-Grid--xs-justify-center {
+    justify-items: center;
+  }
+  .greese-Grid--xs-justify-end {
+    justify-items: end;
+  }
+  .greese-Grid--xs-justify-stretch {
+    justify-items: stretch;
+  }
+  @media (width >= 600px) {
+    .greese-Grid--sm-justify {
+      justify-items: var(--greese-grid-justify-sm);
+    }
+    .greese-Grid--sm-justify-start {
+      justify-items: start;
+    }
+    .greese-Grid--sm-justify-center {
+      justify-items: center;
+    }
+    .greese-Grid--sm-justify-end {
+      justify-items: end;
+    }
+    .greese-Grid--sm-justify-stretch {
+      justify-items: stretch;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Grid--md-justify {
+      justify-items: var(--greese-grid-justify-md);
+    }
+    .greese-Grid--md-justify-start {
+      justify-items: start;
+    }
+    .greese-Grid--md-justify-center {
+      justify-items: center;
+    }
+    .greese-Grid--md-justify-end {
+      justify-items: end;
+    }
+    .greese-Grid--md-justify-stretch {
+      justify-items: stretch;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Grid--lg-justify {
+      justify-items: var(--greese-grid-justify-lg);
+    }
+    .greese-Grid--lg-justify-start {
+      justify-items: start;
+    }
+    .greese-Grid--lg-justify-center {
+      justify-items: center;
+    }
+    .greese-Grid--lg-justify-end {
+      justify-items: end;
+    }
+    .greese-Grid--lg-justify-stretch {
+      justify-items: stretch;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Grid--xl-justify {
+      justify-items: var(--greese-grid-justify-xl);
+    }
+    .greese-Grid--xl-justify-start {
+      justify-items: start;
+    }
+    .greese-Grid--xl-justify-center {
+      justify-items: center;
+    }
+    .greese-Grid--xl-justify-end {
+      justify-items: end;
+    }
+    .greese-Grid--xl-justify-stretch {
+      justify-items: stretch;
+    }
+  }
+  .greese-Grid--xs-size {
+    grid-column: var(--greese-grid-size-xs);
+  }
+  .greese-Grid--xs-size-full {
+    grid-column: 1 / -1;
+  }
+  .greese-Grid--xs-size-1 {
+    grid-column: span 1/span 1;
+  }
+  .greese-Grid--xs-size-2 {
+    grid-column: span 2/span 2;
+  }
+  .greese-Grid--xs-size-3 {
+    grid-column: span 3/span 3;
+  }
+  .greese-Grid--xs-size-4 {
+    grid-column: span 4/span 4;
+  }
+  .greese-Grid--xs-size-5 {
+    grid-column: span 5/span 5;
+  }
+  .greese-Grid--xs-size-6 {
+    grid-column: span 6/span 6;
+  }
+  .greese-Grid--xs-size-7 {
+    grid-column: span 7/span 7;
+  }
+  .greese-Grid--xs-size-8 {
+    grid-column: span 8/span 8;
+  }
+  .greese-Grid--xs-size-9 {
+    grid-column: span 9/span 9;
+  }
+  .greese-Grid--xs-size-10 {
+    grid-column: span 10/span 10;
+  }
+  .greese-Grid--xs-size-11 {
+    grid-column: span 11/span 11;
+  }
+  .greese-Grid--xs-size-12 {
+    grid-column: span 12/span 12;
+  }
+  @media (width >= 600px) {
+    .greese-Grid--sm-size {
+      grid-column: var(--greese-grid-size-sm);
+    }
+    .greese-Grid--sm-size-full {
+      grid-column: 1 / -1;
+    }
+    .greese-Grid--sm-size-1 {
+      grid-column: span 1/span 1;
+    }
+    .greese-Grid--sm-size-2 {
+      grid-column: span 2/span 2;
+    }
+    .greese-Grid--sm-size-3 {
+      grid-column: span 3/span 3;
+    }
+    .greese-Grid--sm-size-4 {
+      grid-column: span 4/span 4;
+    }
+    .greese-Grid--sm-size-5 {
+      grid-column: span 5/span 5;
+    }
+    .greese-Grid--sm-size-6 {
+      grid-column: span 6/span 6;
+    }
+    .greese-Grid--sm-size-7 {
+      grid-column: span 7/span 7;
+    }
+    .greese-Grid--sm-size-8 {
+      grid-column: span 8/span 8;
+    }
+    .greese-Grid--sm-size-9 {
+      grid-column: span 9/span 9;
+    }
+    .greese-Grid--sm-size-10 {
+      grid-column: span 10/span 10;
+    }
+    .greese-Grid--sm-size-11 {
+      grid-column: span 11/span 11;
+    }
+    .greese-Grid--sm-size-12 {
+      grid-column: span 12/span 12;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Grid--md-size {
+      grid-column: var(--greese-grid-size-md);
+    }
+    .greese-Grid--md-size-full {
+      grid-column: 1 / -1;
+    }
+    .greese-Grid--md-size-1 {
+      grid-column: span 1/span 1;
+    }
+    .greese-Grid--md-size-2 {
+      grid-column: span 2/span 2;
+    }
+    .greese-Grid--md-size-3 {
+      grid-column: span 3/span 3;
+    }
+    .greese-Grid--md-size-4 {
+      grid-column: span 4/span 4;
+    }
+    .greese-Grid--md-size-5 {
+      grid-column: span 5/span 5;
+    }
+    .greese-Grid--md-size-6 {
+      grid-column: span 6/span 6;
+    }
+    .greese-Grid--md-size-7 {
+      grid-column: span 7/span 7;
+    }
+    .greese-Grid--md-size-8 {
+      grid-column: span 8/span 8;
+    }
+    .greese-Grid--md-size-9 {
+      grid-column: span 9/span 9;
+    }
+    .greese-Grid--md-size-10 {
+      grid-column: span 10/span 10;
+    }
+    .greese-Grid--md-size-11 {
+      grid-column: span 11/span 11;
+    }
+    .greese-Grid--md-size-12 {
+      grid-column: span 12/span 12;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Grid--lg-size {
+      grid-column: var(--greese-grid-size-lg);
+    }
+    .greese-Grid--lg-size-full {
+      grid-column: 1 / -1;
+    }
+    .greese-Grid--lg-size-1 {
+      grid-column: span 1/span 1;
+    }
+    .greese-Grid--lg-size-2 {
+      grid-column: span 2/span 2;
+    }
+    .greese-Grid--lg-size-3 {
+      grid-column: span 3/span 3;
+    }
+    .greese-Grid--lg-size-4 {
+      grid-column: span 4/span 4;
+    }
+    .greese-Grid--lg-size-5 {
+      grid-column: span 5/span 5;
+    }
+    .greese-Grid--lg-size-6 {
+      grid-column: span 6/span 6;
+    }
+    .greese-Grid--lg-size-7 {
+      grid-column: span 7/span 7;
+    }
+    .greese-Grid--lg-size-8 {
+      grid-column: span 8/span 8;
+    }
+    .greese-Grid--lg-size-9 {
+      grid-column: span 9/span 9;
+    }
+    .greese-Grid--lg-size-10 {
+      grid-column: span 10/span 10;
+    }
+    .greese-Grid--lg-size-11 {
+      grid-column: span 11/span 11;
+    }
+    .greese-Grid--lg-size-12 {
+      grid-column: span 12/span 12;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Grid--xl-size {
+      grid-column: var(--greese-grid-size-xl);
+    }
+    .greese-Grid--xl-size-full {
+      grid-column: 1 / -1;
+    }
+    .greese-Grid--xl-size-1 {
+      grid-column: span 1/span 1;
+    }
+    .greese-Grid--xl-size-2 {
+      grid-column: span 2/span 2;
+    }
+    .greese-Grid--xl-size-3 {
+      grid-column: span 3/span 3;
+    }
+    .greese-Grid--xl-size-4 {
+      grid-column: span 4/span 4;
+    }
+    .greese-Grid--xl-size-5 {
+      grid-column: span 5/span 5;
+    }
+    .greese-Grid--xl-size-6 {
+      grid-column: span 6/span 6;
+    }
+    .greese-Grid--xl-size-7 {
+      grid-column: span 7/span 7;
+    }
+    .greese-Grid--xl-size-8 {
+      grid-column: span 8/span 8;
+    }
+    .greese-Grid--xl-size-9 {
+      grid-column: span 9/span 9;
+    }
+    .greese-Grid--xl-size-10 {
+      grid-column: span 10/span 10;
+    }
+    .greese-Grid--xl-size-11 {
+      grid-column: span 11/span 11;
+    }
+    .greese-Grid--xl-size-12 {
+      grid-column: span 12/span 12;
+    }
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size {
+    grid-column: var(--greese-grid-size-xs);
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-full {
+    grid-column: 1 / -1;
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-1 {
+    grid-column: span 1/span 1;
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-2 {
+    grid-column: span 2/span 2;
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-3 {
+    grid-column: span 3/span 3;
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-4 {
+    grid-column: span 4/span 4;
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-5 {
+    grid-column: span 5/span 5;
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-6 {
+    grid-column: span 6/span 6;
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-7 {
+    grid-column: span 7/span 7;
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-8 {
+    grid-column: span 8/span 8;
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-9 {
+    grid-column: span 9/span 9;
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-10 {
+    grid-column: span 10/span 10;
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-11 {
+    grid-column: span 11/span 11;
+  }
+  .greese-Grid--queries > .greese-Grid--xs-size-12 {
+    grid-column: span 12/span 12;
+  }
+  @container (width >= 600px) {
+    .greese-Grid--queries > .greese-Grid--sm-size {
+      grid-column: var(--greese-grid-size-sm);
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-full {
+      grid-column: 1 / -1;
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-1 {
+      grid-column: span 1/span 1;
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-2 {
+      grid-column: span 2/span 2;
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-3 {
+      grid-column: span 3/span 3;
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-4 {
+      grid-column: span 4/span 4;
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-5 {
+      grid-column: span 5/span 5;
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-6 {
+      grid-column: span 6/span 6;
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-7 {
+      grid-column: span 7/span 7;
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-8 {
+      grid-column: span 8/span 8;
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-9 {
+      grid-column: span 9/span 9;
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-10 {
+      grid-column: span 10/span 10;
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-11 {
+      grid-column: span 11/span 11;
+    }
+    .greese-Grid--queries > .greese-Grid--sm-size-12 {
+      grid-column: span 12/span 12;
+    }
+  }
+  @container (width >= 900px) {
+    .greese-Grid--queries > .greese-Grid--md-size {
+      grid-column: var(--greese-grid-size-md);
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-full {
+      grid-column: 1 / -1;
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-1 {
+      grid-column: span 1/span 1;
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-2 {
+      grid-column: span 2/span 2;
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-3 {
+      grid-column: span 3/span 3;
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-4 {
+      grid-column: span 4/span 4;
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-5 {
+      grid-column: span 5/span 5;
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-6 {
+      grid-column: span 6/span 6;
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-7 {
+      grid-column: span 7/span 7;
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-8 {
+      grid-column: span 8/span 8;
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-9 {
+      grid-column: span 9/span 9;
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-10 {
+      grid-column: span 10/span 10;
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-11 {
+      grid-column: span 11/span 11;
+    }
+    .greese-Grid--queries > .greese-Grid--md-size-12 {
+      grid-column: span 12/span 12;
+    }
+  }
+  @container (width >= 1200px) {
+    .greese-Grid--queries > .greese-Grid--lg-size {
+      grid-column: var(--greese-grid-size-lg);
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-full {
+      grid-column: 1 / -1;
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-1 {
+      grid-column: span 1/span 1;
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-2 {
+      grid-column: span 2/span 2;
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-3 {
+      grid-column: span 3/span 3;
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-4 {
+      grid-column: span 4/span 4;
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-5 {
+      grid-column: span 5/span 5;
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-6 {
+      grid-column: span 6/span 6;
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-7 {
+      grid-column: span 7/span 7;
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-8 {
+      grid-column: span 8/span 8;
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-9 {
+      grid-column: span 9/span 9;
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-10 {
+      grid-column: span 10/span 10;
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-11 {
+      grid-column: span 11/span 11;
+    }
+    .greese-Grid--queries > .greese-Grid--lg-size-12 {
+      grid-column: span 12/span 12;
+    }
+  }
+  @container (width >= 1536px) {
+    .greese-Grid--queries > .greese-Grid--xl-size {
+      grid-column: var(--greese-grid-size-xl);
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-full {
+      grid-column: 1 / -1;
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-1 {
+      grid-column: span 1/span 1;
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-2 {
+      grid-column: span 2/span 2;
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-3 {
+      grid-column: span 3/span 3;
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-4 {
+      grid-column: span 4/span 4;
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-5 {
+      grid-column: span 5/span 5;
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-6 {
+      grid-column: span 6/span 6;
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-7 {
+      grid-column: span 7/span 7;
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-8 {
+      grid-column: span 8/span 8;
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-9 {
+      grid-column: span 9/span 9;
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-10 {
+      grid-column: span 10/span 10;
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-11 {
+      grid-column: span 11/span 11;
+    }
+    .greese-Grid--queries > .greese-Grid--xl-size-12 {
+      grid-column: span 12/span 12;
+    }
+  }
+}