/* ALL HEADERS ------------------------------------- */
.page-info {
    padding: 2.5rem 0rem 2.5rem 8rem;
    margin: auto;
}

/* LIGHT HEADER ------------------------------------- */
.light-banner {
    background-color: var(--bg-default);
    color: var(--text-brand-blue);
    background-image: url('https://assets.codepen.io/2146429/hero-background.png');
    background-repeat: no-repeat;
    background-size: 60%;
    margin-bottom: 0;
}

.light-banner-image {
    height: 100%;
}

.banner-image {
    float: right;
}

/* DARK HEADER ------------------------------------- */
.dark-banner {
    background-color: var(--bg-brand-blue);
    color: var(--text-inverse);
    margin-bottom: 0;
}

.banner-illustration {
    max-height: 18rem;
    padding-top: 1.5rem;
    float: right;
}

    

@media (max-width: 604px) {
    .light-banner {
        background-size:cover;
    }

    .page-info {
        padding: .25rem;
        margin: 1rem;
    }

    .col.banner-col {
        display: none;
    }

}