//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .hero-homestyle-alt01 {
        .hero-image-section {
            background-position: right center;
            background-size: cover;
            box-sizing: border-box;
            height: 380px;
            position: relative;
            .hero-image-section-inner {
                box-sizing: border-box;
                padding-left: 20px;
                padding-right: 20px;
                position: absolute;
                * {
                    max-width: 100%;
                    width: 550px;
                }
                .hero-image-section-heading {
                    margin-top: 0;
                }
                .hero-image-section-subheading {
                    color: @djo-gray-light;
                    font-weight: 700;
                    margin-top: 0;
                }
                :last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .hero-homestyle-alt01 {
        .hero-image-section {
            .hero-image-section-inner {
                background-color: #fff;
                bottom: 0;
                margin: auto;
                padding-bottom: 20px;
                padding-top: 20px;
                text-align: center;
                width: 100%;
                .hero-image-section-heading {
                    .lib-font-size(24);
                }
                .hero-image-section-subheading {
                    .lib-font-size(18);
                }
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .hero-homestyle-alt01 {
        .hero-image-section {
            .hero-image-section-inner {
                background-color: #fff;
                bottom: 0;
                margin: auto;
                padding-bottom: 20px;
                padding-top: 20px;
                text-align: center;
                width: 100%;
                * {
                    margin-left: auto;
                    margin-right: auto;
                }
                .hero-image-section-heading {
                    .lib-font-size(40);
                }
                .hero-image-section-subheading {
                    .lib-font-size(21);
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .hero-homestyle-alt01 {
        width: 65%;
        .hero-image-section {
            .hero-image-section-inner {
                background-color: transparent;
                bottom: auto;
                top: 50%;
                -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
                text-align: left;
                * {
                    margin-left: 0;
                    margin-right: 0;
                }
                .hero-image-section-subheading {
                    .lib-font-size(24);
                }
            }
        }
    }
}