& when (@media-common = true) {
    footer.page-footer {
        background-color: @color-gray-2;
        color: @color-white;

        .footer {
            &.content {
                padding: 43px 10px 40px;

                .pagebuilder-column {

                    li {
                        background-color: transparent;
                        border: 0;
                        margin-bottom: 10px;

                        &:last-child {
                            margin-bottom: 0;
                        }

                        &:before {
                            font-family: @icons__font-name;
                            font-size: 10px;
                            color: @color-gray-3;
                            content: @icon-next;
                            margin: 0 auto;
                        }

                        > a {
                            margin-left: 5px;
                            font-size: 16px;
                            display: inline-block;
                        }
                    }

                    &.reply__footer__social {
                        position: relative;

                        div {
                            i {
                                font-size: 26px;
                                margin-right: 11px;
                            }
                        }
                    }
                }

                a {
                    color: @color-gray-3;
                }
            }
        }
    }

    small.copyright {
        color: @color-gray-4;
        background-color: @color-gray-1;
        font-size: 14px;

        .copyright__text {
            margin: 0 auto;
        }
    }
}

//
//  Mobile (styles-m.css)
//  _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    footer.page-footer {
        .footer {
            &.content {
                padding: 10px 0 10px 30px;

                .pagebuilder-column {
                    padding: 20px 0 20px 0;

                    &.reply__footer__social {
                        div {
                            position: relative;
                        }
                    }
                }
            }
        }
    }
    small.copyright {
        .copyright__text {
            width: auto;
            padding: 20px;
        }
    }
}

//
//  Desktop (style-l.css)
//  _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    footer.page-footer {
        .footer {
            &.content {
                padding: 40px 0 15px 20px;

                .pagebuilder-column {
                    &.reply__footer__social {
                        div {
                            right: 0px;
                            padding-right: 20px;
                        }
                    }
                }
            }
        }
    }

    small.copyright {
        .copyright__text {
            width: 100%;
            max-width: 1280px;
            text-align: left;
            padding: 10px 0 10px 20px;
        }
    }
}