/* ==========================================================================
   Page container widths.
   The base theme pins every container to 1140px from 1200px up, which leaves
   wide monitors mostly empty. These steps let the content grow with the screen
   up to a 1720px ceiling. `!important` is needed because responsive.css caps
   `.container` with `!important` of its own.
   ========================================================================== */

@media (min-width: 1200px) {
    .container,
    .container-md,
    .container-lg {
        max-width: 1160px !important;
    }
}

@media (min-width: 1400px) {
    .container,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1360px !important;
    }
}

@media (min-width: 1600px) {
    .container,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1560px !important;
    }
}

@media (min-width: 1760px) {
    .container,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1720px !important;
    }
}


/* ==========================================================================
   Page header: title only, no cover image.
   The views set the image with an inline `style="background: url(...)"`, so the
   override needs `!important` to beat it - that way all 18 page views are
   covered without touching each one.
   ========================================================================== */

.main-banner {
    padding-top: 42px;
    padding-bottom: 26px;
    background: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.main-banner h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    line-height: 1.25;
}

.main-banner h2 span {
    padding: 0;
    background: none;
}