/* Split Panel Banner */
/* Requires variables_1.0.css */
/* Reference HTML
<div class="banner-wrapper">
    <div class="left">
        <h1>Lorem</h1>
        <h2>Ipsum</h2>
        <p>Lorem impsum</p>
    </div>
    <div class="right"></div>
</div>
*/

.top-container {
    padding: 0;
    max-width: 100%;
}

.banner-wrapper {
    display: flex;
    flex-direction: column-reverse;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: var(--width-content-max);
}

.banner-wrapper .left {
    align-self: center;
    padding: 2rem;
}

.banner-wrapper .right {
    background: url(/media/wysiwyg/top-banner.jpg);
    width: 100%;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    min-height: 15rem;
}


@media only screen and (min-width: 768px) {

    .banner-wrapper .right {
        min-height: 30rem;
    }

}

@media only screen and (min-width: 1024px) {

    .banner-wrapper {
        display: flex;
        flex-direction: row;
        background-position-x: center;
    }

    .banner-wrapper > * {
        width: 100%;
        max-width: var(--width-content-max)
    }


}


@media only screen and (min-width: 1440px) {

    .banner-wrapper .right {
        min-height: 40rem;
    }

}