.system-path:is(.path--user-login, .path--user-password, .path--user-register, .path--user-reset) {
    justify-content: center;
}

@media (min-width: 991px) {
    body:has(.system-path:is(.path--user-login, .path--user-password, .path--user-register, .path--user-reset))::before,
    body:has(.system-path:is(.path--user-login, .path--user-password, .path--user-register, .path--user-reset))::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: calc(max(25%, 495px));
        height: 100vh;
        pointer-events: none;
        user-select: none;
    }

    body:has(.system-path:is(.path--user-login, .path--user-password, .path--user-register, .path--user-reset))::before {
        background-color: hsla(90, 100%, 20%, 0.45);
        z-index: 1;
    }

    body:has(.system-path:is(.path--user-login, .path--user-password, .path--user-register, .path--user-reset))::after {
        background: url(/image/login-side-image);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        z-index: 0;
        filter: contrast(0.5);
    }

    .system-path.path--user-login,
    .system-path.path--user-password,
    .system-path.path--user-register,
    .system-path.path--user-reset {
        margin-left: auto;
        background-color: white;
        width: calc(min(75%, 100% - 495px));
    }
}