/* -----------------------------------------
   FOOTER
----------------------------------------- */

.site-footer {
    border-top: 1px solid var(--color-border);

    background: var(--color-background);
}


/* -----------------------------------------
   FOOTER MAIN
----------------------------------------- */

.site-footer__main {
    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 60px;

    padding-block: 70px;
}


/* -----------------------------------------
   BRAND
----------------------------------------- */

.site-footer__logo {
    display: inline-block;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: -0.02em;
}

.site-footer__brand p {
    max-width: 300px;

    margin: 15px 0 0;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.7;
}


/* -----------------------------------------
   LABEL
----------------------------------------- */

.site-footer__label {
    margin: 0 0 18px;

    color: var(--color-text-muted);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.16em;
}


/* -----------------------------------------
   FOOTER MENU
----------------------------------------- */

.footer-menu {
    display: grid;

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-menu a {
    color: var(--color-text-muted);

    font-size: 13px;

    transition:
        color 0.2s ease;
}

.footer-menu a:hover {
    color: var(--color-text);
}


/* -----------------------------------------
   CONTACT
----------------------------------------- */

.site-footer__contact > a {
    color: var(--color-text);

    font-size: 13px;
    font-weight: 600;
}

.site-footer__contact > a:hover {
    color: var(--color-text-muted);
}


/* -----------------------------------------
   FOOTER BOTTOM
----------------------------------------- */

.site-footer__bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-block: 22px;

    border-top: 1px solid var(--color-border);
}

.site-footer__bottom p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 11px;
}


/* -----------------------------------------
   RESPONSIVE
----------------------------------------- */

@media (max-width: 768px) {

    .site-footer__main {
        grid-template-columns: 1fr;

        gap: 40px;

        padding-block: 50px;
    }

    .site-footer__bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }

}