/*  COMPONENT: NAV-FOOTER
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .nav-footer {
    }
    .nav-footer .menu {
        display: flex;
        flex-direction: column;
    }
    .nav-footer a {
        text-decoration: none;
    }
    .nav-footer a:hover {
    }

    .nav-footer--2 .menu {
        display: grid;
        grid-template-columns: min-content min-content;
        column-gap: var(--size-grid-gap);
    }
    .nav-footer--2 a {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }
    .nav-footer--2 a::before {
        content: "";
        display: inline-block;
        width: 1.25rem;
        height: 1.25rem;
        background-repeat: no-repeat;
        background-size: 100%;
        font-weight: 900;
    }
    .nav-footer--2 a:hover {
    }
    .nav-footer--2 a:hover::before {
        color: var(--color-white);
        text-decoration: none;
    }
    .nav-footer--2 .twitter a::before {
        content: "x";
        background-image: url("../../images/icons/");
    }
    .nav-footer--2 .mastodon a::before {
        content: "m";
        background-image: url("../../images/icons/");
    }
    .nav-footer--2 .facebook a::before {
        content: "fb";
        background-image: url("../../images/icons/");
    }
    .nav-footer--2 .youtube a::before {
        content: "yt";
        background-image: url("../../images/icons/");
    }
    .nav-footer--2 .instagram a::before {
        content: "ig";
        background-image: url("../../images/icons/");
    }
}