/* layout/grid.css */

/* ==========================================================
   BREAKPOINTS

   sm:  640px
   md:  768px
   lg:  1024px
   xl:  1280px
   2xl: 1536px
   ========================================================== */


/* ==========================================================
   DISPLAY
   ========================================================== */

.grid {
  display: grid;
}

.inline-grid {
  display: inline-grid;
}


/* ==========================================================
   GRID COLUMNS
   ========================================================== */

.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-13 { grid-template-columns: repeat(13, minmax(0, 1fr)); }
.grid-cols-14 { grid-template-columns: repeat(14, minmax(0, 1fr)); }
.grid-cols-15 { grid-template-columns: repeat(15, minmax(0, 1fr)); }
.grid-cols-16 { grid-template-columns: repeat(16, minmax(0, 1fr)); }

.grid-cols-none {
  grid-template-columns: none;
}


/* ==========================================================
   COLUMN SPAN
   ========================================================== */

.col-auto {
  grid-column: auto;
}

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

.col-span-full {
  grid-column: 1 / -1;
}


/* ==========================================================
   COLUMN START
   ========================================================== */

.col-start-auto { grid-column-start: auto; }

.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }
.col-start-13 { grid-column-start: 13; }
.col-start-14 { grid-column-start: 14; }
.col-start-15 { grid-column-start: 15; }
.col-start-16 { grid-column-start: 16; }
.col-start-17 { grid-column-start: 17; }


/* ==========================================================
   COLUMN END
   ========================================================== */

.col-end-auto { grid-column-end: auto; }

.col-end-1  { grid-column-end: 1; }
.col-end-2  { grid-column-end: 2; }
.col-end-3  { grid-column-end: 3; }
.col-end-4  { grid-column-end: 4; }
.col-end-5  { grid-column-end: 5; }
.col-end-6  { grid-column-end: 6; }
.col-end-7  { grid-column-end: 7; }
.col-end-8  { grid-column-end: 8; }
.col-end-9  { grid-column-end: 9; }
.col-end-10 { grid-column-end: 10; }
.col-end-11 { grid-column-end: 11; }
.col-end-12 { grid-column-end: 12; }
.col-end-13 { grid-column-end: 13; }
.col-end-14 { grid-column-end: 14; }
.col-end-15 { grid-column-end: 15; }
.col-end-16 { grid-column-end: 16; }
.col-end-17 { grid-column-end: 17; }


/* ==========================================================
   GRID ROWS
   ========================================================== */

.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

.grid-rows-none {
  grid-template-rows: none;
}


/* ==========================================================
   ROW SPAN
   ========================================================== */

.row-auto {
  grid-row: auto;
}

.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-4 { grid-row: span 4 / span 4; }
.row-span-5 { grid-row: span 5 / span 5; }
.row-span-6 { grid-row: span 6 / span 6; }

.row-span-full {
  grid-row: 1 / -1;
}


/* ==========================================================
   ROW START
   ========================================================== */

.row-start-auto { grid-row-start: auto; }

.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }
.row-start-5 { grid-row-start: 5; }
.row-start-6 { grid-row-start: 6; }
.row-start-7 { grid-row-start: 7; }


/* ==========================================================
   ROW END
   ========================================================== */

.row-end-auto { grid-row-end: auto; }

.row-end-1 { grid-row-end: 1; }
.row-end-2 { grid-row-end: 2; }
.row-end-3 { grid-row-end: 3; }
.row-end-4 { grid-row-end: 4; }
.row-end-5 { grid-row-end: 5; }
.row-end-6 { grid-row-end: 6; }
.row-end-7 { grid-row-end: 7; }


/* ==========================================================
   GAP
   ========================================================== */

.gap-0  { gap: 0; }
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

.gap-x-0  { column-gap: 0; }
.gap-x-1  { column-gap: 0.25rem; }
.gap-x-2  { column-gap: 0.5rem; }
.gap-x-3  { column-gap: 0.75rem; }
.gap-x-4  { column-gap: 1rem; }
.gap-x-5  { column-gap: 1.25rem; }
.gap-x-6  { column-gap: 1.5rem; }
.gap-x-8  { column-gap: 2rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-x-12 { column-gap: 3rem; }
.gap-x-16 { column-gap: 4rem; }

.gap-y-0  { row-gap: 0; }
.gap-y-1  { row-gap: 0.25rem; }
.gap-y-2  { row-gap: 0.5rem; }
.gap-y-3  { row-gap: 0.75rem; }
.gap-y-4  { row-gap: 1rem; }
.gap-y-5  { row-gap: 1.25rem; }
.gap-y-6  { row-gap: 1.5rem; }
.gap-y-8  { row-gap: 2rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-y-12 { row-gap: 3rem; }
.gap-y-16 { row-gap: 4rem; }


/* ==========================================================
   ALIGN ITEMS
   ========================================================== */

.items-start {
  align-items: start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}


/* ==========================================================
   JUSTIFY ITEMS
   ========================================================== */

.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-stretch {
  justify-items: stretch;
}


/* ==========================================================
   ALIGN SELF
   ========================================================== */

.self-auto {
  align-self: auto;
}

.self-start {
  align-self: start;
}

.self-center {
  align-self: center;
}

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

.self-stretch {
  align-self: stretch;
}

.self-baseline {
  align-self: baseline;
}


/* ==========================================================
   JUSTIFY SELF
   ========================================================== */

.justify-self-auto {
  justify-self: auto;
}

.justify-self-start {
  justify-self: start;
}

.justify-self-center {
  justify-self: center;
}

.justify-self-end {
  justify-self: end;
}

.justify-self-stretch {
  justify-self: stretch;
}


/* ==========================================================
   PLACE ITEMS / SELF
   ========================================================== */

.place-items-start {
  place-items: start;
}

.place-items-center {
  place-items: center;
}

.place-items-end {
  place-items: end;
}

.place-items-stretch {
  place-items: stretch;
}

.place-self-auto {
  place-self: auto;
}

.place-self-start {
  place-self: start;
}

.place-self-center {
  place-self: center;
}

.place-self-end {
  place-self: end;
}

.place-self-stretch {
  place-self: stretch;
}

/* ==========================================================
   SM — 640px
   ========================================================== */

@media (min-width: 640px) {
  .sm\:grid {
    display: grid;
  }

  .sm\:inline-grid {
    display: inline-grid;
  }

  .sm\:grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sm\:grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sm\:grid-cols-16 { grid-template-columns: repeat(16, minmax(0, 1fr)); }

  .sm\:col-auto { grid-column: auto; }

  .sm\:col-span-1  { grid-column: span 1 / span 1; }
  .sm\:col-span-2  { grid-column: span 2 / span 2; }
  .sm\:col-span-3  { grid-column: span 3 / span 3; }
  .sm\:col-span-4  { grid-column: span 4 / span 4; }
  .sm\:col-span-5  { grid-column: span 5 / span 5; }
  .sm\:col-span-6  { grid-column: span 6 / span 6; }
  .sm\:col-span-7  { grid-column: span 7 / span 7; }
  .sm\:col-span-8  { grid-column: span 8 / span 8; }
  .sm\:col-span-9  { grid-column: span 9 / span 9; }
  .sm\:col-span-10 { grid-column: span 10 / span 10; }
  .sm\:col-span-11 { grid-column: span 11 / span 11; }
  .sm\:col-span-12 { grid-column: span 12 / span 12; }
  .sm\:col-span-13 { grid-column: span 13 / span 13; }
  .sm\:col-span-14 { grid-column: span 14 / span 14; }
  .sm\:col-span-15 { grid-column: span 15 / span 15; }
  .sm\:col-span-16 { grid-column: span 16 / span 16; }
  .sm\:col-span-full { grid-column: 1 / -1; }

  .sm\:col-start-1  { grid-column-start: 1; }
  .sm\:col-start-2  { grid-column-start: 2; }
  .sm\:col-start-3  { grid-column-start: 3; }
  .sm\:col-start-4  { grid-column-start: 4; }
  .sm\:col-start-5  { grid-column-start: 5; }
  .sm\:col-start-6  { grid-column-start: 6; }
  .sm\:col-start-7  { grid-column-start: 7; }
  .sm\:col-start-8  { grid-column-start: 8; }
  .sm\:col-start-9  { grid-column-start: 9; }
  .sm\:col-start-10 { grid-column-start: 10; }
  .sm\:col-start-11 { grid-column-start: 11; }
  .sm\:col-start-12 { grid-column-start: 12; }
  .sm\:col-start-13 { grid-column-start: 13; }
  .sm\:col-start-14 { grid-column-start: 14; }
  .sm\:col-start-15 { grid-column-start: 15; }
  .sm\:col-start-16 { grid-column-start: 16; }
  .sm\:col-start-auto { grid-column-start: auto; }

  .sm\:row-start-1 { grid-row-start: 1; }
  .sm\:row-start-2 { grid-row-start: 2; }
  .sm\:row-start-3 { grid-row-start: 3; }
  .sm\:row-start-auto { grid-row-start: auto; }

  .sm\:gap-0 { gap: 0; }
  .sm\:gap-2 { gap: 0.5rem; }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:gap-6 { gap: 1.5rem; }
  .sm\:gap-8 { gap: 2rem; }

  .sm\:items-start { align-items: start; }
  .sm\:items-center { align-items: center; }
  .sm\:items-end { align-items: end; }
  .sm\:items-stretch { align-items: stretch; }

  .sm\:self-start { align-self: start; }
  .sm\:self-center { align-self: center; }
  .sm\:self-end { align-self: end; }
  .sm\:self-stretch { align-self: stretch; }
}


/* ==========================================================
   MD — 781
   ========================================================== */

@media (max-width: 781px) {
  .md\:grid {
    display: grid;
  }

  .md\:inline-grid {
    display: inline-grid;
  }

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

  .md\:col-auto { grid-column: auto; }

  .md\:col-span-1  { grid-column: span 1 / span 1; }
  .md\:col-span-2  { grid-column: span 2 / span 2; }
  .md\:col-span-3  { grid-column: span 3 / span 3; }
  .md\:col-span-4  { grid-column: span 4 / span 4; }
  .md\:col-span-5  { grid-column: span 5 / span 5; }
  .md\:col-span-6  { grid-column: span 6 / span 6; }
  .md\:col-span-7  { grid-column: span 7 / span 7; }
  .md\:col-span-8  { grid-column: span 8 / span 8; }
  .md\:col-span-9  { grid-column: span 9 / span 9; }
  .md\:col-span-10 { grid-column: span 10 / span 10; }
  .md\:col-span-11 { grid-column: span 11 / span 11; }
  .md\:col-span-12 { grid-column: span 12 / span 12; }
  .md\:col-span-13 { grid-column: span 13 / span 13; }
  .md\:col-span-14 { grid-column: span 14 / span 14; }
  .md\:col-span-15 { grid-column: span 15 / span 15; }
  .md\:col-span-16 { grid-column: span 16 / span 16; }
  .md\:col-span-full { grid-column: 1 / -1; }

  .md\:col-start-1  { grid-column-start: 1; }
  .md\:col-start-2  { grid-column-start: 2; }
  .md\:col-start-3  { grid-column-start: 3; }
  .md\:col-start-4  { grid-column-start: 4; }
  .md\:col-start-5  { grid-column-start: 5; }
  .md\:col-start-6  { grid-column-start: 6; }
  .md\:col-start-7  { grid-column-start: 7; }
  .md\:col-start-8  { grid-column-start: 8; }
  .md\:col-start-9  { grid-column-start: 9; }
  .md\:col-start-10 { grid-column-start: 10; }
  .md\:col-start-11 { grid-column-start: 11; }
  .md\:col-start-12 { grid-column-start: 12; }
  .md\:col-start-13 { grid-column-start: 13; }
  .md\:col-start-14 { grid-column-start: 14; }
  .md\:col-start-15 { grid-column-start: 15; }
  .md\:col-start-16 { grid-column-start: 16; }
  .md\:col-start-auto { grid-column-start: auto; }

  .md\:col-end-1  { grid-column-end: 1; }
  .md\:col-end-2  { grid-column-end: 2; }
  .md\:col-end-3  { grid-column-end: 3; }
  .md\:col-end-4  { grid-column-end: 4; }
  .md\:col-end-5  { grid-column-end: 5; }
  .md\:col-end-6  { grid-column-end: 6; }
  .md\:col-end-7  { grid-column-end: 7; }
  .md\:col-end-8  { grid-column-end: 8; }
  .md\:col-end-9  { grid-column-end: 9; }
  .md\:col-end-10 { grid-column-end: 10; }
  .md\:col-end-11 { grid-column-end: 11; }
  .md\:col-end-12 { grid-column-end: 12; }
  .md\:col-end-13 { grid-column-end: 13; }
  .md\:col-end-14 { grid-column-end: 14; }
  .md\:col-end-15 { grid-column-end: 15; }
  .md\:col-end-16 { grid-column-end: 16; }
  .md\:col-end-17 { grid-column-end: 17; }
  .md\:col-end-auto { grid-column-end: auto; }

  .md\:row-start-1 { grid-row-start: 1; }
  .md\:row-start-2 { grid-row-start: 2; }
  .md\:row-start-3 { grid-row-start: 3; }
  .md\:row-start-auto { grid-row-start: auto; }

  .md\:gap-0  { gap: 0; }
  .md\:gap-2  { gap: 0.5rem; }
  .md\:gap-4  { gap: 1rem; }
  .md\:gap-6  { gap: 1.5rem; }
  .md\:gap-8  { gap: 2rem; }
  .md\:gap-10 { gap: 2.5rem; }
  .md\:gap-12 { gap: 3rem; }

  .md\:items-start { align-items: start; }
  .md\:items-center { align-items: center; }
  .md\:items-end { align-items: end; }
  .md\:items-stretch { align-items: stretch; }

  .md\:self-start { align-self: start; }
  .md\:self-center { align-self: center; }
  .md\:self-end { align-self: end; }
  .md\:self-stretch { align-self: stretch; }
}


/* ==========================================================
   LG — 1024px
   ========================================================== */

@media (min-width: 782px) {
  .lg\:grid {
    display: grid;
  }

  .lg\:inline-grid {
    display: inline-grid;
  }

  .lg\:grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .lg\:grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .lg\:grid-cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:grid-cols-13 { grid-template-columns: repeat(13, minmax(0, 1fr)); }
  .lg\:grid-cols-14 { grid-template-columns: repeat(14, minmax(0, 1fr)); }
  .lg\:grid-cols-15 { grid-template-columns: repeat(15, minmax(0, 1fr)); }
  .lg\:grid-cols-16 { grid-template-columns: repeat(16, minmax(0, 1fr)); }

  .lg\:col-auto { grid-column: auto; }

  .lg\:col-span-1  { grid-column: span 1 / span 1; }
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
  .lg\:col-span-3  { grid-column: span 3 / span 3; }
  .lg\:col-span-4  { grid-column: span 4 / span 4; }
  .lg\:col-span-5  { grid-column: span 5 / span 5; }
  .lg\:col-span-6  { grid-column: span 6 / span 6; }
  .lg\:col-span-7  { grid-column: span 7 / span 7; }
  .lg\:col-span-8  { grid-column: span 8 / span 8; }
  .lg\:col-span-9  { grid-column: span 9 / span 9; }
  .lg\:col-span-10 { grid-column: span 10 / span 10; }
  .lg\:col-span-11 { grid-column: span 11 / span 11; }
  .lg\:col-span-12 { grid-column: span 12 / span 12; }
  .lg\:col-span-13 { grid-column: span 13 / span 13; }
  .lg\:col-span-14 { grid-column: span 14 / span 14; }
  .lg\:col-span-15 { grid-column: span 15 / span 15; }
  .lg\:col-span-16 { grid-column: span 16 / span 16; }
  .lg\:col-span-full { grid-column: 1 / -1; }

  .lg\:col-start-1  { grid-column-start: 1; }
  .lg\:col-start-2  { grid-column-start: 2; }
  .lg\:col-start-3  { grid-column-start: 3; }
  .lg\:col-start-4  { grid-column-start: 4; }
  .lg\:col-start-5  { grid-column-start: 5; }
  .lg\:col-start-6  { grid-column-start: 6; }
  .lg\:col-start-7  { grid-column-start: 7; }
  .lg\:col-start-8  { grid-column-start: 8; }
  .lg\:col-start-9  { grid-column-start: 9; }
  .lg\:col-start-10 { grid-column-start: 10; }
  .lg\:col-start-11 { grid-column-start: 11; }
  .lg\:col-start-12 { grid-column-start: 12; }
  .lg\:col-start-13 { grid-column-start: 13; }
  .lg\:col-start-14 { grid-column-start: 14; }
  .lg\:col-start-15 { grid-column-start: 15; }
  .lg\:col-start-16 { grid-column-start: 16; }
  .lg\:col-start-auto { grid-column-start: auto; }

  .lg\:col-end-1  { grid-column-end: 1; }
  .lg\:col-end-2  { grid-column-end: 2; }
  .lg\:col-end-3  { grid-column-end: 3; }
  .lg\:col-end-4  { grid-column-end: 4; }
  .lg\:col-end-5  { grid-column-end: 5; }
  .lg\:col-end-6  { grid-column-end: 6; }
  .lg\:col-end-7  { grid-column-end: 7; }
  .lg\:col-end-8  { grid-column-end: 8; }
  .lg\:col-end-9  { grid-column-end: 9; }
  .lg\:col-end-10 { grid-column-end: 10; }
  .lg\:col-end-11 { grid-column-end: 11; }
  .lg\:col-end-12 { grid-column-end: 12; }
  .lg\:col-end-13 { grid-column-end: 13; }
  .lg\:col-end-14 { grid-column-end: 14; }
  .lg\:col-end-15 { grid-column-end: 15; }
  .lg\:col-end-16 { grid-column-end: 16; }
  .lg\:col-end-17 { grid-column-end: 17; }
  .lg\:col-end-auto { grid-column-end: auto; }

  .lg\:row-start-1 { grid-row-start: 1; }
  .lg\:row-start-2 { grid-row-start: 2; }
  .lg\:row-start-3 { grid-row-start: 3; }
  .lg\:row-start-4 { grid-row-start: 4; }
  .lg\:row-start-auto { grid-row-start: auto; }

  .lg\:row-span-1 { grid-row: span 1 / span 1; }
  .lg\:row-span-2 { grid-row: span 2 / span 2; }
  .lg\:row-span-3 { grid-row: span 3 / span 3; }
  .lg\:row-span-4 { grid-row: span 4 / span 4; }
  .lg\:row-span-full { grid-row: 1 / -1; }

  .lg\:gap-0  { gap: 0; }
  .lg\:gap-2  { gap: 0.5rem; }
  .lg\:gap-4  { gap: 1rem; }
  .lg\:gap-6  { gap: 1.5rem; }
  .lg\:gap-8  { gap: 2rem; }
  .lg\:gap-10 { gap: 2.5rem; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:gap-16 { gap: 4rem; }

  .lg\:gap-x-0  { column-gap: 0; }
  .lg\:gap-x-4  { column-gap: 1rem; }
  .lg\:gap-x-6  { column-gap: 1.5rem; }
  .lg\:gap-x-8  { column-gap: 2rem; }
  .lg\:gap-x-12 { column-gap: 3rem; }

  .lg\:gap-y-0  { row-gap: 0; }
  .lg\:gap-y-4  { row-gap: 1rem; }
  .lg\:gap-y-6  { row-gap: 1.5rem; }
  .lg\:gap-y-8  { row-gap: 2rem; }
  .lg\:gap-y-12 { row-gap: 3rem; }

  .lg\:items-start { align-items: start; }
  .lg\:items-center { align-items: center; }
  .lg\:items-end { align-items: end; }
  .lg\:items-stretch { align-items: stretch; }

  .lg\:self-start { align-self: start; }
  .lg\:self-center { align-self: center; }
  .lg\:self-end { align-self: end; }
  .lg\:self-stretch { align-self: stretch; }

  .lg\:justify-items-start { justify-items: start; }
  .lg\:justify-items-center { justify-items: center; }
  .lg\:justify-items-end { justify-items: end; }
  .lg\:justify-items-stretch { justify-items: stretch; }

  .lg\:justify-self-start { justify-self: start; }
  .lg\:justify-self-center { justify-self: center; }
  .lg\:justify-self-end { justify-self: end; }
  .lg\:justify-self-stretch { justify-self: stretch; }
}


/* ==========================================================
   XL — 1280px
   ========================================================== */

@media (min-width: 1280px) {
  .xl\:grid {
    display: grid;
  }

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

  .xl\:col-span-1  { grid-column: span 1 / span 1; }
  .xl\:col-span-2  { grid-column: span 2 / span 2; }
  .xl\:col-span-3  { grid-column: span 3 / span 3; }
  .xl\:col-span-4  { grid-column: span 4 / span 4; }
  .xl\:col-span-5  { grid-column: span 5 / span 5; }
  .xl\:col-span-6  { grid-column: span 6 / span 6; }
  .xl\:col-span-7  { grid-column: span 7 / span 7; }
  .xl\:col-span-8  { grid-column: span 8 / span 8; }
  .xl\:col-span-9  { grid-column: span 9 / span 9; }
  .xl\:col-span-10 { grid-column: span 10 / span 10; }
  .xl\:col-span-11 { grid-column: span 11 / span 11; }
  .xl\:col-span-12 { grid-column: span 12 / span 12; }
  .xl\:col-span-13 { grid-column: span 13 / span 13; }
  .xl\:col-span-14 { grid-column: span 14 / span 14; }
  .xl\:col-span-15 { grid-column: span 15 / span 15; }
  .xl\:col-span-16 { grid-column: span 16 / span 16; }
  .xl\:col-span-full { grid-column: 1 / -1; }

  .xl\:col-start-1  { grid-column-start: 1; }
  .xl\:col-start-2  { grid-column-start: 2; }
  .xl\:col-start-3  { grid-column-start: 3; }
  .xl\:col-start-4  { grid-column-start: 4; }
  .xl\:col-start-5  { grid-column-start: 5; }
  .xl\:col-start-6  { grid-column-start: 6; }
  .xl\:col-start-7  { grid-column-start: 7; }
  .xl\:col-start-8  { grid-column-start: 8; }
  .xl\:col-start-9  { grid-column-start: 9; }
  .xl\:col-start-10 { grid-column-start: 10; }
  .xl\:col-start-11 { grid-column-start: 11; }
  .xl\:col-start-12 { grid-column-start: 12; }
  .xl\:col-start-13 { grid-column-start: 13; }
  .xl\:col-start-14 { grid-column-start: 14; }
  .xl\:col-start-15 { grid-column-start: 15; }
  .xl\:col-start-16 { grid-column-start: 16; }
  .xl\:col-start-auto { grid-column-start: auto; }

  .xl\:row-start-1 { grid-row-start: 1; }
  .xl\:row-start-2 { grid-row-start: 2; }
  .xl\:row-start-3 { grid-row-start: 3; }
  .xl\:row-start-auto { grid-row-start: auto; }

  .xl\:gap-0  { gap: 0; }
  .xl\:gap-4  { gap: 1rem; }
  .xl\:gap-6  { gap: 1.5rem; }
  .xl\:gap-8  { gap: 2rem; }
  .xl\:gap-10 { gap: 2.5rem; }
  .xl\:gap-12 { gap: 3rem; }
  .xl\:gap-16 { gap: 4rem; }

  .xl\:items-start { align-items: start; }
  .xl\:items-center { align-items: center; }
  .xl\:items-end { align-items: end; }

  .xl\:self-start { align-self: start; }
  .xl\:self-center { align-self: center; }
  .xl\:self-end { align-self: end; }
}


/* ==========================================================
   2XL — 1536px
   ========================================================== */

@media (min-width: 1536px) {
  .\32xl\:grid {
    display: grid;
  }

  .\32xl\:grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .\32xl\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .\32xl\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .\32xl\:grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .\32xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .\32xl\:grid-cols-16 { grid-template-columns: repeat(16, minmax(0, 1fr)); }

  .\32xl\:col-span-4  { grid-column: span 4 / span 4; }
  .\32xl\:col-span-6  { grid-column: span 6 / span 6; }
  .\32xl\:col-span-8  { grid-column: span 8 / span 8; }
  .\32xl\:col-span-10 { grid-column: span 10 / span 10; }
  .\32xl\:col-span-12 { grid-column: span 12 / span 12; }
  .\32xl\:col-span-16 { grid-column: span 16 / span 16; }
  .\32xl\:col-span-full { grid-column: 1 / -1; }

  .\32xl\:col-start-1  { grid-column-start: 1; }
  .\32xl\:col-start-5  { grid-column-start: 5; }
  .\32xl\:col-start-7  { grid-column-start: 7; }
  .\32xl\:col-start-9  { grid-column-start: 9; }
  .\32xl\:col-start-11 { grid-column-start: 11; }

  .\32xl\:row-start-1 { grid-row-start: 1; }
  .\32xl\:row-start-2 { grid-row-start: 2; }

  .\32xl\:gap-0  { gap: 0; }
  .\32xl\:gap-8  { gap: 2rem; }
  .\32xl\:gap-12 { gap: 3rem; }
  .\32xl\:gap-16 { gap: 4rem; }

  .\32xl\:items-center {
    align-items: center;
  }

  .\32xl\:self-center {
    align-self: center;
  }
}