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

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

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

    // Site title
    &__title {
        grid-column: span var(--columns);
        grid-row: 1;
        display: block;
        margin-bottom: 40px;
        text-decoration: none;

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

        // hover
        .site-title:hover {
            strong, span {
                color: #fff;
            }
        }
    }

    // Links
    &__links {
        grid-column: span var(--columns);
        grid-row: 2;

        @include bp (sm) {
            grid-column: 5 / span 16;
            grid-row: 1;
        }

        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 {
                transition: color 0.35s;
            }

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

    // Cetrucflotte logo
    &__ctf {
        grid-column: span var(--columns);
        grid-row: 2;
        margin-left: auto;
        margin-top: auto;
        max-width: 120px;

        @include bp (sm) {
            grid-column: 19 / span 5;
            grid-row: 1;
            max-width: 112px;
            margin-top: 0;
        }
        @include bp (md) {
            max-width: 140px;
        }

        img {
            display: block;
            width: 100%;
            height: auto;
        }
        span {
            font-size: rem(12px);
            color: $color-lilas-bright;
            margin-right: 24px;
        }
    }
}