/* --------------------------------------- */
/* ==Grillade : ultra light Grid System    */
/* --------------------------------------- */
@media (min-width: 480px) {
  [class*=" grid-"],
  [class^="grid-"] {
    display: -ms-grid;
    display: grid;
    grid-auto-flow: dense;
  }
  [class*=" grid-"].has-gutter,
  [class^="grid-"].has-gutter {
    grid-gap: 1rem;
  }
  [class*=" grid-"].has-gutter-l,
  [class^="grid-"].has-gutter-l {
    grid-gap: 2rem;
  }
  [class*=" grid-"].has-gutter-xl,
  [class^="grid-"].has-gutter-xl {
    grid-gap: 4rem;
  }
}

@media (min-width: 480px) {
  .autogrid,
  .grid {
    display: -ms-grid;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .autogrid.has-gutter,
  .grid.has-gutter {
    grid-column-gap: 1rem;
  }
  .autogrid.has-gutter-l,
  .grid.has-gutter-l {
    grid-column-gap: 2rem;
  }
  .autogrid.has-gutter-xl,
  .grid.has-gutter-xl {
    grid-column-gap: 4rem;
  }
}

[class*="grid-2"] {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}

[class*="grid-3"] {
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}

[class*="grid-4"] {
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
}

[class*="grid-5"] {
  -ms-grid-columns: (1fr)[5];
  grid-template-columns: repeat(5, 1fr);
}

[class*="grid-6"] {
  -ms-grid-columns: (1fr)[6];
  grid-template-columns: repeat(6, 1fr);
}

[class*="grid-7"] {
  -ms-grid-columns: (1fr)[7];
  grid-template-columns: repeat(7, 1fr);
}

[class*="grid-8"] {
  -ms-grid-columns: (1fr)[8];
  grid-template-columns: repeat(8, 1fr);
}

[class*="grid-9"] {
  -ms-grid-columns: (1fr)[9];
  grid-template-columns: repeat(9, 1fr);
}

[class*="grid-10"] {
  -ms-grid-columns: (1fr)[10];
  grid-template-columns: repeat(10, 1fr);
}

[class*="grid-11"] {
  -ms-grid-columns: (1fr)[11];
  grid-template-columns: repeat(11, 1fr);
}

[class*="grid-12"] {
  -ms-grid-columns: (1fr)[12];
  grid-template-columns: repeat(12, 1fr);
}

[class*="col-1"] {
  grid-column: auto/span 1;
}

[class*="row-1"] {
  grid-row: auto/span 1;
}

[class*="col-2"] {
  grid-column: auto/span 2;
}

[class*="row-2"] {
  grid-row: auto/span 2;
}

[class*="col-3"] {
  grid-column: auto/span 3;
}

[class*="row-3"] {
  grid-row: auto/span 3;
}

[class*="col-4"] {
  grid-column: auto/span 4;
}

[class*="row-4"] {
  grid-row: auto/span 4;
}

[class*="col-5"] {
  grid-column: auto/span 5;
}

[class*="row-5"] {
  grid-row: auto/span 5;
}

[class*="col-6"] {
  grid-column: auto/span 6;
}

[class*="row-6"] {
  grid-row: auto/span 6;
}

[class*="col-7"] {
  grid-column: auto/span 7;
}

[class*="row-7"] {
  grid-row: auto/span 7;
}

[class*="col-8"] {
  grid-column: auto/span 8;
}

[class*="row-8"] {
  grid-row: auto/span 8;
}

[class*="col-9"] {
  grid-column: auto/span 9;
}

[class*="row-9"] {
  grid-row: auto/span 9;
}

[class*="col-10"] {
  grid-column: auto/span 10;
}

[class*="row-10"] {
  grid-row: auto/span 10;
}

[class*="col-11"] {
  grid-column: auto/span 11;
}

[class*="row-11"] {
  grid-row: auto/span 11;
}

[class*="col-12"] {
  grid-column: auto/span 12;
}

[class*="row-12"] {
  grid-row: auto/span 12;
}

/* intermediate breakpoints */
@media (min-width: 480px) and (max-width: 767px) {
  [class*="grid-"][class*="-small-1"] {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
  [class*="col-"][class*="-small-1"] {
    grid-column: auto/span 1;
  }
  [class*="grid-"][class*="-small-2"] {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
  [class*="col-"][class*="-small-2"] {
    grid-column: auto/span 2;
  }
  [class*="grid-"][class*="-small-3"] {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
  [class*="col-"][class*="-small-3"] {
    grid-column: auto/span 3;
  }
  [class*="grid-"][class*="-small-4"] {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
  [class*="col-"][class*="-small-4"] {
    grid-column: auto/span 4;
  }
  [class*="-small-all"] {
    grid-column: 1 / -1;
  }
}

.item-first {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}

.item-last {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.grid-offset {
  visibility: hidden;
}

.col-all {
  grid-column: 1 / -1;
}

.row-all {
  grid-row: 1 / -1;
}