footer {
    background-color: var(--color-primary);
    font-size: 16px;
    margin-top: var(--section-gap);
    margin-left: var(--section-inner-side-padding);
    margin-right: var(--section-inner-side-padding);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

footer .container {
    display: grid;
    gap: 0 var(--grid-gap);
    grid-template-columns: var(--grid-columns);
    padding: 1.5rem var(--section-inner-side-padding);
    align-items: center;
}

footer .container > .links {grid-column: span 5;}
footer .container > .social-media {grid-column: span 2;}
footer .container > .copyright {grid-column: span 5;}

footer .links a {
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
}

footer .links a:hover {
    text-decoration: underline;
}

footer .links a:not(:last-of-type) {
    margin-right: 2rem;
}

footer .social-media {
    text-align: center;
    display: flex;
    justify-content: center;
}

footer .social-media-link {
    padding: 0 .5rem;
}

footer .social-media a {
    display: block;
    height: 2rem;
    width: 2rem;
    font-size: 0;
    background-size: contain;
    background-repeat: no-repeat;
}


footer .social-media a.social-media-link--xing {
    background-image: var(--icon-xing-white);
}

footer .social-media a.social-media-link--twitter {
    background-image: var(--icon-twitter-white);
}

footer .social-media a.social-media-link--facebook {
    background-image: var(--icon-facebook-white);
}

footer .social-media a.social-media-link--linkedin {
    background-image: var(--icon-linkedin-white);
}

footer .social-media a.social-media-link--youtube {
    background-image: var(--icon-youtube-white);
}

footer .social-media a.social-media-link--instagram {
    background-image: var(--icon-instagram-white)
}

footer .social-media a.social-media-link--netiquette {
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    width: max-content;
}

footer .copyright {
    text-align: right;
    color: #ffffff;
}

@media (max-width: 991px) {
    footer {
        margin: var(--section-gap) 0 0;
    }

    footer .container > div {
        grid-column: span 12 !important;
        text-align: center;
    }

    footer .container > div:not(:last-of-type) {
        margin-bottom: 2rem;
    }

    /* Reorder footer sections for mobile */
    footer .social-media {order: 0;}
    footer .links {order: 1;}
    footer .copyright {order: 2;}
}

.user-logged-in footer {
    margin-bottom: 3rem;
}