@layer navigation {
    body>footer {
        color: var(--color-text-light);
        background: var(--color-brand-blue);

        font-size: var(--font-size-0);

        :is(a) {
            color: var(--color-text-light);

            &:is(:hover, :focus) {
                color: color-mix(in srgb, var(--color-text-light), transparent 30%);
            }

            &.phone-number {
                text-decoration: none;
            }
        }

        .site-container {
            display: grid;
            gap: var(--size-9);

            padding: var(--size-9) var(--size-2);

        }

        :is(hr) {
            display: none;
        }

        :is(p) {
            margin: 0;
        }

        :is(section) {
            display: grid;
            gap: var(--size-2);
            grid-template-rows: auto 1fr;
        }

        :is(menu) {
            display: grid;
            gap: var(--size-2);
            grid-auto-rows: max-content;

            > li a {
                display: inline-block;

                text-decoration: none;
            }
        }

        .elive-partner {
            display: flex;
            gap: var(--size-6);
            font-size: var(--font-size-2);
            align-items: center;

            > span {
                display: block;
                width: min-content;
            }
        }

        .payment-icons {
            padding: var(--size-3) 0;
        }

        .legals {
            color: var(--color-text);
            background-color: #fff;
            gap: var(--size-3);

            :is(a) {
                color: var(--color-text);

                &:not(:hover, :focus) {
                    text-decoration: none;
                }

                &:is(:focus, :hover) {
                    color: var(--color-brand-blue);
                }
            }

            .site-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-block: var(--size-4);
            }
        }

        /* tablet and up */
        @media screen and (min-width: 768px) {
            .site-container {
                gap: var(--size-8);
                padding-inline: var(--size-4);
                grid-template-columns: repeat(3, 1fr);
            }

            .tablet-and-up {
                gap: 0;
            }

            .span-2 {
                grid-column: span 2;
                grid-column-start: span 2;
                grid-column-end: auto;
            }

            :is(hr) {
                display: block;
                grid-column: 1 / -1;
                width: 100%;
                border-color: var(--color-light-alt);
            }
        }
    }
}