/* ===================================================
   12-COLUMN GRID SYSTEM
   Desktop-first breakpoints:
     base   >= 1281px  (xl)
     lg-    <= 1280px
     md-    <=  980px
     sm-    <=  768px
     xs-    <=  480px
   =================================================== */

.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  width: 100%;
}

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

.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; }

.hide { display: none !important; }

/* lg: <=1280 */
@media screen and (max-width: 1280px) {
  .lg-col-1  { grid-column: span 1; }
  .lg-col-2  { grid-column: span 2; }
  .lg-col-3  { grid-column: span 3; }
  .lg-col-4  { grid-column: span 4; }
  .lg-col-5  { grid-column: span 5; }
  .lg-col-6  { grid-column: span 6; }
  .lg-col-7  { grid-column: span 7; }
  .lg-col-8  { grid-column: span 8; }
  .lg-col-9  { grid-column: span 9; }
  .lg-col-10 { grid-column: span 10; }
  .lg-col-11 { grid-column: span 11; }
  .lg-col-12 { grid-column: span 12; }

  .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-hide { display: none !important; }
}

/* md: <=980 */
@media screen and (max-width: 980px) {
  .md-col-1  { grid-column: span 1; }
  .md-col-2  { grid-column: span 2; }
  .md-col-3  { grid-column: span 3; }
  .md-col-4  { grid-column: span 4; }
  .md-col-5  { grid-column: span 5; }
  .md-col-6  { grid-column: span 6; }
  .md-col-7  { grid-column: span 7; }
  .md-col-8  { grid-column: span 8; }
  .md-col-9  { grid-column: span 9; }
  .md-col-10 { grid-column: span 10; }
  .md-col-11 { grid-column: span 11; }
  .md-col-12 { grid-column: span 12; }

  .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-hide { display: none !important; }
}

/* sm: <=768 */
@media screen and (max-width: 768px) {
  .sm-col-1  { grid-column: span 1; }
  .sm-col-2  { grid-column: span 2; }
  .sm-col-3  { grid-column: span 3; }
  .sm-col-4  { grid-column: span 4; }
  .sm-col-5  { grid-column: span 5; }
  .sm-col-6  { grid-column: span 6; }
  .sm-col-7  { grid-column: span 7; }
  .sm-col-8  { grid-column: span 8; }
  .sm-col-9  { grid-column: span 9; }
  .sm-col-10 { grid-column: span 10; }
  .sm-col-11 { grid-column: span 11; }
  .sm-col-12 { grid-column: span 12; }

  .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-hide { display: none !important; }
}

/* xs: <=480 */
@media screen and (max-width: 480px) {
  .xs-col-1  { grid-column: span 1; }
  .xs-col-2  { grid-column: span 2; }
  .xs-col-3  { grid-column: span 3; }
  .xs-col-4  { grid-column: span 4; }
  .xs-col-5  { grid-column: span 5; }
  .xs-col-6  { grid-column: span 6; }
  .xs-col-7  { grid-column: span 7; }
  .xs-col-8  { grid-column: span 8; }
  .xs-col-9  { grid-column: span 9; }
  .xs-col-10 { grid-column: span 10; }
  .xs-col-11 { grid-column: span 11; }
  .xs-col-12 { grid-column: span 12; }

  .xs-col-start-1  { grid-column-start: 1; }
  .xs-col-start-2  { grid-column-start: 2; }
  .xs-col-start-3  { grid-column-start: 3; }
  .xs-col-start-4  { grid-column-start: 4; }
  .xs-col-start-5  { grid-column-start: 5; }
  .xs-col-start-6  { grid-column-start: 6; }
  .xs-col-start-7  { grid-column-start: 7; }
  .xs-col-start-8  { grid-column-start: 8; }
  .xs-col-start-9  { grid-column-start: 9; }
  .xs-col-start-10 { grid-column-start: 10; }
  .xs-col-start-11 { grid-column-start: 11; }
  .xs-col-start-12 { grid-column-start: 12; }

  .xs-hide { display: none !important; }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}