/* Generic - Banner */

.pageGeneric--banner {
    position: relative;
    margin-bottom: var(--padding-y); /* 40px */
}

.pageGeneric--banner:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: hsla(0, 0%, 0%, 0.2);
}

.pageGeneric--banner + .topic-title-text:not(.beige):not(.white):not(.blue):not(.darkBlue) {
    padding-top: 0;
}

.pageGeneric--banner--background {
    display: block;
    width: 100%;
    height: 14rem; /* 224px */
}

.pageGeneric--banner--filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: hsla(0, 0%, 0%, 0.2);*/
    background-color: hsla(207, 75%, 76%, 0.30);
    z-index: 2;
}

.pageGeneric--title {
    color: var(--white);
    text-align: center;
    text-transform: uppercase;
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.page-blueBanner--title {
    position: static;

    width: 100%;

    padding: 5rem var(--padding-x);

    background-color: var(--primary-400);

    transform: none;
}

.pageGeneric > .content-width {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pageGeneric > .content-width > *:not(.component-cta):not(.cta) {
    width: 100%;
}

.pageGeneric > .content-width > .component-cta {
    margin-top: var(--padding-y);
    margin-bottom: calc(var(--padding-y) * 2);
}

.pageGeneric h1 + .component-cta:nth-last-child(2),
.pageGeneric h1 + .cta:nth-last-child(2) {
    margin-top: var(--padding-y);
}

.pageGeneric > .content-width > .topic-title-text + .component-cta {
    margin-top: 0;
}

.pageGeneric > .content-width > .component-cta:has( + .topic-title-text),
.pageGeneric > .content-width > .component-cta:has( + .styles-scripts + .topic-title-text) {
    margin-bottom: 0;
}

.pageGeneric > .content-width > .component-cta:has( + .styles-scripts:last-child) {
    margin-bottom: var(--padding-y);
}

.pageGeneric > .content-width > *:last-child:not(.pageGeneric--banner):not(.has-dark-overlay),
.pageGeneric > .content-width > *:not(a):nth-last-child(2):not(.pageGeneric--banner):not(.has-dark-overlay):has( + .styles-scripts) {
    padding-bottom: var(--padding-y);
}

.pageGeneric > .content-width > a:nth-last-child(2):not(.pageGeneric--banner):not(.has-dark-overlay):has( + .styles-scripts) {
    margin-bottom: var(--padding-y);
}

@media screen and (min-width: 64rem) /* 1024px */ {

    .pageGeneric--title {
        width: 80%;
    }

    .page-blueBanner--title {
        width: 100%;
    }

}