@layer components {
    .site-footer {
        border-top: 1px solid var(--color-slate);
        color: var(--color-footer-text);
    }

    .site-footer__main {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 40px 64px;
        padding-block: 56px 40px;
    }

    .site-footer__brand {
        display: flex;
        flex: 1 1 280px;
        flex-direction: column;
        gap: 18px;
    }

    .site-footer__logo {
        align-self: flex-start;
        width: auto;
        height: 34px;
    }

    .site-footer__address {
        color: var(--color-muted-on-dark);
        font-size: 15px;
    }

    .site-footer__social {
        display: flex;
        gap: 10px;
    }

    .site-footer__social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        border: 1px solid var(--color-slate-line);
        border-radius: var(--radius-control);
        color: var(--color-footer-text);
    }

    .site-footer__social-link:hover {
        border-color: var(--color-aqua);
        color: var(--color-aqua);
    }

    .site-footer__nav {
        display: flex;
        flex-wrap: wrap;
        gap: 32px 64px;
        font-size: 15px;
    }

    .site-footer__column {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .site-footer__heading {
        color: var(--color-aqua);
        font-size: 14px;
        font-weight: 600;
    }

    .site-footer__link {
        color: var(--color-footer-text);
        text-decoration: none;
    }

    .site-footer__link:hover,
    .site-footer__consent:hover {
        color: var(--color-aqua);
    }

    .site-footer__consent {
        align-self: flex-start;
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-footer-text);
        text-align: left;
        cursor: pointer;
    }

    .site-footer__bottom {
        padding-block: 16px 32px;
        color: var(--color-muted-on-dark);
        font-size: 13px;
    }
}