@layer components {
    .site-footer {
        background: var(--color-surface);
        padding: 4rem 2rem;
        border-top: 2px solid var(--color-primary);
        transition: background-color 0.3s ease, border-color 0.3s ease;

        & .site-footer__container {
            max-width: var(--container-max-width);
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 4rem;

            @media (max-width: 768px) {
                grid-template-columns: 1fr;
                gap: 2rem;
                text-align: center;
            }
        }

        & .site-footer__info {
            & .site-footer__title {
                margin-bottom: 1.5rem;
            }

            & .site-footer__text {
                font-size: 0.9rem;
                color: var(--color-on-surface-muted);
            }
        }

        & .site-footer__links {
            & .site-footer__title {
                margin-bottom: 1.5rem;
            }

            & ul li {
                margin-bottom: 0.5rem;
            }

            & a {
                font-size: 0.9rem;

                &:hover {
                    color: var(--color-secondary);
                }
            }
        }

        & .site-footer__bottom {
            max-width: var(--container-max-width);
            margin: 2rem auto 0;
            padding: 2rem 2rem 0;
            border-top: 1px solid var(--color-border);
            text-align: center;
            font-size: 0.8rem;
            color: var(--color-on-surface-muted);
            opacity: 0.6;
        }
    }
}