.header {
    position: relative;
    margin-bottom: gutter(6);
    background: $brand-color-a;
    color: $brand-white;
    z-index: $z-mid;

    @include breakpoint($sm) {
        border: 0;
    }
}

.header__inner {
    padding: 40px 0;
    overflow: auto;
    overflow-x: hidden;

    @include breakpoint($md) {
        display: flex;
        flex-wrap: wrap;
        padding: 80px 0;
    }
}

.header__content {
    width: 100%;

    @include breakpoint($md) {
        @include span(8);
        @include last();
    }
}

.header__title {
    @extend .h1;
    margin-bottom: 5px;
}

.header__subtitle {
    @extend .h2;
    color: mix($brand-color-a, $brand-color-f);
    margin-bottom: 25px;
}

.header__promo {
    @include hex__outer;
    display: none;

    @include breakpoint($md) {
        display: block;
        @include span(4);
        margin-bottom: gutter(8);
    }
}
.header__promo__inner {
    @include hex__middle;
}
.header__promo__media {
    @include hex__inner;
}

.header__social {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    margin-top: 10vh;
}

.header__social__item {
    margin: 0;
}

.header__social__link {
    font-size: 150%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 10px;
    background: tint($brand-color-a, 50%);
    color: mix($brand-color-a, $brand-color-f, 80%);

    .header__social__item:nth-child(5n) & {
        background: tint($brand-color-a, 30%);
    }
    .header__social__item:nth-child(even) & {
        background: tint($brand-color-a, 40%);
    }

    &:hover {
        background: tint($brand-color-a, 25%);

        .header__social__item:nth-child(even) &,
        .header__social__item:nth-child(5n) & {
            background: tint($brand-color-a, 25%);
        }
    }
}