/*!
 * Grids
 *
 */


/* Grids
-------------------------------------------------- */
.wrapper {
  position: relative;
  width: 100%; }
.container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0; }
.container:after {
  content: "";
  display: table;
  clear: both; }


/*!
*/

/* ----------------------------------------------------
   Grid Row
---------------------------------------------------- */
.grid-row {
  display: grid;
  grid-row-gap: 16px;      /* fallback for older Safari */
  grid-column-gap: 16px;   /* fallback */
  gap: 16px;               /* modern */
}

/* ----------------------------------------------------
   Grid Column
---------------------------------------------------- */
.grid-col {
  margin: 0;
}

/* ----------------------------------------------------
   Grid Gap
---------------------------------------------------- */
.grid-gap-0  { gap: 0; }
.grid-gap-sm { gap: 8px; }
.grid-gap-md { gap: 16px; }
.grid-gap-lg { gap: 24px; }

.grid-column-gap-0  { column-gap: 0; }
.grid-column-gap-sm { column-gap: 8px; }
.grid-column-gap-md { column-gap: 16px; }
.grid-column-gap-lg { column-gap: 24px; }

.grid-row-gap-0  { row-gap: 0; }
.grid-row-gap-sm { row-gap: 8px; }
.grid-row-gap-md { row-gap: 16px; }
.grid-row-gap-lg { row-gap: 24px; }

/* ----------------------------------------------------
   Column Order
---------------------------------------------------- */
.grid-order-0  { order: 0; }
.grid-order-1  { order: 1; }
.grid-order-2  { order: 2; }
.grid-order-3  { order: 3; }
.grid-order-4  { order: 4; }
.grid-order-5  { order: 5; }
.grid-order-6  { order: 6; }
.grid-order-7  { order: 7; }
.grid-order-8  { order: 8; }
.grid-order-9  { order: 9; }
.grid-order-10 { order: 10; }
.grid-order-11 { order: 11; }
.grid-order-12 { order: 12; }

/* ----------------------------------------------------
   Column Count (1–24)
---------------------------------------------------- */
.grid-cols-1    { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2    { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3    { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4    { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5    { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6    { grid-template-columns: repeat(6, 1fr); }
.grid-cols-8    { grid-template-columns: repeat(8, 1fr); }
.grid-cols-12   { grid-template-columns: repeat(12, 1fr); }
.grid-cols-16   { grid-template-columns: repeat(16, 1fr); }
.grid-cols-24   { grid-template-columns: repeat(24, 1fr); }

/* ----------------------------------------------------
   Column Span
   grid-span-x (1–N)
---------------------------------------------------- */
/* 1-column grids */
.grid-cols-1  > .grid-span-1 { grid-column: span 1; }

/* 2-column grids */
.grid-cols-2  > .grid-span-1 { grid-column: span 1; }
.grid-cols-2  > .grid-span-2 { grid-column: span 2; }

/* 3-column grids */
.grid-cols-3  > .grid-span-1 { grid-column: span 1; }
.grid-cols-3  > .grid-span-2 { grid-column: span 2; }
.grid-cols-3  > .grid-span-3 { grid-column: span 3; }

/* 4-column grids */
.grid-cols-4  > .grid-span-1 { grid-column: span 1; }
.grid-cols-4  > .grid-span-2 { grid-column: span 2; }
.grid-cols-4  > .grid-span-3 { grid-column: span 3; }
.grid-cols-4  > .grid-span-4 { grid-column: span 4; }

/* 5-column grids */
.grid-cols-5  > .grid-span-1 { grid-column: span 1; }
.grid-cols-5  > .grid-span-2 { grid-column: span 2; }
.grid-cols-5  > .grid-span-3 { grid-column: span 3; }
.grid-cols-5  > .grid-span-4 { grid-column: span 4; }
.grid-cols-5  > .grid-span-5 { grid-column: span 5; }

/* 6-column grids */
.grid-cols-6  > .grid-span-1 { grid-column: span 1; }
.grid-cols-6  > .grid-span-2 { grid-column: span 2; }
.grid-cols-6  > .grid-span-3 { grid-column: span 3; }
.grid-cols-6  > .grid-span-4 { grid-column: span 4; }
.grid-cols-6  > .grid-span-5 { grid-column: span 5; }
.grid-cols-6  > .grid-span-6 { grid-column: span 6; }

/* 8-column grids */
.grid-cols-8  > .grid-span-1 { grid-column: span 1; }
.grid-cols-8  > .grid-span-2 { grid-column: span 2; }
.grid-cols-8  > .grid-span-3 { grid-column: span 3; }
.grid-cols-8  > .grid-span-4 { grid-column: span 4; }
.grid-cols-8  > .grid-span-5 { grid-column: span 5; }
.grid-cols-8  > .grid-span-6 { grid-column: span 6; }
.grid-cols-8  > .grid-span-7 { grid-column: span 7; }
.grid-cols-8  > .grid-span-8 { grid-column: span 8; }

/* 12-column grids */
.grid-cols-12 > .grid-span-1  { grid-column: span 1; }
.grid-cols-12 > .grid-span-2  { grid-column: span 2; }
.grid-cols-12 > .grid-span-3  { grid-column: span 3; }
.grid-cols-12 > .grid-span-4  { grid-column: span 4; }
.grid-cols-12 > .grid-span-5  { grid-column: span 5; }
.grid-cols-12 > .grid-span-6  { grid-column: span 6; }
.grid-cols-12 > .grid-span-7  { grid-column: span 7; }
.grid-cols-12 > .grid-span-8  { grid-column: span 8; }
.grid-cols-12 > .grid-span-9  { grid-column: span 9; }
.grid-cols-12 > .grid-span-10 { grid-column: span 10; }
.grid-cols-12 > .grid-span-11 { grid-column: span 11; }
.grid-cols-12 > .grid-span-12 { grid-column: span 12; }

/* 16-column grids */
.grid-cols-16 > .grid-span-1  { grid-column: span 1; }
.grid-cols-16 > .grid-span-2  { grid-column: span 2; }
.grid-cols-16 > .grid-span-3  { grid-column: span 3; }
.grid-cols-16 > .grid-span-4  { grid-column: span 4; }
.grid-cols-16 > .grid-span-5  { grid-column: span 5; }
.grid-cols-16 > .grid-span-6  { grid-column: span 6; }
.grid-cols-16 > .grid-span-7  { grid-column: span 7; }
.grid-cols-16 > .grid-span-8  { grid-column: span 8; }
.grid-cols-16 > .grid-span-9  { grid-column: span 9; }
.grid-cols-16 > .grid-span-10 { grid-column: span 10; }
.grid-cols-16 > .grid-span-11 { grid-column: span 11; }
.grid-cols-16 > .grid-span-12 { grid-column: span 12; }
.grid-cols-16 > .grid-span-13 { grid-column: span 13; }
.grid-cols-16 > .grid-span-14 { grid-column: span 14; }
.grid-cols-16 > .grid-span-15 { grid-column: span 15; }
.grid-cols-16 > .grid-span-16 { grid-column: span 16; }

/* 24-column grids */
.grid-cols-24 > .grid-span-1  { grid-column: span 1; }
.grid-cols-24 > .grid-span-2  { grid-column: span 2; }
.grid-cols-24 > .grid-span-3  { grid-column: span 3; }
.grid-cols-24 > .grid-span-4  { grid-column: span 4; }
.grid-cols-24 > .grid-span-5  { grid-column: span 5; }
.grid-cols-24 > .grid-span-6  { grid-column: span 6; }
.grid-cols-24 > .grid-span-7  { grid-column: span 7; }
.grid-cols-24 > .grid-span-8  { grid-column: span 8; }
.grid-cols-24 > .grid-span-9  { grid-column: span 9; }
.grid-cols-24 > .grid-span-10 { grid-column: span 10; }
.grid-cols-24 > .grid-span-11 { grid-column: span 11; }
.grid-cols-24 > .grid-span-12 { grid-column: span 12; }
.grid-cols-24 > .grid-span-13 { grid-column: span 13; }
.grid-cols-24 > .grid-span-14 { grid-column: span 14; }
.grid-cols-24 > .grid-span-15 { grid-column: span 15; }
.grid-cols-24 > .grid-span-16 { grid-column: span 16; }
.grid-cols-24 > .grid-span-17 { grid-column: span 17; }
.grid-cols-24 > .grid-span-18 { grid-column: span 18; }
.grid-cols-24 > .grid-span-19 { grid-column: span 19; }
.grid-cols-24 > .grid-span-20 { grid-column: span 20; }
.grid-cols-24 > .grid-span-21 { grid-column: span 21; }
.grid-cols-24 > .grid-span-22 { grid-column: span 22; }
.grid-cols-24 > .grid-span-23 { grid-column: span 23; }
.grid-cols-24 > .grid-span-24 { grid-column: span 24; }


/* ----------------------------------------------------
   Responsive Breakpoints
   sm = 640px
   md = 768px
   lg = 1024px
   xl = 1280px
---------------------------------------------------- */

/* ------------------ SM ------------------ */
/* ≥ 640px */
@media screen and (min-width: 40em) {
  /* Column order */
  .grid-order-sm-0  { order: 0; }
  .grid-order-sm-1  { order: 1; }
  .grid-order-sm-2  { order: 2; }
  .grid-order-sm-3  { order: 3; }
  .grid-order-sm-4  { order: 4; }
  .grid-order-sm-5  { order: 5; }
  .grid-order-sm-6  { order: 6; }
  .grid-order-sm-7  { order: 7; }
  .grid-order-sm-8  { order: 8; }
  .grid-order-sm-9  { order: 9; }
  .grid-order-sm-10 { order: 10; }
  .grid-order-sm-11 { order: 11; }
  .grid-order-sm-12 { order: 12; }

  /* Columns */
  .grid-cols-sm-1  { grid-template-columns: repeat(1, 1fr); }
  .grid-cols-sm-2  { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-sm-3  { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-sm-4  { grid-template-columns: repeat(4, 1fr); }
  .grid-cols-sm-5  { grid-template-columns: repeat(5, 1fr); }
  .grid-cols-sm-6  { grid-template-columns: repeat(6, 1fr); }
  .grid-cols-sm-8  { grid-template-columns: repeat(8, 1fr); }
  .grid-cols-sm-12 { grid-template-columns: repeat(12, 1fr); }
  .grid-cols-sm-16 { grid-template-columns: repeat(16, 1fr); }
  .grid-cols-sm-24 { grid-template-columns: repeat(24, 1fr); }

  /* Span classes */
  [class*="grid-cols-sm-"] > .grid-span-sm-1  { grid-column: span 1; }
  [class*="grid-cols-sm-"] > .grid-span-sm-2  { grid-column: span 2; }
  [class*="grid-cols-sm-"] > .grid-span-sm-3  { grid-column: span 3; }
  [class*="grid-cols-sm-"] > .grid-span-sm-4  { grid-column: span 4; }
  [class*="grid-cols-sm-"] > .grid-span-sm-5  { grid-column: span 5; }
  [class*="grid-cols-sm-"] > .grid-span-sm-6  { grid-column: span 6; }
  [class*="grid-cols-sm-"] > .grid-span-sm-7  { grid-column: span 7; }
  [class*="grid-cols-sm-"] > .grid-span-sm-8  { grid-column: span 8; }
  [class*="grid-cols-sm-"] > .grid-span-sm-9  { grid-column: span 9; }
  [class*="grid-cols-sm-"] > .grid-span-sm-10 { grid-column: span 10; }
  [class*="grid-cols-sm-"] > .grid-span-sm-11 { grid-column: span 11; }
  [class*="grid-cols-sm-"] > .grid-span-sm-12 { grid-column: span 12; }
}

/* ------------------ MD ------------------ */
/* ≥ 768px */
@media screen and (min-width: 48em) {
  .grid-order-md-0  { order: 0; }
  .grid-order-md-1  { order: 1; }
  .grid-order-md-2  { order: 2; }
  .grid-order-md-3  { order: 3; }
  .grid-order-md-4  { order: 4; }
  .grid-order-md-5  { order: 5; }
  .grid-order-md-6  { order: 6; }
  .grid-order-md-7  { order: 7; }
  .grid-order-md-8  { order: 8; }
  .grid-order-md-9  { order: 9; }
  .grid-order-md-10 { order: 10; }
  .grid-order-md-11 { order: 11; }
  .grid-order-md-12 { order: 12; }

  .grid-cols-md-1  { grid-template-columns: repeat(1, 1fr); }
  .grid-cols-md-2  { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-md-3  { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-md-4  { grid-template-columns: repeat(4, 1fr); }
  .grid-cols-md-5  { grid-template-columns: repeat(5, 1fr); }
  .grid-cols-md-6  { grid-template-columns: repeat(6, 1fr); }
  .grid-cols-md-8  { grid-template-columns: repeat(8, 1fr); }
  .grid-cols-md-12 { grid-template-columns: repeat(12, 1fr); }
  .grid-cols-md-16 { grid-template-columns: repeat(16, 1fr); }
  .grid-cols-md-24 { grid-template-columns: repeat(24, 1fr); }

  [class*="grid-cols-md-"] > .grid-span-md-1  { grid-column: span 1; }
  [class*="grid-cols-md-"] > .grid-span-md-2  { grid-column: span 2; }
  [class*="grid-cols-md-"] > .grid-span-md-3  { grid-column: span 3; }
  [class*="grid-cols-md-"] > .grid-span-md-4  { grid-column: span 4; }
  [class*="grid-cols-md-"] > .grid-span-md-5  { grid-column: span 5; }
  [class*="grid-cols-md-"] > .grid-span-md-6  { grid-column: span 6; }
  [class*="grid-cols-md-"] > .grid-span-md-7  { grid-column: span 7; }
  [class*="grid-cols-md-"] > .grid-span-md-8  { grid-column: span 8; }
  [class*="grid-cols-md-"] > .grid-span-md-9  { grid-column: span 9; }
  [class*="grid-cols-md-"] > .grid-span-md-10 { grid-column: span 10; }
  [class*="grid-cols-md-"] > .grid-span-md-11 { grid-column: span 11; }
  [class*="grid-cols-md-"] > .grid-span-md-12 { grid-column: span 12; }
}

/* ------------------ LG ------------------ */
/* ≥ 1024px */
@media screen and (min-width: 64em) {
  .grid-order-lg-0  { order: 0; }
  .grid-order-lg-1  { order: 1; }
  .grid-order-lg-2  { order: 2; }
  .grid-order-lg-3  { order: 3; }
  .grid-order-lg-4  { order: 4; }
  .grid-order-lg-5  { order: 5; }
  .grid-order-lg-6  { order: 6; }
  .grid-order-lg-7  { order: 7; }
  .grid-order-lg-8  { order: 8; }
  .grid-order-lg-9  { order: 9; }
  .grid-order-lg-10 { order: 10; }
  .grid-order-lg-11 { order: 11; }
  .grid-order-lg-12 { order: 12; }

  .grid-cols-lg-1  { grid-template-columns: repeat(1, 1fr); }
  .grid-cols-lg-2  { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-lg-3  { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-lg-4  { grid-template-columns: repeat(4, 1fr); }
  .grid-cols-lg-5  { grid-template-columns: repeat(5, 1fr); }
  .grid-cols-lg-6  { grid-template-columns: repeat(6, 1fr); }
  .grid-cols-lg-8  { grid-template-columns: repeat(8, 1fr); }
  .grid-cols-lg-12 { grid-template-columns: repeat(12, 1fr); }
  .grid-cols-lg-16 { grid-template-columns: repeat(16, 1fr); }
  .grid-cols-lg-24 { grid-template-columns: repeat(24, 1fr); }

  [class*="grid-cols-lg-"] > .grid-span-lg-1  { grid-column: span 1; }
  [class*="grid-cols-lg-"] > .grid-span-lg-2  { grid-column: span 2; }
  [class*="grid-cols-lg-"] > .grid-span-lg-3  { grid-column: span 3; }
  [class*="grid-cols-lg-"] > .grid-span-lg-4  { grid-column: span 4; }
  [class*="grid-cols-lg-"] > .grid-span-lg-5  { grid-column: span 5; }
  [class*="grid-cols-lg-"] > .grid-span-lg-6  { grid-column: span 6; }
  [class*="grid-cols-lg-"] > .grid-span-lg-7  { grid-column: span 7; }
  [class*="grid-cols-lg-"] > .grid-span-lg-8  { grid-column: span 8; }
  [class*="grid-cols-lg-"] > .grid-span-lg-9  { grid-column: span 9; }
  [class*="grid-cols-lg-"] > .grid-span-lg-10 { grid-column: span 10; }
  [class*="grid-cols-lg-"] > .grid-span-lg-11 { grid-column: span 11; }
  [class*="grid-cols-lg-"] > .grid-span-lg-12 { grid-column: span 12; }
}

/* ------------------ XL ------------------ */
/* ≥ 1280px */
@media screen and (min-width: 80em) {
  .grid-order-xl-0  { order: 0; }
  .grid-order-xl-1  { order: 1; }
  .grid-order-xl-2  { order: 2; }
  .grid-order-xl-3  { order: 3; }
  .grid-order-xl-4  { order: 4; }
  .grid-order-xl-5  { order: 5; }
  .grid-order-xl-6  { order: 6; }
  .grid-order-xl-7  { order: 7; }
  .grid-order-xl-8  { order: 8; }
  .grid-order-xl-9  { order: 9; }
  .grid-order-xl-10 { order: 10; }
  .grid-order-xl-11 { order: 11; }
  .grid-order-xl-12 { order: 12; }

  .grid-cols-xl-1  { grid-template-columns: repeat(1, 1fr); }
  .grid-cols-xl-2  { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-xl-3  { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-xl-4  { grid-template-columns: repeat(4, 1fr); }
  .grid-cols-xl-5  { grid-template-columns: repeat(5, 1fr); }
  .grid-cols-xl-6  { grid-template-columns: repeat(6, 1fr); }
  .grid-cols-xl-8  { grid-template-columns: repeat(8, 1fr); }
  .grid-cols-xl-12 { grid-template-columns: repeat(12, 1fr); }
  .grid-cols-xl-16 { grid-template-columns: repeat(16, 1fr); }
  .grid-cols-xl-24 { grid-template-columns: repeat(24, 1fr); }

  [class*="grid-cols-xl-"] > .grid-span-xl-1  { grid-column: span 1; }
  [class*="grid-cols-xl-"] > .grid-span-xl-2  { grid-column: span 2; }
  [class*="grid-cols-xl-"] > .grid-span-xl-3  { grid-column: span 3; }
  [class*="grid-cols-xl-"] > .grid-span-xl-4  { grid-column: span 4; }
  [class*="grid-cols-xl-"] > .grid-span-xl-5  { grid-column: span 5; }
  [class*="grid-cols-xl-"] > .grid-span-xl-6  { grid-column: span 6; }
  [class*="grid-cols-xl-"] > .grid-span-xl-7  { grid-column: span 7; }
  [class*="grid-cols-xl-"] > .grid-span-xl-8  { grid-column: span 8; }
  [class*="grid-cols-xl-"] > .grid-span-xl-9  { grid-column: span 9; }
  [class*="grid-cols-xl-"] > .grid-span-xl-10 { grid-column: span 10; }
  [class*="grid-cols-xl-"] > .grid-span-xl-11 { grid-column: span 11; }
  [class*="grid-cols-xl-"] > .grid-span-xl-12 { grid-column: span 12; }
}