.login-site {
}

.login__wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 664px));
    max-height: 860px;
}

/* Photo */
.login__photo {
    display: grid;
}

.login__bg {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: var(--offset-xxs);
}

/*Login Form*/
.login__body {
    display: grid;
    background-color: var(--base-100);
    border-radius: var(--offset-xxs);
    align-items: center;
}

.login__form {
    max-width: 440px;
    width: 100%;
    margin: 72px auto;
    /*margin: 0 auto;*/
    padding: 0 var(--offset-xs);
    display: grid;
    grid-auto-flow: row;
    align-self: center;
    justify-self: center;
    gap: var(--offset-m);
}

.form__title {
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: calc(24px + 8 * ((100vw - 360px) / (1920 - 360)));
    line-height: 125%;
    letter-spacing: 0.01em;
    color: var(--base-2000);
}

.form__body {
    display: grid;
    grid-auto-flow: row;
    gap: var(--offset-xs);
}

/* Inputs and Labels */
.form__label {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: 0.02em;
    color: var(--base-1000);
}

.form__field {
    border: 2px solid var(--base-200);
    border-radius: var(--offset-3xs);
    padding: 4px var(--offset-xs);
    min-width: 280px;
    max-width: 440px;
    width: 100%;
    height: 52px;
    font-family: Roboto, sans-serif;
    font-size: calc(14px + 2 * ((100vw - 360px) / (1920 - 360)));
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.01em;
    color: var(--base-1000);
    transition: 0.3s all;
}

.form__field::placeholder {
    color: var(--base-400);
}

.form__field:focus-visible {
    transition: 0.3s all;
    border: 2px solid var(--accent-1000);
}

.form__field:user-invalid{
    transition: 0.3s all;
    border: 2px solid var(--base-error);
}

.field__password {
    transition: 0.3s all;
    background-image: url('/img/icons/eye.png');
    background-repeat: no-repeat;
    background-position: calc(100% - 14px) 12px;
}

.field__password:focus-visible {
    transition: 0.3s all;
    background-image: url('/img/icons/eye-focus.png');
}

.field__password:user-invalid {
    transition: 0.3s all;
    background-image: url('/img/icons/eye-invalid.png');
}

.form__error {
    color: var(--base-error);
}

.form__success {
    color: var(--accent-1000);
}

.form__bottom {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    display: grid;
    grid-auto-flow: row;
    gap: var(--offset-m);
}

.form__bottom p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: calc(14px + 2 * ((100vw - 360px) / (1920 - 360)));
    line-height: 150%;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--base-1000);
}

@media(min-width: 1921px) {

    .form__title {
        font-size: 32px;
    }

    .form__field {
        font-size: 16px;
    }

    .form__bottom p {
        font-size: 16px;
    }
}

/*@media(max-width: 720px) {*/

/*    .login__form {*/
/*        margin: 56px auto;*/
/*    }*/

/*    .login__body {*/
/*        grid-template-columns: minmax(268px, 640px);*/
/*    }*/

/*    .login__photo {*/
/*        display: none;*/
/*    }*/
/*}*/

/*@media(max-width: 640px) {*/

/*    .login__body {*/
/*        padding: 48px 0;*/
/*    }*/

/*    .form-login form {*/
/*        margin: 48px auto;*/
/*    }*/
/*}*/

/*@media(max-width: 560px) {*/

/*    .login-body {*/
/*        padding: 36px 0;*/
/*    }*/

/*    .form-login form {*/
/*        margin: 36px auto;*/
/*    }*/
/*}*/

/*@media(max-width: 480px) {*/

/*    .login-body {*/
/*        padding: 30px 0;*/
/*    }*/

/*    .form-login form {*/
/*        margin: 30px auto;*/
/*    }*/

/*    .form-button {*/
/*        margin-bottom: 24px;*/
/*    }*/

/*    .bottom-form p {*/
/*        margin-bottom: 24px;*/
/*    }*/

/*    .form-field {*/
/*        min-width: 234px;*/
/*        height: 44px;*/
/*    }*/

/*    .password, .password.is-invalid {*/
/*        background-position: calc(100% - 14px) 8px;*/
/*    }*/

/*    .form-button {*/
/*        min-width: 234px;*/
/*        height: 44px;*/
/*        padding: unset;*/
/*    }*/
/*}*/