@layer root {
    footer.site {
        align-items: center;
        display: flex;
        flex-direction: column;
        margin-block: var(--body-item-spacing);
        text-align: center;
    }

    footer.site > ul {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
    }

    footer.site > .slogans {
        margin-block-end: 0;
    }

    footer.site > .slogans > li {
        margin-block-end: 0;
        margin-inline-start: 0.5em;
    }

    footer.site > p {
        margin: 0;
    }

    footer.site p + p {
        margin-top: 0.25rem;
    }

    @media (max-width: 740px) {
        footer.site .slogans span {
            white-space: nowrap;
        }
    }
}