.footer {
    position: relative;
    z-index: 200;
    background-color: $color-primary-darker;
    padding: 40px 0;

    @include bp (md) {
        padding: 0;
        height: 120px;
    }

    .container {
        justify-content: center;
        height: 100%;

        @include bp (sm) {
            align-items: center;
        }
    }

    // Site title
    &__title {
        grid-column: 1 / span 4;
        display: block;
        margin-bottom: 40px;
        text-decoration: none;

        @include bp (sm) {
            grid-column: 2 / span 5;
            grid-row: 1;
            margin: auto 0;
        }

        .site-title {
            line-height: 1;

            // Hover
            &:hover {
                strong, span {
                    color: #fff;
                }
            }
        }
    }

    // Links
    &__links {
        grid-column: 5 / span 3;
        margin-left: auto;

        @include bp (sm) {
            grid-column: 5 / span 19;
            grid-row: 1;
            margin-left: auto;
            margin-top: 0.15em;
        }

        ul {
            @include bp (sm) {
                display: flex;
                justify-content: center;
            }
        }
        li {
            display: block;
            margin-bottom: 16px;

            @include bp (sm) {
                margin: 0 12px;
            }
            @include bp (md) {
                margin: 0 16px;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
        a {
            position: relative;
            display: flex;
            align-items: center;
            color: #fff;
            text-decoration: none;
            font-size: rem(14px);
            line-height: 1.3;
            font-weight: 300;

            @include bp (md) {
                font-size: rem(16px);
            }
        }
        svg {
            margin-right: 8px;

            @include bp (md) {
                margin-right: 12px;
            }
        }

        // Instagram link
        .instagram {
            &__text {
                position: relative;
            }
            svg {
                width: 1.2em;
                height: auto;
                transition: color 0.35s;
            }

            // Hover
            a:hover {
                svg {
                    color: $color-secondary;
                }
            }
        }
    }
}