/* ==========================================================================
   grid.css — minimal Bootstrap 5 grid replacement
   Contains only the classes used on this page. Verified pixel-identical
   against bootstrap-grid 5.3.3.

   If a new class is added to the markup (offsets, order, other breakpoints),
   it must be added here too — it will NOT silently fall back to Bootstrap.
   ========================================================================== */

/* ---- Reboot ----
   Bootstrap ships these in Reboot, not in the grid itself. Without them the
   layout overflows horizontally (no border-box) and vertical rhythm shifts
   to the browser defaults. Values mirror Bootstrap 5.3 Reboot. */

*,
*::before,
*::after { box-sizing: border-box; }

body { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 2rem;
}

img, svg, video { vertical-align: middle; }

button {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ---- Grid ---- */

.row {
  --gutter-x: 1.5rem;
  --gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gutter-y));
  margin-right: calc(-.5 * var(--gutter-x));
  margin-left: calc(-.5 * var(--gutter-x));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gutter-x) * .5);
  padding-left: calc(var(--gutter-x) * .5);
  margin-top: var(--gutter-y);
}

/* ---- Gutters ---- */
.g-3 { --gutter-x: 1rem;   --gutter-y: 1rem; }
.g-4 { --gutter-x: 1.5rem; --gutter-y: 1.5rem; }
.g-5 { --gutter-x: 3rem;   --gutter-y: 3rem; }

/* ---- Columns: all viewports ---- */
.col-6  { flex: 0 0 auto; width: 50%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* ---- md: >= 768px ---- */
@media (min-width: 768px) {
  .col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* ---- lg: >= 992px ---- */
@media (min-width: 992px) {
  .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
}

/* ---- Flex alignment ---- */
.align-items-center { align-items: center !important; }

/* ---- Spacing ---- */
.mt-5 { margin-top: 3rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
