/* 12-column, mobile-first grid built with CSS Grid.
   Usage: <div class="grid"><div class="col-12 col-md-6 col-lg-4">…</div></div>
   Breakpoints: sm 640px, md 960px, lg 1200px, xl 1440px */

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.grid > :where(*) { grid-column: 1 / -1; }
.grid.tight { gap: 0.75rem; }
.grid.flush { gap: 0; }
.grid.center { align-items: center; }
.grid.start { align-items: start; }

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

@media (min-width: 640px) {
  .col-sm-1 { grid-column: auto / span 1; }
  .col-sm-2 { grid-column: auto / span 2; }
  .col-sm-3 { grid-column: auto / span 3; }
  .col-sm-4 { grid-column: auto / span 4; }
  .col-sm-5 { grid-column: auto / span 5; }
  .col-sm-6 { grid-column: auto / span 6; }
  .col-sm-7 { grid-column: auto / span 7; }
  .col-sm-8 { grid-column: auto / span 8; }
  .col-sm-9 { grid-column: auto / span 9; }
  .col-sm-10 { grid-column: auto / span 10; }
  .col-sm-11 { grid-column: auto / span 11; }
  .col-sm-12 { grid-column: auto / span 12; }
  .start-sm-1 { grid-column-start: 1; }
  .start-sm-2 { grid-column-start: 2; }
  .start-sm-3 { grid-column-start: 3; }
  .start-sm-4 { grid-column-start: 4; }
  .start-sm-5 { grid-column-start: 5; }
  .start-sm-6 { grid-column-start: 6; }
  .start-sm-7 { grid-column-start: 7; }
  .start-sm-8 { grid-column-start: 8; }
  .start-sm-9 { grid-column-start: 9; }
  .start-sm-10 { grid-column-start: 10; }
  .start-sm-11 { grid-column-start: 11; }
}

@media (min-width: 960px) {
  .col-md-1 { grid-column: auto / span 1; }
  .col-md-2 { grid-column: auto / span 2; }
  .col-md-3 { grid-column: auto / span 3; }
  .col-md-4 { grid-column: auto / span 4; }
  .col-md-5 { grid-column: auto / span 5; }
  .col-md-6 { grid-column: auto / span 6; }
  .col-md-7 { grid-column: auto / span 7; }
  .col-md-8 { grid-column: auto / span 8; }
  .col-md-9 { grid-column: auto / span 9; }
  .col-md-10 { grid-column: auto / span 10; }
  .col-md-11 { grid-column: auto / span 11; }
  .col-md-12 { grid-column: auto / span 12; }
  .start-md-1 { grid-column-start: 1; }
  .start-md-2 { grid-column-start: 2; }
  .start-md-3 { grid-column-start: 3; }
  .start-md-4 { grid-column-start: 4; }
  .start-md-5 { grid-column-start: 5; }
  .start-md-6 { grid-column-start: 6; }
  .start-md-7 { grid-column-start: 7; }
  .start-md-8 { grid-column-start: 8; }
  .start-md-9 { grid-column-start: 9; }
  .start-md-10 { grid-column-start: 10; }
  .start-md-11 { grid-column-start: 11; }
}

@media (min-width: 1200px) {
  .col-lg-1 { grid-column: auto / span 1; }
  .col-lg-2 { grid-column: auto / span 2; }
  .col-lg-3 { grid-column: auto / span 3; }
  .col-lg-4 { grid-column: auto / span 4; }
  .col-lg-5 { grid-column: auto / span 5; }
  .col-lg-6 { grid-column: auto / span 6; }
  .col-lg-7 { grid-column: auto / span 7; }
  .col-lg-8 { grid-column: auto / span 8; }
  .col-lg-9 { grid-column: auto / span 9; }
  .col-lg-10 { grid-column: auto / span 10; }
  .col-lg-11 { grid-column: auto / span 11; }
  .col-lg-12 { grid-column: auto / span 12; }
  .start-lg-1 { grid-column-start: 1; }
  .start-lg-2 { grid-column-start: 2; }
  .start-lg-3 { grid-column-start: 3; }
  .start-lg-4 { grid-column-start: 4; }
  .start-lg-5 { grid-column-start: 5; }
  .start-lg-6 { grid-column-start: 6; }
  .start-lg-7 { grid-column-start: 7; }
  .start-lg-8 { grid-column-start: 8; }
  .start-lg-9 { grid-column-start: 9; }
  .start-lg-10 { grid-column-start: 10; }
  .start-lg-11 { grid-column-start: 11; }
}

@media (min-width: 1440px) {
  .col-xl-1 { grid-column: auto / span 1; }
  .col-xl-2 { grid-column: auto / span 2; }
  .col-xl-3 { grid-column: auto / span 3; }
  .col-xl-4 { grid-column: auto / span 4; }
  .col-xl-5 { grid-column: auto / span 5; }
  .col-xl-6 { grid-column: auto / span 6; }
  .col-xl-7 { grid-column: auto / span 7; }
  .col-xl-8 { grid-column: auto / span 8; }
  .col-xl-9 { grid-column: auto / span 9; }
  .col-xl-10 { grid-column: auto / span 10; }
  .col-xl-11 { grid-column: auto / span 11; }
  .col-xl-12 { grid-column: auto / span 12; }
  .start-xl-1 { grid-column-start: 1; }
  .start-xl-2 { grid-column-start: 2; }
  .start-xl-3 { grid-column-start: 3; }
  .start-xl-4 { grid-column-start: 4; }
  .start-xl-5 { grid-column-start: 5; }
  .start-xl-6 { grid-column-start: 6; }
  .start-xl-7 { grid-column-start: 7; }
  .start-xl-8 { grid-column-start: 8; }
  .start-xl-9 { grid-column-start: 9; }
  .start-xl-10 { grid-column-start: 10; }
  .start-xl-11 { grid-column-start: 11; }
}