.hero {
    background: $brand-03;
    padding-top: $spacer * 2;
    padding-bottom: $spacer * 2;
    min-height: 100vh;

    &,
    .hero__title,
    .hero__action {
        color: #fff;
    }

    .menu--main {
        background: transparent;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .menu__link {
        color: rgba(#fff, .8);

        &:after {
            background: rgba(#fff, .8);
        }

        &:hover,
        &:focus,
        &.active {
            color: #fff;

            &:after {
                background: #fff;
            }

            .logo {
                fill: #fff;
            }
        }
    }

    .logo {
        fill: rgba(#fff, .95);
    }
}