.twz-footer {
    --footer-bg: var(--grey-950, #141414);
    --footer-border: rgb(255 255 255 / 0.1);
    --footer-border-strong: rgb(255 255 255 / 0.2);
    --footer-text: var(--grey-50, #e5e2e1);
    --footer-muted: var(--grey-200, #a3a3a3);
    --footer-link: var(--white, #fff);
    --footer-gap: 3.2rem;
    --footer-padding-inline: 3.2rem;
    --footer-padding-block: 9.6rem;

    background: var(--footer-bg);
    border-block-start: 0.1rem solid var(--footer-border-strong);
    color: var(--footer-text);

    @media (max-width: 767px) {
        --footer-padding-inline: 1.5rem;
        --footer-padding-block: 3rem;
        --footer-gap: 3rem;
    }

    a {
        text-decoration: none;
    }

    .twz-footer__main {
        inline-size: min(var(--row-width, 95%), var(--row-maxwidth, 153.6rem));
        margin-inline: auto;
        padding-block: var(--footer-padding-block);
        padding-inline: var(--footer-padding-inline);
    }

    .twz-footer__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--footer-gap);

        @media (min-width: 1025px) {
            grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
            -moz-column-gap: var(--footer-gap);
                 column-gap: var(--footer-gap);
        }
    }

    .twz-footer__brand {
        display: flex;
        flex-direction: column;
        gap: 3.1rem;
        padding-inline-end: 3.3rem;
        border-inline-end: 0.1rem solid var(--footer-border);

        @media (max-width: 1024px) {
            padding-inline-end: 3.3rem;
            border-inline-end: 0;
        }
    }

    .twz-footer__logo {
        display: block;
        line-height: 0;
        inline-size: -moz-fit-content;
        inline-size: fit-content;

        svg {
            display: block;
            block-size: 7rem;
            inline-size: auto;
        }
    }

    .twz-footer__intro {
        margin: 0;
        max-inline-size: 32rem;
        font-family: var(--font-base);
        font-size: var(--fs-16);
        line-height: 1.6;
        letter-spacing: 0.016rem;
        color: var(--footer-text);
    }

    .twz-footer__columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--footer-gap);

        @media (min-width: 1025px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0;
        }
    }

    .twz-footer__column {
        display: flex;
        flex-direction: column;
        gap: 3.2rem;

        @media (max-width: 1024px) {
            gap: 1.5rem;
            padding-inline-end: 0.1rem;
            border-inline-end: 0;
        }

        @media (min-width: 1025px) {
            padding-inline: 3.2rem;
            border-inline-end: 0.1rem solid var(--footer-border);

            &:last-child {
                border-inline-end: 0;
                padding-inline-end: 0;
            }

            &:first-child {
                padding-inline-start: 0;
            }
        }
    }

    .twz-footer__column--contact {
        @media (max-width: 1024px) {
            border-inline-end: 0;
            padding-inline-end: 0;
        }
    }

    .twz-footer__heading {
        margin: 0;
        font-family: var(--font-special);
        font-size: var(--fs-32);
        font-weight: 600;
        line-height: 1.1;
        text-transform: uppercase;
        color: var(--footer-text);

        @media (max-width: 1024px) {
            font-size: var(--fs-26);
        }
    }

    .twz-footer__menu {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .twz-footer__link {
        display: inline-flex;
        align-items: baseline;
        gap: 0.8rem;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0.1rem;
        font-size: 1.4rem;
        text-transform: uppercase;
        color: var(--footer-link);
        transition: color 0.2s ease;

        &:is(:hover, :focus-visible) {
            color: var(--green-500, #5aad5a);
        }
    }

    .twz-footer__link-icon {
        display: inline-flex;
        flex-shrink: 0;
        inline-size: 1em;
        block-size: 1em;
        translate: 0 3px;

        svg {
            inline-size: 100%;
            block-size: 100%;

            path {
                fill: currentColor;
            }
        }
    }

    .twz-footer__contact-list {
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
    }

    .twz-footer__contact-item {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .twz-footer__contact-label {
        margin: 0;
        letter-spacing: -0.04rem;
        text-transform: uppercase;
        color: var(--footer-muted);
    }

    .twz-footer__contact-value {
        margin: 0;
        line-height: 1;
        letter-spacing: 0.1rem;
        text-transform: uppercase;
        color: var(--footer-link);
    }

    .twz-footer__legal {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-block-start: 1.7rem;
        border-block-start: 0.1rem solid var(--footer-border);
    }

    .twz-footer__legal-line {
        margin: 0;
        font-family: var(--font-base);
        font-size: 1.2rem;
        line-height: 1.25;
        text-transform: uppercase;
        color: var(--footer-muted);
    }

    .twz-footer__bar {
        border-block-start: 0.1rem solid var(--footer-border);
    }

    .twz-footer__bar-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        inline-size: min(var(--row-width, 95%), var(--row-maxwidth, 153.6rem));
        margin-inline: auto;
        padding-block: 3.3rem 3.2rem;
        padding-inline: var(--footer-padding-inline);

        @media (max-width: 767px) {
            padding-block: 2.1rem 2rem;
            gap: 1rem;
        }

        @media (min-width: 1025px) {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 3.2rem;
        }
    }

    .twz-footer__copyright {
        margin: 0;
        font-family: var(--font-base);
        font-size: 1.2rem;
        letter-spacing: -0.04rem;
        text-transform: uppercase;
        color: var(--footer-muted);
    }

    .twz-footer__bar-menu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.5rem;

        @media (min-width: 1025px) {
            gap: 3.2rem;
        }
    }

    .twz-footer__bar-link {
        letter-spacing: -0.04rem;
        text-transform: uppercase;
        color: var(--footer-muted);
        transition: color 0.2s ease;

        &:is(:hover, :focus-visible) {
            color: var(--footer-link);
        }
    }
}