//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    // reset defaults
    .cms-index-index {
        .page-header {
            margin-bottom: 0;
        }
        .header-promo {
            margin-bottom: 0;
            margin-top: -1px;
        }
        .page.messages {
            .message {
                margin-top: 18px;
            }
        }
        .columns .column.main {
            padding-bottom: 0;
        }
        .page-main {
            max-width: none;
            padding-left: 0;
            padding-right: 0;
        }
    }

    .hero-slider {
        li {
            margin: 0;
        }
        img {
            max-width: none;
            width: 100%;
        }
        .slick-dots {
            .lib-list-reset-styles();
            bottom: 20px;
            left: 0;
            margin: 0 auto;
            position: absolute;
            right: 0;
            text-align: center;
            li {
                display: inline-block;
                margin: 0 8px;
            }
            .slick-active button {
                background: @djo-gray;
            }
            button {
                background: transparent;
                border: 1px solid @djo-gray;
                border-radius: 50%;
                box-shadow: none;
                height: 10px;
                line-height: 1;
                padding: 0;
                text-indent: -9999px;
                width: 10px;
            }
        }
        &.hero-slider-with-video {
            .slick-dots {
                .slick-active button {
                    background-color: #fff;
                }
                button {
                    border-color: #fff;
                }
            }
        }
    }

    .community-section {
        background-repeat: no-repeat;
        background-size: 25.5% 100%;
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    // hide the desktop hero
    .hero {
        display: none;
    }
    .hero-slider {
        .lib-list-reset-styles();
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .community-section {
        background-image: none !important;
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    // hide the desktop hero
    .hero {
        display: none;
    }
    .hero-slider {
        .lib-list-reset-styles();
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .community-section {
        border-top: 1px solid #DBDFE2;
        padding: 30px 0 0;
        &.content-section {
            .cms-block-container.with-heading {
                .content-heading,
                .content-subheading {
                    margin-bottom: -15px;
                    text-align: left;
                }
            }
        }
        .cms-block-container {
            .image {
                img {
                    margin: 0;
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    // hide the mobile/tablet hero
    .hero-slider {
        display: none;
    }
    .hero {
        display: block;
        img {
            display: block;
            max-width: none;
            width: 100%;
        }
    }
}