@layer components {
    .footer-layout {
        container-type: inline-size;
        display: grid;
        grid-template-columns: 1fr 22ch 22ch 1fr;
        gap: var(--spacing-12) var(--spacing-6);
        padding: var(--spacing-2) 0 var(--spacing-12);
        align-items: baseline;
        border-top: var(--border-width) var(--border-style) var(--color-border);

        .copyright-message {
            display: flex;
            flex-direction: row;
            gap: var(--spacing-2);
            align-items: baseline;

            .brand-icon {
                width: 1rem;
                height: 1rem;
                position: relative;
                top: 0.1rem;
            }

            span {
                color: var(--color-text-secondary);
                font-size: var(--font-size-base);
            }
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-2);
            padding-top: var(--spacing-1);
        }

        .footer-links-title {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text);
        }

        .footer-links-links {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;

            a {
                color: var(--color-secondary);

                &:hover {
                    color: var(--color-primary-hover);
                    text-decoration: none;
                }

                &.active {
                    color: var(--color-primary);
                }
            }
        }

        .social-links {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 0;
        }

        .social-link {
            padding: var(--spacing-1);

            svg {
                height: 1.2rem;
                fill: var(--color-text-muted);
            }

            &:hover {
                svg {
                    fill: var(--color-primary-hover);
                }
            }
        }
    }

    @media (max-width: 900px) {
        .footer-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-12) var(--spacing-6);
            padding-top: var(--spacing-6);
            justify-items: center;
        }
        .footer-layout > :last-child {
            grid-column: 1 / 3;
            order: 3;
        }
        .footer-layout > :first-child {
            grid-column: 1 / 3;
            order: 4;
        }
    }
}