//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .content-heading {
        text-align: center;
        &.with-divider {
            &::after {
                background-color: @djo-blue;
                content: '';
                display: block;
                height: 4px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 35px;
                width: 54px;
            }
        }
    }
    .content-subheading {
        color: @djo-gray-light;
        font-weight: 700;
        text-align: center;
        &.with-divider {
            &::after {
                background-color: @djo-blue;
                content: '';
                display: block;
                height: 4px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 35px;
                width: 54px;
            }
        }
    }
    // .content-heading + .content-subheading {
    //     margin-top: -10px;
    // }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .content-section {
        .content-heading {
            .lib-font-size(24);
            margin: 0 0 6px;
            &.smaller,
            &.smaller-on-mobile-only {
                .lib-font-size(21);
            }
            &.with-divider {
                margin-bottom: 26px;
            }
            + .content-button {
                margin-top: 25px;
            }
        }
        .content-subheading {
            .lib-font-size(14);
            margin: 0 0 26px;
        }
        // .content-heading + .content-subheading {
        //     margin-top: -10px;
        // }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .content-section {
        .content-heading {
            .lib-font-size(36);
            margin: 0 0 12px;
            &.smaller,
            &.smaller-on-desktop-only {
                .lib-font-size(28);
            }
            &.with-divider {
                margin-bottom: 30px;
            }
            + .content-button {
                margin-top: 14px;
            }
        }
        .content-subheading {
            .lib-font-size(22);
            margin: 0 0 30px;
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .content-section {
        .content-subheading {
            .lib-font-size(20);
        }
    }
}