.hero {
    .hero-box {
        display: flex;
        flex-wrap: wrap;
        @extend %flexCenterBetween;
        padding: 6vh 0;
        &__content {
            display: flex;
            flex-direction: column;
            @extend %flexStartBetween;
            height: 100%;
            h2 {
                display: block;
                max-width: 80%;
            }
            .btns-box {
                .btn { margin: 0 15px; }
            }
        }
        &__img {
            display: flex;
            align-items: center;
            img { width: 100%; }
        }
    }
    @media (max-width: 767px) {
        .hero-box {
            display: block;
            &__content {
                height: auto;
            }
        }
    }
}