.container-bg-image {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.container-bg-overlay {
    position: absolute;
    inset: 0;
}

.container-bg-content {
    position: relative;
    z-index: 1;
}

/* --header-height is set by the consuming sitepackage (e.g. a fixed/sticky
   header's actual height); the 0px fallback keeps this working for projects
   that never set it.
   display:flex + justify-content:center vertically centers the single
   content-wrapper child within the extra height - the row/column alignment
   fields (containerAlignItems etc.) only align columns relative to each
   other inside that child, which is never itself as tall as this div, so
   they can't center it on their own. */
.container-full-height {
    min-height: calc(100vh - var(--header-height, 0px));
    display: flex;
    flex-direction: column;
    justify-content: center;
}