// Minimal grid & utilities — self-hosted replacement for the small subset of
// Bootstrap 4 this site used. Removes a render-blocking ~160 KB external
// stylesheet. Breakpoint lg = 992px (one past $m-break: 991px).

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

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;

  > [class*="col-"] {
    position: relative;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

// mobile-first: columns are full width until the lg breakpoint
[class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; }

.align-items-center { align-items: center; }
.text-center { text-align: center; }
.mb-4 { margin-bottom: 1.5rem; }

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
  .mb-lg-0 { margin-bottom: 0; }
}