#footer {
    background-color: color-mix(in oklch, transparent, var(--color-black) 5%);
}

#footer h2 {
    color: var(--color-accent);
}

#footer :any-link {
    transition: color var(--transition);
    color: var(--color-canvastext);
    text-decoration: underline;
    text-decoration-thickness: 0.0625em;
    text-underline-offset: 0.1em;
}

#footer :any-link:where(:focus-visible, :hover) {
    color: var(--color-accent);
}

#footer > .footer-container {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
    margin-block: 5rem;
}

#footer .footer-contact {
    flex-grow: 1;
}

#footer .footer-contact address {
    display: flex;
    flex-direction: column;
}

#footer .footer-contact address > * {
    flex-grow: 1;
}

#footer .footer-contact .icon-fa {
    margin-inline-end: 0.25em;
}

#footer .footer-legal {
    flex-grow: 1;
}

@media (min-width: 744px) {
    #footer > .footer-container {
        flex-direction: row;
        margin-block: 10rem;
    }

    #footer .footer-contact {
        flex-grow: 2;
    }
}

@media (min-width: 960px) {
    #footer > .footer-container {
        margin-block: 15rem;
    }
}

@media (min-width: 1260px) {
    #footer .footer-contact address {
        flex-direction: row;
        gap: var(--gutter);
    }
}