UX: refactor .d-modal to use BEM and improve styling (#23967)

This PR refactors the following:
* leaving all the CSS applied to the old `modal-body` classes in their respective files
* made  new clean styling for `.d-modal` and refactored the template to use the new BEM classes
  * `inner-`, `middle-`, `outer-` container classes are gone and replaced with simplified `wrapper` and `container` classes  
  * use standardised max-sizes with modifiers `-large` and `-max`
  * lighter backdrop,
  * min-width to prevent puny modals
  * other styling changes regarding padding, close button,…
* pulled out all modal overrides into a general `modal-overrides` file + cleanup of outdated CSS
* pulled out login and create account modal styling into their own file, cause it's such a big override 
* removed old general login.scss file for mobile & desktop
* only kept some remainders I don't want to touch in `app/assets/stylesheets/common/base/login.scss`

spec/system/user_page/user_preferences_security_spec.rb

@@ -26,7 +26,7 @@ describe "User preferences for Security", type: :system do
       find(".security-key .new-security-key").click
       expect(user_preferences_security_page).to have_css("input#security-key-name")
 
-      find(".modal-body input#security-key-name").fill_in(with: "First Key")
+      find(".d-modal__body input#security-key-name").fill_in(with: "First Key")
       find(".add-security-key").click
 
       expect(user_preferences_security_page).to have_css(".security-key .second-factor-item")
@@ -38,7 +38,7 @@ describe "User preferences for Security", type: :system do
       find("input#login-account-name").fill_in(with: user.username)
       find("input#login-account-password").fill_in(with: password)
 
-      find(".modal-footer .btn-primary").click
+      find(".d-modal__footer .btn-primary").click
       find("#security-key .btn-primary").click
 
       expect(page).to have_css(".header-dropdown-toggle.current-user")