.login-screen {
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    align-items: stretch;
    justify-items: stretch;
    gap: 0;
    padding: 0;
    background: #eef5fb;
}

.login-screen::before {
    content: "";
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(15, 76, 129, .24), rgba(8, 27, 51, .18)),
        url("login-background.jpeg") center / cover no-repeat;
}

.login-card {
    align-self: center;
    justify-self: center;
    margin: 32px;
    box-shadow: 0 22px 70px rgba(15, 76, 129, .18);
}

@media (max-width: 850px) {
    .login-screen {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(210px, 34vh) auto;
        min-height: 100vh;
    }

    .login-screen::before {
        min-height: 210px;
    }

    .login-card {
        width: min(410px, calc(100% - 32px));
        margin: 24px auto;
    }
}