/**
 * Hand-written 12-column grid utility — a vanilla-CSS replacement for
 * Bootstrap's grid system, since the source template's markup is built
 * entirely around .container/.row/.col-* classes. Gutter spacing (the
 * negative row margin + column padding) matches what the template's own
 * custom.css already defines; this file supplies the actual column widths
 * and breakpoints that would otherwise come from bootstrap.min.css.
 */

.container {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: 15px;
}

.container-fluid {
  width: 100%;
  padding-inline: 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -15px;
  /* Horizontal gutter comes from the negative margin + column padding below.
     row-gap covers the vertical gap Bootstrap's own gutters would otherwise
     provide once columns wrap onto their own line (i.e. stacked on mobile) —
     without it, a column's content butts directly against the next column's
     heading with zero space between them. Flexbox row-gap is a no-op when
     everything still fits on one line, so desktop layouts are unaffected. */
  row-gap: 40px;
}

.row.no-gutters {
  margin-inline: 0;
  row-gap: 0;
}

.row.no-gutters > * {
  padding-inline: 0;
}

.row > * {
  width: 100%;
  padding-inline: 15px;
}

.align-items-center {
  align-items: center;
}

/* Base (mobile-first): every column is full-width until a breakpoint says otherwise */
[class*='col-'] {
  flex: 0 0 auto;
}

.col-12 { width: 100%; }

/* md ≥768px */
@media (min-width: 768px) {
  .col-md-6 { width: 50%; }
  .col-md-12 { width: 100%; }
}

/* lg ≥992px */
@media (min-width: 992px) {
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.3333%; }
  .col-lg-5 { width: 41.6667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.3333%; }
  .col-lg-12 { width: 100%; }
}

/* xl ≥1200px */
@media (min-width: 1200px) {
  .col-xl-3 { width: 25%; }
  .col-xl-4 { width: 33.3333%; }
  .col-xl-5 { width: 41.6667%; }
  .col-xl-6 { width: 50%; }
  .col-xl-7 { width: 58.3333%; }
  .col-xl-8 { width: 66.6667%; }
  .col-xl-9 { width: 75%; }
  .col-xl-12 { width: 100%; }
}