@layer components {
    .footer {
        padding-block: var(--space-xl);
        background-color: var(--color-black);
        border-top: var(--border-thin) solid var(--clr-slate-900);
        color: var(--color-text-dim);
        font-size: var(--text-sm);

        & .footer__grid {
            display: grid;
            gap: var(--space-xl);
            align-items: start;

            @media (min-width: 768px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        & .footer__title {
            color: var(--color-white);
            font-size: var(--text-lg);
            font-weight: 700;
            margin-bottom: var(--space-md);
        }

        & .footer__address {
            font-style: normal;
            line-height: 1.6;
            color: var(--color-text-muted);
        }

        & .footer__meta {
            margin-top: var(--space-md);
            color: var(--color-text-muted);

            & p {
                margin-block: var(--space-xs);
            }
        }

        & .footer__label {
            font-weight: 600;
            color: var(--clr-slate-400);

            &--block {
                display: block;

                @media (min-width: 768px) {
                    display: inline;
                    margin-right: var(--space-xs);
                }
            }
        }

        & .footer__contact-col {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;

            @media (min-width: 768px) {
                align-items: flex-end;
            }
        }

        & .footer__contact-info {
            text-align: left;
            color: var(--color-text-muted);

            @media (min-width: 768px) {
                text-align: right;
            }

            & p {
                margin-block: var(--space-xs);
            }
        }

        & .footer__legal {
            display: flex;
            gap: var(--space-lg);
            margin-top: var(--space-xl);
            color: var(--color-text-muted);

            @media (min-width: 768px) {
                margin-top: 0;
            }
        }

        & .footer__link {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease;

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

        & .footer__copyright {
            margin-top: var(--space-xl);
            padding-top: var(--space-lg);
            border-top: var(--border-thin) solid var(--clr-slate-900);
            color: var(--clr-slate-600);
            font-size: var(--text-xs);
            text-align: center;
        }
    }
}