//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .cms-block-container {
        &.cms-block-numbered {
            .copy {
                .copy-inner {
                    .copy-heading {
                        &::before {
                            color: #D7D7D7;
                            content: counter(number-heading) ". ";
                            counter-increment: number-heading;
                            display: block;
                            font-weight: 700;
                        }
                    }
                    p, ul, ol, li {
                        color: @djo-gray-light;
                    }
                }
            }
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .cms-block-container {
        &.cms-block-numbered {
            .copy {
                .copy-inner {
                    .copy-heading {
                        .lib-font-size(24);
                        &::before {
                            .lib-font-size(50);
                        }
                    }
                    p, ul, ol, li {
                        .lib-font-size(15);
                    }
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m + 1) {
    .cms-block-container {
        &.cms-block-numbered {
            .copy {
                .copy-inner {
                    padding-top: 90px;
                    text-align: center;
                    .copy-heading {
                        &::before {
                            margin-left: auto;
                            margin-right: auto;
                        }
                    }
                }
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .cms-block-container {
        &.cms-block-numbered {
            .copy {
                .copy-inner {
                    .copy-heading {
                        .lib-font-size(28);
                        &::before {
                            .lib-font-size(67);
                        }
                    }
                    p, ul, ol, li {
                        .lib-font-size(18);
                    }
                }
            }
        }
    }
}