//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .hero-text-container {
        .hero-heading {
            line-height: 1;
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .hero-text-container {
        .hero-heading {
            .lib-font-size(26);
            color: @djo-gray;
            margin-bottom: 12px;
            margin-top: 24px;
        }
        .hero-subheading {
            .lib-font-size(14);
            color: @djo-gray;
            margin-bottom: 22px;
        }
        .hero-cta {
            .lib-link-as-button();
            .lib-button-primary();
            padding: 11.5px 69.5px;
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .hero-text-container {
        .hero-heading {
            .lib-font-size(26);
            color: @djo-gray;
            margin-bottom: 12px;
        }
        .hero-subheading {
            .lib-font-size(14);
            color: @djo-gray;
            margin-bottom: 22px;
        }
        .hero-cta {
            .lib-link-as-button();
            .lib-button-primary();
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .hero-with-video {
        .lib-clearfix();
        .hero-left-container {
            float: left;
            width: 60%;
        }
        .hero-right-container {
            float: left;
            width: 40%;
        }
    }
    .hero-text-container {
        margin-left: auto;
        margin-right: auto;
        left: 0;
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        z-index: 1;
        .hero-heading {
            .lib-font-size(65);
            color: #fff;
            margin-bottom: 2px;
        }
        .hero-subheading {
            .lib-font-size(20);
            color: #fff;
            margin-bottom: 36px;
        }
    }
}