/* Banner */

#banner {
    @include padding(6em, 0);
    @include vendor('display', 'flex');

    h1 {
        margin-top: -0.125em;
    }

    .content {
        @include vendor('flex-grow', '1');
        @include vendor('flex-shrink', '1');
        width: 50%;
    }

    .image {
        @include vendor('flex-grow', '0');
        @include vendor('flex-shrink', '0');
        display: block;
        margin: 0 0 _size(element-margin) (_size(element-margin) * 2);
        width: 50%;

        img {
            height: 100%;
            -moz-object-fit: cover;
            -webkit-object-fit: cover;
            -ms-object-fit: cover;
            object-fit: cover;
            -moz-object-position: center;
            -webkit-object-position: center;
            -ms-object-position: center;
            object-position: center;
            width: 100%;
        }
    }

    header p {
        text-transform: none !important;
    }

    @include orientation(portrait) {
        @include vendor('flex-direction', 'column-reverse');

        h1 {
            br {
                display: none;
            }
        }

        .content {
            @include vendor('flex-grow', '0');
            @include vendor('flex-shrink', '0');
            width: 100%;
        }

        .image {
            @include vendor('flex-grow', '0');
            @include vendor('flex-shrink', '0');
            margin: 0 0 (_size(element-margin) * 2) 0;
            height: 25em;
            max-height: 50vh;
            min-height: 18em;
            width: 100%;
        }
    }
}

/* Inverted */

section#banner.inverted {
    background-color: transparent !important;
}