.footer {
    color: $white;
    background: $color-gray-85;
    font-size: rem-calc(16);
    line-height: rem-calc(20);

    .footer__container {
        padding: rem-calc(32 0 0 0);
        @include breakpoint(large) {
            padding: rem-calc(70 0 10 0);
        }
    }

    .footer__header {
        text-align: center;
        font-size: rem-calc(13);
        line-height: rem-calc(16);
        margin-bottom: rem-calc(46);
        @include breakpoint(large) {
            text-align: left;
            margin-bottom: 0;
        }
    }
    .footer__content {
        margin: 0 auto;
        max-width: rem-calc(200);

        @include breakpoint(large) {
            margin: 0;
        }
        .footer__title {
            font-weight: bold;
            @include breakpoint(large) {
                margin-bottom: rem-calc(16);
            }
        }
        .footer__text {

        }
    }

    .footer__logo {
        margin: 0 auto;
        svg {
            path {
                fill: $white;
            }
        }
        @include breakpoint(large) {
            margin: 0;
        }
    }

    .footer__logo--stacked {
        max-width: 125px;
        display: block;
        margin-bottom: rem-calc(12);
        @include breakpoint(large) {
            display: none;
        }
    }
    .footer__logo--line {
        max-width: 158px;
        display: none;
        margin-bottom: rem-calc(28);
        @include breakpoint(large) {
            display: block;
        }
    }

    .footer__navigations {
        @include breakpoint(420) {
            padding: rem-calc(0 52);
        }
        @include breakpoint(medium) {
            padding: rem-calc(0 15);
        }
    }

    .footer__navigation {

    }

    .footer__navigation-title {
        font-size: rem-calc(16);
        line-height: rem-calc(20);
        margin-bottom: rem-calc(12);
    }

    .footer__menu {
        margin: rem-calc(0 0 32 0);
        list-style: none;
        a {
            color: $white;
            display: inline-block;

            color: $white;
            transition: all $transition;

            &:hover, &:focus {
                opacity: .7;
            }

            &:hover:focus,
            &:hover:active,
            &:active {
                opacity: .45;
            }
        }
    }

    .footer__navigation--follow-us {
        a {
            position: relative;
            padding-right: 16px;

            &::after {
                position: absolute;
                content: '';
                background-image: url('assets/svg/icon-arrow-social.svg');
                background-repeat: no-repeat;
                background-position: center;
                top: 10px;
                right: 0;
                width: 12px;
                height: 12px;
                display: block;
            }
        }
    }

    .footer__copyright {
        $color-line: #383838;
        text-align: center;
        font-size: rem-calc(13);
        line-height: rem-calc(20);

        .align-center {
            @include breakpoint(medium) {
                border-top: 1px solid $color-line;
            }
        }

        .align-center .column:nth-of-type(1) {
            @include breakpoint(medium) {
                order: 2;
                text-align: right;
            }
        }

        .align-center .column:nth-of-type(2) {
            border-top: 1px solid $color-line;
            @include breakpoint(medium) {
                border: none;
                text-align: left;
            }
        }
    }

    .footer__copyright-text, .footer__credits {
        padding: rem-calc(14 0);
    }

    .footer__credits-link {
        color: $white;
    }

    .footer__credits-icon {
        width: 10px;
        height: 10px;
        display: inline-block;
        vertical-align: top;
        margin-left: 10px;
        margin-top: 1px;
        svg {
            fill: $white;
        }
    }
}
