/* ==========================================================================
   Hero extends and mixins
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    background-image: url('../img/hero.jpg');
    background-size: cover;
    background-position: center;
    min-height: 300px;
    height: 60vh;
    margin-bottom: $global-margin*5;

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

    > .container {
        height: 50vh;
    }

    &__content {
        @include xy-cell-base();
        @include xy-cell-static($grid-columns, false, $gutter-type: padding);

        @include breakpoint(medium) {
            @include xy-cell(2 of 3);
        }

        h1 {
            font-family: 'Kaushan Script', cursive;
            color: $white;
            text-shadow: 0px 6px 10px $black;
            font-size: 3rem;
            text-align: center;
        }

        @include breakpoint(medium) {
            h1 {
                font-size: 4rem;
            }
        }

        @include breakpoint(large) {
            h1 {
                font-size: 7rem;
            }
        }
    }
}