Hero: Default

.hero {

    &__wrap {
        background-color: $color-main;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    &__inner {
        @include container-inner-styles;
        
        height: 285px;
        @include mappy-bp(small) {
            
            height: auto;
        }
    }

    &__img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        @include mappy-bp(small) {
            object-fit: none;
            height: auto;
        }
    }
}


.hero-sub {
    color:#ffffff;
    &__wrap {
        background-color: $color-main;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        @include mappy-bp(small) {

        }
    }

    &__img {
        display: block;
        max-width: 100%;
    }
    &__title {
        padding: $elem-pad-sm;
        margin: 0;
        @include mappy-bp(small) {
           // padding: 0;
            margin-bottom: rem(50);
        }
        @include mappy-bp(max) {
            padding: 0;
        }
    }
    &__left {
        grid-column: span 12;
        display: flex;
        align-items: flex-end;
        @include mappy-bp(small) {
            grid-column: span 5;
        }
    }
    &__right {
        display: none;
        grid-column: span 7;
        @include mappy-bp(small) {
            display: block;
        }
    }
    &__inner {
        

    }
}