@media (max-width: 1550px), (max-height: 900px) {
    :root {
        --sidebar-width: clamp(240px, 24vw, 620px);
        --sidebar-pad-y: 30px;
        --sidebar-pad-x: 38px;

        --nav-l1-gap: 32px;
        --nav-l1-to-l2: 88px;
        --nav-l2-to-l3: 235px;

        --nav-l1-size: clamp(22px, 1.8vw, 34px);
        --nav-l2-size: clamp(22px, 1.8vw, 34px);
        --nav-l3-size: clamp(22px, 1.8vw, 34px);
    }

    .site-main {
        padding: 32px;
    }

    .site-nav__brand-image {
        max-width: 560px;
    }
}

@media (max-width: 1350px), (max-height: 820px) {
    :root {
        --sidebar-width: clamp(220px, 22vw, 480px);
        --sidebar-pad-y: 24px;
        --sidebar-pad-x: 28px;

        --nav-l1-gap: 26px;
        --nav-l1-to-l2: 76px;
        --nav-l2-to-l3: 195px;

        --nav-l1-size: clamp(19px, 1.55vw, 28px);
        --nav-l2-size: clamp(19px, 1.55vw, 28px);
        --nav-l3-size: clamp(19px, 1.55vw, 28px);
    }

    .site-main {
        padding: 24px;
    }

    .site-nav__brand-image {
        max-width: 430px;
    }
}

@media (max-width: 1180px), (max-height: 740px) {
    :root {
        --sidebar-width: clamp(190px, 20vw, 360px);
        --sidebar-pad-y: 18px;
        --sidebar-pad-x: 20px;

        --nav-l1-gap: 20px;
        --nav-l1-to-l2: 62px;
        --nav-l2-to-l3: 155px;

        --nav-l1-size: clamp(16px, 1.35vw, 22px);
        --nav-l2-size: clamp(16px, 1.35vw, 22px);
        --nav-l3-size: clamp(16px, 1.35vw, 22px);
    }

    .site-main {
        padding: 18px;
    }

    .site-nav__brand-image {
        max-width: 320px;
    }
}

@media (max-width: 700px) {
    :root {
        --nav-l1-to-l2: 50px;
        --nav-l2-to-l3: 110px;
    }
}