/* Minimal Bootstrap-grid subset for the About page's body layout.
 *
 * about.html used to pull the full bootstrap.css from the CDN, but Bootstrap's
 * spacing utilities (.py-5, .mb-3, .gap-3, .mx-2, .p-0, .top-0 ...) share class
 * names with Tailwind's on a different scale AND carry !important, so they
 * hijacked the shared header/footer and made them render taller than on every
 * other page. Only the grid was ever needed, so only the grid lives here.
 *
 * Nothing in this file uses !important, and it defines no utility class that
 * Tailwind also defines.
 */

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

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

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

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 12px;
    padding-left: 12px;
}

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

@media (min-width: 768px) {
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
}