/* -----------------------------
    Grid system is working with 100% column width on mobile and we can 
    define different column withs with following declarations:

    .col-sm, .show-sm ≥ 600px;
    .col-md, .show-md ≥ 768px;
    .col-lg, .show-lg ≥ 992px;
    .col-xl, .show-xl ≥ 1024px;

    .hide-xs ≤ 480px;
    .hide-sm ≤ 560px;
    .hide-md ≤ 767px;
    .hide-lg ≤ 991px;
    .hide-xl ≤ 1024px;

    * media queries can be redefined based on based on layout needs

----------------------------- */
.row {
  display: grid;
  grid-template-rows: auto;
  grid-column-gap: 32px;
  grid-row-gap: 40px;
}

.row.gapless {
  gap: 0;
}

.col,
.col-12 {
  grid-column: span 12;
}

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 37.5rem) {
  .sm-2-cols {
    grid-template-columns: 1fr 1fr;
  }

  .sm-3-cols {
    grid-template-columns: repeat(3, 1fr);
  }

  .sm-4-cols {
    grid-template-columns: repeat(4, 1fr);
  }

  .col-sm-12 {
    grid-column: span 12;
  }

  .col-sm-11 {
    grid-column: span 11;
  }

  .col-sm-10 {
    grid-column: span 10;
  }

  .col-sm-9 {
    grid-column: span 9;
  }

  .col-sm-8 {
    grid-column: span 8;
  }

  .col-sm-7 {
    grid-column: span 7;
  }

  .col-sm-6 {
    grid-column: span 6;
  }

  .col-sm-5 {
    grid-column: span 5;
  }

  .col-sm-4 {
    grid-column: span 4;
  }

  .col-sm-3 {
    grid-column: span 3;
  }

  .col-sm-2 {
    grid-column: span 2;
  }

  .col-sm-1 {
    grid-column: span 1;
  }

  .show-sm {
    display: block;
  }

  .hide-sm {
    display: none;
  }
}

@media (min-width: 48rem) {
  .md-2-cols {
    grid-template-columns: 1fr 1fr;
  }

  .md-3-cols {
    grid-template-columns: repeat(3, 1fr);
  }

  .md-4-cols {
    grid-template-columns: repeat(4, 1fr);
  }

  .md-5-cols {
    grid-template-columns: repeat(5, 1fr);
  }

  .col-md-12 {
    grid-column: span 12;
  }

  .col-md-11 {
    grid-column: span 11;
  }

  .col-md-10 {
    grid-column: span 10;
  }

  .col-md-9 {
    grid-column: span 9;
  }

  .col-md-8 {
    grid-column: span 8;
  }

  .col-md-7 {
    grid-column: span 7;
  }

  .col-md-6 {
    grid-column: span 6;
  }

  .col-md-5 {
    grid-column: span 5;
  }

  .col-md-4 {
    grid-column: span 4;
  }

  .col-md-3 {
    grid-column: span 3;
  }

  .col-md-2 {
    grid-column: span 2;
  }

  .col-md-1 {
    grid-column: span 1;
  }

  .show-md {
    display: block;
  }
}

@media (min-width: 62rem) {
  .lg-2-cols {
    grid-template-columns: 1fr 1fr;
  }

  .lg-3-cols {
    grid-template-columns: repeat(3, 1fr);
  }

  .lg-4-cols {
    grid-template-columns: repeat(4, 1fr);
  }

  .lg-5-cols {
    grid-template-columns: repeat(5, 1fr);
  }

  .lg-6-cols {
    grid-template-columns: repeat(6, 1fr);
  }

  .col-lg-12 {
    grid-column: span 12;
  }

  .col-lg-11 {
    grid-column: span 11;
  }

  .col-lg-10 {
    grid-column: span 10;
  }

  .col-lg-9 {
    grid-column: span 9;
  }

  .col-lg-8 {
    grid-column: span 8;
  }

  .col-lg-7 {
    grid-column: span 7;
  }

  .col-lg-6 {
    grid-column: span 6;
  }

  .col-lg-5 {
    grid-column: span 5;
  }

  .col-lg-4 {
    grid-column: span 4;
  }

  .col-lg-3 {
    grid-column: span 3;
  }

  .col-lg-2 {
    grid-column: span 2;
  }

  .col-lg-1 {
    grid-column: span 1;
  }

  .show-lg {
    display: block;
  }
}

@media (min-width: 64rem) {
  .xl-2-cols {
    grid-template-columns: 1fr 1fr;
  }

  .xl-3-cols {
    grid-template-columns: repeat(3, 1fr);
  }

  .xl-4-cols {
    grid-template-columns: repeat(4, 1fr);
  }

  .xl-5-cols {
    grid-template-columns: repeat(5, 1fr);
  }

  .xl-6-cols {
    grid-template-columns: repeat(6, 1fr);
  }

  .col-xl-12 {
    grid-column: span 12;
  }

  .col-xl-11 {
    grid-column: span 11;
  }

  .col-xl-10 {
    grid-column: span 10;
  }

  .col-xl-9 {
    grid-column: span 9;
  }

  .col-xl-8 {
    grid-column: span 8;
  }

  .col-xl-7 {
    grid-column: span 7;
  }

  .col-xl-6 {
    grid-column: span 6;
  }

  .col-xl-5 {
    grid-column: span 5;
  }

  .col-xl-4 {
    grid-column: span 4;
  }

  .col-xl-3 {
    grid-column: span 3;
  }

  .col-xl-2 {
    grid-column: span 2;
  }

  .col-xl-1 {
    grid-column: span 1;
  }
  .show-xl {
    display: block;
  }
}

/* Hide under defined breakpoints */

@media (max-width: 1024px) {
  .hide-xl {
    display: none;
  }
}

@media (max-width: 991px) {
  .hide-lg {
    display: none;
  }
}

@media (max-width: 767px) {
  .hide-md {
    display: none;
  }
}

@media (max-width: 560px) {
  .hide-sm {
    display: none;
  }
}

@media (max-width: 480px) {
  .hide-xs {
    display: none;
  }
}