.login-modal {
  display: flex;
  align-items: center;
  padding: 1.875rem;
  gap: 1.875rem;
}

  .login-modal .openid-butons {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-modal .openid-butons .a-button {
      gap: 0;
    }

  .login-modal .openid-butons,
  .login-modal .openid-connect-login-form {
    display: flex;
    align-items: flex-start;
    gap: 0.9375rem;
    align-self: stretch;
  }

  .login-modal .right {
    display: none;
  }

  @media all and (min-width: 769px) {

  .login-modal .right {
      display: block
  }
    }

  .login-modal .right img {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: 30rem;
      height: 27.5rem;
      padding: 1.25rem 2rem 1.25rem 2.0625rem;
    }

  .login-modal .login-form,
  .login-modal #registration-section,
  .login-modal #login-section {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }

  .login-modal #login-section,
  .login-modal #registration-section {
    gap: 0;
  }

  .login-modal form.user-register-form,
  .login-modal form.user-login-form,
  .login-modal .field-group-account {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: center;
    min-width: 18.75rem;
    gap: 0.625rem;
  }

  .login-modal form.user-register-form .form-actions, .login-modal form.user-login-form .form-actions, .login-modal .field-group-account .form-actions {
      align-self: center;
      margin-top: 0.625rem;
    }

  .login-modal .auth-toggle-link {
    display: block;
    margin-top: 0.3125rem;
  }

  .login-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    align-items: center;
  }