.section-footer {
    --section-padding-vertical: 60px;
    --section-background-color: #0B0D17;

    --footer-align-items: start;
    --footer-gap: 64px;
    --brand-width: 520px;
    --links-flex-direction: row;
    --grouped-flex-direction: row;
    --links-width: 80%;
    --links-gap: 32px;
    --grouped-width: 100%;
    --grouped-gap: 32px;

    --section-font-size: 20px;

    @media (width <= 992px) {
        --links-width: 100%;
        --links-gap: 12px;
        --grouped-gap: 12px;
    }

    @media (width <= 768px) {
        --section-padding-vertical: 40px;
        --links-flex-direction: column;
        --links-gap: var(--footer-gap);
        --grouped-width: 80%;
        --section-font-size: 16px;
    }

    @media (width <= 680px) {
        --brand-width: 100%;
    }

    @media (width <= 576px) {
        --grouped-width: 100%;
    }

    @media (width <= 480px) {
        --grouped-flex-direction: column;
        --footer-gap: 16px;
        --links-width: 100%;
        --links-gap: 16px;
        --grouped-gap: 16px;

        .section {
            width: 100%;
            padding: 24px 12px;
            border-radius: 8px;
            background-color: rgba(255, 255, 255, 0.075);
        }
    }

    .section-footer-container {
        display: flex;
        flex-direction: column;
        align-items: var(--footer-align-items);
        justify-content: space-between;
        gap: var(--footer-gap);

        .logo {
            display: block;
            height: var(--site-logo-height);
            background-color: #fff;
            mask: url('/assets/svg/logo/full-jiQOsmh.svg') no-repeat center;

            img {
                height: 100%;
            }
        }

        .links {
            flex: 1;
            width: var(--links-width);
            display: flex;
            flex-direction: var(--links-flex-direction);
            align-items: start;
            justify-content: center;
            gap: var(--links-gap);

            .grouped {
                flex: 1;
                display: flex;
                flex-direction: var(--grouped-flex-direction);
                align-items: start;
                justify-content: start;
                gap: var(--grouped-gap);
                width: var(--grouped-width);
            }
        }

        .section {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: start;
            gap: 24px;

            &.brand {
                width: var(--brand-width);
            }

            &.disclosure {
                width: var(--brand-width);

                p {
                    font-size: 14px;
                }
            }

            h6 {
                font-size: var(--section-font-size);
                line-height: 1;
                font-weight: 700;
                text-transform: uppercase;
                color: #fff;
            }

            ul {
                list-style-type: none;
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-content: start;
                gap: 8px;

                li {
                    a {
                        font-size: 18px;
                        line-height: 1;
                        color: #fff;
                        text-decoration: none;
                        white-space: nowrap;

                        &:hover {
                            color: var(--color-btm-orange);
                        }
                    }
                }
            }

            p {
                font-size: 18px;
                line-height: 1.5;
                color: #fff;
            }
        }
    }
}