/*
  Grid
*/

.u-grid,
.u-grid-2,
.u-grid-3,
.u-grid-4,
.u-grid-5,
.u-grid-6,
.u-grid-7,
.u-grid-8,
.u-grid-9,
.u-grid-10,
.u-grid-11,
.u-grid-12 {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(var(--grid-columns, 12), 1fr)
}

:where(.u-grid, .u-grid-2, .u-grid-3, .u-grid-4, .u-grid-5, .u-grid-6, .u-grid-7, .u-grid-8, .u-grid-9, .u-grid-10, .u-grid-11, .u-grid-12) {
  gap: var(--space-m);
}

.u-grid-11 { --grid-columns: 11; }
.u-grid-10 { --grid-columns: 10; }
.u-grid-9  { --grid-columns: 9; }
.u-grid-8  { --grid-columns: 8; }
.u-grid-7  { --grid-columns: 7; }
.u-grid-6  { --grid-columns: 6; }
.u-grid-5  { --grid-columns: 5; }
.u-grid-4  { --grid-columns: 4; }
.u-grid-3  { --grid-columns: 3; }
.u-grid-2  { --grid-columns: 2; }


/* Start columns */
.u-grid-start-2  {grid-column-start: 2;}
.u-grid-start-3  {grid-column-start: 3;}
.u-grid-start-4  {grid-column-start: 4;}
.u-grid-start-5  {grid-column-start: 5;}
.u-grid-start-6  {grid-column-start: 6;}
.u-grid-start-7  {grid-column-start: 7;}
.u-grid-start-8  {grid-column-start: 8;}
.u-grid-start-9  {grid-column-start: 9;}
.u-grid-start-10 {grid-column-start: 10;}
.u-grid-start-11 {grid-column-start: 11;}


/* Span columns */
.u-grid-span-2  { grid-column: span 2; }
.u-grid-span-3  { grid-column: span 3; }
.u-grid-span-4  { grid-column: span 4; }
.u-grid-span-5  { grid-column: span 5; }
.u-grid-span-6  { grid-column: span 6; }
.u-grid-span-7  { grid-column: span 7; }
.u-grid-span-8  { grid-column: span 8; }
.u-grid-span-9  { grid-column: span 9; }
.u-grid-span-10 { grid-column: span 10; }
.u-grid-span-11 { grid-column: span 11; }


/* Gap between columns */
.u-gap-xxl  { gap: var(--space-2xl); }
.u-gap-xl   { gap: var(--space-xl); }
.u-gap-l    { gap: var(--space-l); }
.u-gap-m    { gap: var(--space-m); }
.u-gap-s    { gap: var(--space-s); }
.u-gap-none { gap: 0; }

/* Align Items*/

.u-gridAlign-end {
  align-self: end;
}

/* Images */
.u-grid-img {
  width: 100%;
  overflow: hidden;
}

/* Respnsive Tweaks */
@media(max-width: 1300px) {
}

@media(max-width: 900px) {
  .u-grid,
  .u-grid-11{
    --grid-columns: 6;
  }

  .u-grid-10,
  .u-grid-9 {
    --grid-columns: 5;
  }

  .u-grid-8,
  .u-grid-7 {
    --grid-columns: 4;
  }

  .u-grid-6,
  .u-grid-5 {
    --grid-columns: 3;
  }

  .u-grid-4 {
    --grid-columns: 2;
  }
}

@media(max-width: 600px) {
  .u-grid,
  .u-grid-11,
  .u-grid-10,
  .u-grid-9,
  .u-grid-8,
  .u-grid-7,
  .u-grid-6,
  .u-grid-5,
  .u-grid-4,
  .u-grid-3,
  .u-grid-2 {
    --grid-columns: 1;
  }
}