footer-container {

margin-top: rem-calc(20);
@include breakpoint(medium) {
        margin-top: rem-calc(40);
}
.footer-top,
.footer-bottom {
        .wrapper {
                @include grid-row;
        }
}
.charity-information {
        color: $ace-navy;
        position: relative;
        font-size: 12px;
        p:last-of-type {
                margin-bottom: 0;
        }
}

.footer-top {
        padding-top: 125px;
        margin-top: -125px;
        padding-bottom: 35px;
        background-image: linear-gradient($white, #c5c5c6);
        background-position: bottom center;
        background-size: 100% 100%;
        @include breakpoint(tablet) {
                .wrapper {
                        display: flex;
                        // flex-direction: row-reverse;
                        align-items: flex-end;
                        .footer-logo {
                                flex: 0 0 auto;
                        }
                        .footer-information {
                                flex: 1 1 auto;
                        }
                }
        }
        .footer-logo,
        .footer-information {
                @include grid-column;
        }
        .footer-logo {
                @include breakpoint(tablet) {
                        @include grid-column(4);
                        @include grid-column-position(8);
                }
                @include breakpoint(large) {
                        @include grid-column(3);
                        @include grid-column-position(9);
                }
        }
        .footer-information {
                @include breakpoint(tablet) {
                        @include grid-column(8);
                        @include grid-column-position(-4);
                }
                @include breakpoint(large) {
                        @include grid-column(9);
                        @include grid-column-position(-3);
                }
        }
        .footer-menu {
                margin-bottom: 1rem;
        }
}

.footer-bottom {
        background: $ace-navy;
        color: $white;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        .wrapper {
                display: flex;
                align-items: center;
                .footer-copyright {
                        flex: 1 1 auto;
                }
                .footer-fig {
                        flex: 0 0 auto;
                }
        }
        .footer-copyright {
                float: left;
                @include grid-column-gutter;
                p {
                        margin: 0;
                }
        }
        .footer-fig {
                float: right;
                text-align: right;
                @include grid-column-gutter;
                a {
                        display: inline-block;
                        padding: rem-calc(4 8 4 0);
                        line-height: 0;
                        svg {
                                width: 100%;
                                max-width: rem-calc(40);
                                .a {
                                        fill: tint($ace-navy, 60%);
                                }
                        }
                        &:hover, &:focus {
                                svg .a {
                                        fill: $ace-orange;
                                }
                        }
                }
        }
}

}