/* ==============
   7) Base (mobile-first) 
   ============== */
.gcol-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gcol-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gcol-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gcol-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gcol-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gcol-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.gcol-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.gcol-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.gcol-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.gcol-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.gcol-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.gcol-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gcol-auto {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.gspan-1 {
  grid-column: span 1;
}

.gspan-2 {
  grid-column: span 2;
}

.gspan-3 {
  grid-column: span 3;
}

.gspan-4 {
  grid-column: span 4;
}

.gspan-5 {
  grid-column: span 5;
}

.gspan-6 {
  grid-column: span 6;
}

.gspan-7 {
  grid-column: span 7;
}

.gspan-8 {
  grid-column: span 8;
}

.gspan-9 {
  grid-column: span 9;
}

.gspan-10 {
  grid-column: span 10;
}

.gspan-11 {
  grid-column: span 11;
}

.gspan-12 {
  grid-column: span 12;
}

.rgap-0 {
  row-gap: 0;
}

.rgap-1 {
  row-gap: 0.25rem;
}

.rgap-2 {
  row-gap: 0.5rem;
}

.rgap-3 {
  row-gap: 1rem;
}

.rgap-4 {
  row-gap: 1.5rem;
}

.rgap-5 {
  row-gap: 3rem;
}

.cgap-0 {
  column-gap: 0;
}

.cgap-1 {
  column-gap: 0.25rem;
}

.cgap-2 {
  column-gap: 0.5rem;
}

.cgap-3 {
  column-gap: 1rem;
}

.cgap-4 {
  column-gap: 1.5rem;
}

.cgap-5 {
  column-gap: 3rem;
}

/* 
   8) Breakpoint Overrides
   Use the same pattern for sm, md, lg, xl, xxl, 3xl
   so you can do .rgap-md-2, .cgap-lg-4, etc.
*/
@media (min-width: 576px) {
  .gcol-sm-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .gcol-sm-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gcol-sm-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gcol-sm-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gcol-sm-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .gcol-sm-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .gcol-sm-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .gcol-sm-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .gcol-sm-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .gcol-sm-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .gcol-sm-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .gcol-sm-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .gcol-sm-auto {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  .gspan-sm-1 {
    grid-column: span 1;
  }
  .gspan-sm-2 {
    grid-column: span 2;
  }
  .gspan-sm-3 {
    grid-column: span 3;
  }
  .gspan-sm-4 {
    grid-column: span 4;
  }
  .gspan-sm-5 {
    grid-column: span 5;
  }
  .gspan-sm-6 {
    grid-column: span 6;
  }
  .gspan-sm-7 {
    grid-column: span 7;
  }
  .gspan-sm-8 {
    grid-column: span 8;
  }
  .gspan-sm-9 {
    grid-column: span 9;
  }
  .gspan-sm-10 {
    grid-column: span 10;
  }
  .gspan-sm-11 {
    grid-column: span 11;
  }
  .gspan-sm-12 {
    grid-column: span 12;
  }
  .rgap-sm-0 {
    row-gap: 0;
  }
  .rgap-sm-1 {
    row-gap: 0.25rem;
  }
  .rgap-sm-2 {
    row-gap: 0.5rem;
  }
  .rgap-sm-3 {
    row-gap: 1rem;
  }
  .rgap-sm-4 {
    row-gap: 1.5rem;
  }
  .rgap-sm-5 {
    row-gap: 3rem;
  }
  .cgap-sm-0 {
    column-gap: 0;
  }
  .cgap-sm-1 {
    column-gap: 0.25rem;
  }
  .cgap-sm-2 {
    column-gap: 0.5rem;
  }
  .cgap-sm-3 {
    column-gap: 1rem;
  }
  .cgap-sm-4 {
    column-gap: 1.5rem;
  }
  .cgap-sm-5 {
    column-gap: 3rem;
  }
}
@media (min-width: 768px) {
  .gcol-md-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .gcol-md-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gcol-md-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gcol-md-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gcol-md-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .gcol-md-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .gcol-md-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .gcol-md-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .gcol-md-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .gcol-md-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .gcol-md-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .gcol-md-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .gcol-md-auto {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  .gspan-md-1 {
    grid-column: span 1;
  }
  .gspan-md-2 {
    grid-column: span 2;
  }
  .gspan-md-3 {
    grid-column: span 3;
  }
  .gspan-md-4 {
    grid-column: span 4;
  }
  .gspan-md-5 {
    grid-column: span 5;
  }
  .gspan-md-6 {
    grid-column: span 6;
  }
  .gspan-md-7 {
    grid-column: span 7;
  }
  .gspan-md-8 {
    grid-column: span 8;
  }
  .gspan-md-9 {
    grid-column: span 9;
  }
  .gspan-md-10 {
    grid-column: span 10;
  }
  .gspan-md-11 {
    grid-column: span 11;
  }
  .gspan-md-12 {
    grid-column: span 12;
  }
  .rgap-md-0 {
    row-gap: 0;
  }
  .rgap-md-1 {
    row-gap: 0.25rem;
  }
  .rgap-md-2 {
    row-gap: 0.5rem;
  }
  .rgap-md-3 {
    row-gap: 1rem;
  }
  .rgap-md-4 {
    row-gap: 1.5rem;
  }
  .rgap-md-5 {
    row-gap: 3rem;
  }
  .cgap-md-0 {
    column-gap: 0;
  }
  .cgap-md-1 {
    column-gap: 0.25rem;
  }
  .cgap-md-2 {
    column-gap: 0.5rem;
  }
  .cgap-md-3 {
    column-gap: 1rem;
  }
  .cgap-md-4 {
    column-gap: 1.5rem;
  }
  .cgap-md-5 {
    column-gap: 3rem;
  }
}
@media (min-width: 992px) {
  .gcol-lg-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .gcol-lg-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gcol-lg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gcol-lg-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gcol-lg-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .gcol-lg-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .gcol-lg-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .gcol-lg-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .gcol-lg-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .gcol-lg-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .gcol-lg-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .gcol-lg-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .gcol-lg-auto {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  .gspan-lg-1 {
    grid-column: span 1;
  }
  .gspan-lg-2 {
    grid-column: span 2;
  }
  .gspan-lg-3 {
    grid-column: span 3;
  }
  .gspan-lg-4 {
    grid-column: span 4;
  }
  .gspan-lg-5 {
    grid-column: span 5;
  }
  .gspan-lg-6 {
    grid-column: span 6;
  }
  .gspan-lg-7 {
    grid-column: span 7;
  }
  .gspan-lg-8 {
    grid-column: span 8;
  }
  .gspan-lg-9 {
    grid-column: span 9;
  }
  .gspan-lg-10 {
    grid-column: span 10;
  }
  .gspan-lg-11 {
    grid-column: span 11;
  }
  .gspan-lg-12 {
    grid-column: span 12;
  }
  .rgap-lg-0 {
    row-gap: 0;
  }
  .rgap-lg-1 {
    row-gap: 0.25rem;
  }
  .rgap-lg-2 {
    row-gap: 0.5rem;
  }
  .rgap-lg-3 {
    row-gap: 1rem;
  }
  .rgap-lg-4 {
    row-gap: 1.5rem;
  }
  .rgap-lg-5 {
    row-gap: 3rem;
  }
  .cgap-lg-0 {
    column-gap: 0;
  }
  .cgap-lg-1 {
    column-gap: 0.25rem;
  }
  .cgap-lg-2 {
    column-gap: 0.5rem;
  }
  .cgap-lg-3 {
    column-gap: 1rem;
  }
  .cgap-lg-4 {
    column-gap: 1.5rem;
  }
  .cgap-lg-5 {
    column-gap: 3rem;
  }
}
@media (min-width: 1200px) {
  .gcol-xl-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .gcol-xl-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gcol-xl-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gcol-xl-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gcol-xl-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .gcol-xl-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .gcol-xl-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .gcol-xl-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .gcol-xl-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .gcol-xl-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .gcol-xl-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .gcol-xl-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .gcol-xl-auto {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  .gspan-xl-1 {
    grid-column: span 1;
  }
  .gspan-xl-2 {
    grid-column: span 2;
  }
  .gspan-xl-3 {
    grid-column: span 3;
  }
  .gspan-xl-4 {
    grid-column: span 4;
  }
  .gspan-xl-5 {
    grid-column: span 5;
  }
  .gspan-xl-6 {
    grid-column: span 6;
  }
  .gspan-xl-7 {
    grid-column: span 7;
  }
  .gspan-xl-8 {
    grid-column: span 8;
  }
  .gspan-xl-9 {
    grid-column: span 9;
  }
  .gspan-xl-10 {
    grid-column: span 10;
  }
  .gspan-xl-11 {
    grid-column: span 11;
  }
  .gspan-xl-12 {
    grid-column: span 12;
  }
  .rgap-xl-0 {
    row-gap: 0;
  }
  .rgap-xl-1 {
    row-gap: 0.25rem;
  }
  .rgap-xl-2 {
    row-gap: 0.5rem;
  }
  .rgap-xl-3 {
    row-gap: 1rem;
  }
  .rgap-xl-4 {
    row-gap: 1.5rem;
  }
  .rgap-xl-5 {
    row-gap: 3rem;
  }
  .cgap-xl-0 {
    column-gap: 0;
  }
  .cgap-xl-1 {
    column-gap: 0.25rem;
  }
  .cgap-xl-2 {
    column-gap: 0.5rem;
  }
  .cgap-xl-3 {
    column-gap: 1rem;
  }
  .cgap-xl-4 {
    column-gap: 1.5rem;
  }
  .cgap-xl-5 {
    column-gap: 3rem;
  }
}
@media (min-width: 1400px) {
  .gcol-xxl-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .gcol-xxl-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gcol-xxl-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gcol-xxl-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gcol-xxl-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .gcol-xxl-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .gcol-xxl-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .gcol-xxl-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .gcol-xxl-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .gcol-xxl-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .gcol-xxl-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .gcol-xxl-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .gcol-xxl-auto {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  .gspan-xxl-1 {
    grid-column: span 1;
  }
  .gspan-xxl-2 {
    grid-column: span 2;
  }
  .gspan-xxl-3 {
    grid-column: span 3;
  }
  .gspan-xxl-4 {
    grid-column: span 4;
  }
  .gspan-xxl-5 {
    grid-column: span 5;
  }
  .gspan-xxl-6 {
    grid-column: span 6;
  }
  .gspan-xxl-7 {
    grid-column: span 7;
  }
  .gspan-xxl-8 {
    grid-column: span 8;
  }
  .gspan-xxl-9 {
    grid-column: span 9;
  }
  .gspan-xxl-10 {
    grid-column: span 10;
  }
  .gspan-xxl-11 {
    grid-column: span 11;
  }
  .gspan-xxl-12 {
    grid-column: span 12;
  }
  .rgap-xxl-0 {
    row-gap: 0;
  }
  .rgap-xxl-1 {
    row-gap: 0.25rem;
  }
  .rgap-xxl-2 {
    row-gap: 0.5rem;
  }
  .rgap-xxl-3 {
    row-gap: 1rem;
  }
  .rgap-xxl-4 {
    row-gap: 1.5rem;
  }
  .rgap-xxl-5 {
    row-gap: 3rem;
  }
  .cgap-xxl-0 {
    column-gap: 0;
  }
  .cgap-xxl-1 {
    column-gap: 0.25rem;
  }
  .cgap-xxl-2 {
    column-gap: 0.5rem;
  }
  .cgap-xxl-3 {
    column-gap: 1rem;
  }
  .cgap-xxl-4 {
    column-gap: 1.5rem;
  }
  .cgap-xxl-5 {
    column-gap: 3rem;
  }
}
@media (min-width: 1921px) {
  .gcol-3xl-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .gcol-3xl-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gcol-3xl-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gcol-3xl-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gcol-3xl-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .gcol-3xl-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .gcol-3xl-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .gcol-3xl-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .gcol-3xl-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .gcol-3xl-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .gcol-3xl-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .gcol-3xl-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .gcol-3xl-auto {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  .gspan-3xl-1 {
    grid-column: span 1;
  }
  .gspan-3xl-2 {
    grid-column: span 2;
  }
  .gspan-3xl-3 {
    grid-column: span 3;
  }
  .gspan-3xl-4 {
    grid-column: span 4;
  }
  .gspan-3xl-5 {
    grid-column: span 5;
  }
  .gspan-3xl-6 {
    grid-column: span 6;
  }
  .gspan-3xl-7 {
    grid-column: span 7;
  }
  .gspan-3xl-8 {
    grid-column: span 8;
  }
  .gspan-3xl-9 {
    grid-column: span 9;
  }
  .gspan-3xl-10 {
    grid-column: span 10;
  }
  .gspan-3xl-11 {
    grid-column: span 11;
  }
  .gspan-3xl-12 {
    grid-column: span 12;
  }
  .rgap-3xl-0 {
    row-gap: 0;
  }
  .rgap-3xl-1 {
    row-gap: 0.25rem;
  }
  .rgap-3xl-2 {
    row-gap: 0.5rem;
  }
  .rgap-3xl-3 {
    row-gap: 1rem;
  }
  .rgap-3xl-4 {
    row-gap: 1.5rem;
  }
  .rgap-3xl-5 {
    row-gap: 3rem;
  }
  .cgap-3xl-0 {
    column-gap: 0;
  }
  .cgap-3xl-1 {
    column-gap: 0.25rem;
  }
  .cgap-3xl-2 {
    column-gap: 0.5rem;
  }
  .cgap-3xl-3 {
    column-gap: 1rem;
  }
  .cgap-3xl-4 {
    column-gap: 1.5rem;
  }
  .cgap-3xl-5 {
    column-gap: 3rem;
  }
}