:root {
    --site-max-width: 1680px;
    --site-side-gap: 64px;
}

/* Футер: фон на всю ширину */
.footer,
.site-footer {
    width: 100%;
    background: #d9dee5;
}

/* Внутренности футера под ширину контента */
.footer__inner,
.footer-top,
.footer-top__inner,
.footer-bottom,
.footer-bottom__inner,
.site-footer__inner {
    width: 100%;
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-side-gap);
    padding-right: var(--site-side-gap);
    box-sizing: border-box;
}

/* Верхняя часть футера */
.footer-top__inner,
.footer-top {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    gap: 48px;
    align-items: start;
    padding-top: 24px;
    padding-bottom: 18px;
}

/* Ссылки в середине футера */
.footer-links,
.footer-top__links {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 12px 36px;
}

/* Нижняя строка */
.footer-bottom,
.footer-bottom__inner {
    border-top: 1px solid rgba(74, 85, 104, .25);
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    color: #7b8494;
}

.footer-bottom__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

/* Адаптив */
@media (max-width: 1600px) {
    :root {
        --site-side-gap: 48px;
    }
}

@media (max-width: 1200px) {
    .footer-top__inner,
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }

    .footer-links,
    .footer-top__links {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --site-side-gap: 24px;
    }

    .footer-top__inner,
    .footer-top {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-bottom__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    :root {
        --site-side-gap: 16px;
    }

    .footer-links,
    .footer-top__links {
        grid-template-columns: 1fr;
    }
}