body>footer {
    display: flex;
    gap: var(--gap-footer);
    flex-wrap: wrap;
    color: var(--color-footer-text);
    padding: var(--footer-padding);
    justify-content: center;

    a {
        color: var(--color-footer-link);
        text-decoration: none;

        &:hover,
        &:focus {
            color: var(--color-footer-link-hover);
            text-decoration: underline;
        }
    }

    section {
        flex-grow: 1;
        text-align: center;
        font-variant: small-caps;

        header {
            padding-bottom: var(--padding);

            h2 {
                font-size: 1.2rem;
                color: var(--color-footer-heading);
            }
        }

        nav {
            display: flex;
            flex-direction: column;
            gap: var(--gap-footer-nav);
        }
    }

    p {
        text-align: center;
        width: 100%;
        text-wrap: balance;
    }
}