// HEADER STYLES
// --------------------------------------------------------------------
.masthead {
    @extend %container;

    padding: 0 1rem;
    text-align: center;

    @media screen and (min-width: $sm) {
        padding: 0;
    }

    @media screen and (min-width: $md) {
        position: relative;
    }

    h1 {
        display: inline-block;
        font-size: 1.5rem;

        @media screen and (min-width: $md) {
            font-size: 2.25rem;
        }

        @media screen and (min-width: $lg) {
            font-size: 2.5rem;
        }

        @media screen and (min-width: $xl) {
            font-size: 3rem;
            margin: 2.5rem 0 1.5rem;
        }
    }

    a {
        &,
        &:visited,
        &:hover,
        &:focus {
            color: $off-black;
            text-decoration: none;
            transition: color .25s linear;
        }

        &:hover,
        &:focus {
            color: $ci-greyed-out;
            transition: color .25s linear;
        }
    }
}

.blog-version {
    @include visuallyhidden;

    @media screen and (min-width: $md) {
        @include not-visuallyhidden;

        color: $grey;
    }
}

// HEADER STYLES
// --------------------------------------------------------------------
.masthead {
    @extend %container;

    padding: 0 1rem;
    text-align: center;

    @media screen and (min-width: $sm) {
        padding: 0;
    }

    @media screen and (min-width: $md) {
        position: relative;
    }

    h1 {
        display: inline-block;
        font-size: 1.5rem;

        @media screen and (min-width: $md) {
            font-size: 2.25rem;
        }

        @media screen and (min-width: $lg) {
            font-size: 2.5rem;
        }

        @media screen and (min-width: $xl) {
            font-size: 3rem;
            margin: 2.5rem 0 1.5rem;
        }
    }

    a {
        display: inline-block;

        &,
        &:visited,
        &:hover,
        &:focus {
            color: $off-black;
            text-decoration: none;
            transition: color .25s linear;
        }

        &:hover,
        &:focus {
            color: $ci-greyed-out;
            transition: color .25s linear;
        }
    }
}

.blog-version {
    @include visuallyhidden;

    @media screen and (min-width: $md) {
        @include not-visuallyhidden;

        color: $grey;
    }
}

Make sure masthead link spans heading
Make sure masthead link spans heading
