/* ==========================================================================
   Banner extends and mixins
   ========================================================================== */

/* ==========================================================================
   Banner
   ========================================================================== */

.banner {
    background-color: get-color(primary);

    &__inner {
        @include xy-grid;
        @include flex-align($x: center, $y: middle);
    }

    &__content {
        padding: $global-padding/2 0;
        color: $white;

        h2 {
            margin: 0;
        }
    }
}