:where(.site-header) {
    :where(.logo) {
        padding-block: 6rem 1rem;

        & :where(svg) {
            width: 100%;
            height: auto;
            color: var(--logo-color);
        }
    }
}


@media screen and (max-width: 1200px) {
    :where(.site-header) {
        .logo svg {
            width: 20rem;
        }
    }
}


@media screen and (max-width: 400px) {
    :where(.site-header) {
        .logo svg {
            width: 15rem;
        }
    }
}