// 
// Masthead
// 

header.masthead {
    position: relative;
    background-color: $gray-800;
    background: url('../assets/img/bg-masthead.jpg') no-repeat center center;
    background-size: cover;
    padding-top: 8rem;
    padding-bottom: 8rem;

    &:before {
        content: '';
        position: absolute;
        background-color: mix($gray-900, $primary, 75%);
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0.5;
    }

    h1 {
        font-size: 2rem;
    }

    @media (min-width: 768px) {
        padding-top: 12rem;
        padding-bottom: 12rem;

        h1 {
            font-size: 3rem;
        }
    }
}