footer {
    background: var(--c_black);
    row-gap: var(--size_l);
    margin: var(--size_xxl) var(--size) var(--size);
}


/* 
CONTACTS
*/
#footer-contacts {
    row-gap: var(--size);
}
footer dt {grid-column: 1/2;}
footer dd {grid-column: 2/-1;}

#footer-social dd {column-gap: var(--size);}



/* 
LANGS
*/
#footer-langs {column-gap: var(--size);}
#footer-langs a:not(.--active) {opacity: var(--alpha);}



/* 
LOGOS
*/
#footer-logos {
    grid-column: 1/-1;
    margin-bottom: var(--size_l);
}
#footer-logos img {
    margin: 0 auto;
    max-width: 20rem;
    height: auto;
}


/* 
BOTTOM
*/
#footer-logo img {
    height: 2rem;
    width: auto;
}

#footer-credit {margin-top: var(--size_s);}

#footer-brand {row-gap: var(--size);}



@media only screen and (min-width: 768px) {
    footer {
        margin: var(--size_xxxl) var(--size_s) var(--size_s);
        row-gap: var(--size_xxl);
    }

    #footer-logo img {height: 1.6rem;}

    #footer-contacts {
        grid-column: 1/4;
        grid-row: 1;
    }

    #footer-pages {
        grid-column: 4/-1;
        grid-row: 1;
    }

    #footer-pages > div {column-gap: var(--size);}

    #footer-bottom {
        grid-column: 1/-1;
        grid-row: 2;
    }

    #footer-logos {
        grid-column: 4/-1;
        grid-row: 1;
    }

    #footer-logos img {margin: 0;}

    #footer-langs {
        grid-column: 4/-2;
        grid-row: 2;
        margin-top: auto;
        z-index: 5;
    }

    #footer-brand {
        grid-column: 1/4;
        grid-row: 2;
    }

    #footer-credit {
        grid-column: -3/-1;
        grid-row: 2;
        margin-top: auto;
        text-align: right;
    }
}

@media (hover: hover) {
    #footer-social dd a,
    #footer-email dd a,
    #footer-phone dd a,
    #footer-pages a,
    #footer-langs a,
    #footer-credit a {transition: opacity 200ms ease-in-out;}

    #footer-social dd:hover a,
    #footer-email dd:hover a,
    #footer-phone dd:hover a,
    #footer-pages ul:hover a,
    #footer-langs ul:hover a:not(.--active),
    #footer-credit a:hover {opacity: var(--alpha);}

    #footer-social a:hover,
    #footer-email a:hover,
    #footer-phone a:hover,
    #footer-pages a:hover,
    #footer-langs a:hover {opacity: 1 !important;}
}