@layer main {
    body > footer{
        --color-text: var(--color-white);
		--color-link: var(--color-white);
		--color-link-hover: var(--color-white);
		--color-link-active: var(--color-white);
		--color-link-visited: var(--color-white);

        font-size: .875em;
        padding-block: calc(var(--spacer) * 2);
        background-color: rgb(var(--color-charcoal));
        color: rgb(var(--color-white));

        @container (max-width: 768px) {
            text-align: center;
        }

        a{
            text-decoration: none;

            &:hover{text-decoration: underline;}
        }

        address{
            line-height: 1.4;
            margin-bottom: var(--spacer);
        }

        @container (max-width: 768px) {
            .row{
                flex-direction: column;
                text-align: center;
            }
        }

        [role="menubar"]{
            gap: 1em;
            justify-content: center;
        }

        .social-nav{
            font-size: 1rem;

            @container (max-width: 768px) {
                margin-bottom: calc(var(--spacer) * 2);
            }

            a{
                background-color: rgba(var(--color-white), .2);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 8px;
                width: calc(var(--spacer) * 2);
                aspect-ratio: 1 / 1;
                line-height: 1;
                border-radius: 50%;
                transition: background-color .3s;

                &:hover{
                    background-color: rgba(var(--color-white), .4);
                    text-decoration: none;
                }
            }
        }

        .fa-brands{
            font-family: FontAwesomeBrands;
            font-style: normal;
        }

        .fa-facebook:before{ content: '\f09a' }
        .fa-instagram:before{ content: '\f16d' }
        .fa-youtube:before{ content: '\f167' }
        .fa-linkedin:before{ content: '\f0e1' }

        .footer-bottom{
            margin-top: calc(var(--spacer) * 2);
            padding-top: calc(var(--spacer) * 2);
            border-top: 1px solid rgba(var(--color-white), .4);
        }
    }
}