Refactor CSS for performance and better maintainability

The CSS in this module can be improved by following Magento standards for implementing mobile first CSS and Magento's media query mixins & @media-common style group. As it currently is, a lot of CSS is loaded twice on the page which is bad for performance and maintainability. Also, some of the CSS selectors are scoped so they will effect every Magento screen, which may sometimes break the layout in a Magento theme.

See:
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/responsive-web-design/rwd_css.html

Preconditions

Magento Version :2.3.4

Module Store Locator Version :2.0.4

Environment : Developer

Third party modules : na

Steps to reproduce

On a clean Magento install with Store Locator installed check styles-l.css & styles-m.css for CSS rule a.geolocalize:before.
This CSS selector occurs in each file.

Additionally, see that there are many CSS rules which are not scoped to the screens they are required on, and which are using unnecessarily high specificity selectors.
For example, #maincontent {} .
These should be scoped to the store locator screens and should avoid using ID selectors as per Magento's coding standards. e.g.
.smile_store_locator-store-search .page-main {}
[class*='smile_store_locator'] .page-main {}

Expected result

This CSS needs to only occur once, in styles-m.css, if Magento's mobile first approach to CSS is followed.
A similar issue is occuring for many CSS selectors which do not follow Magento CSS standards. The @media-common is not be used.
i.e.
```
//
//  Common (styles-m.css)
//  _____________________________________________
& when (@media-common = true) {
// your code
}
```

Actual result

Lots of CSS selectors are being duplicated causing unnecessary CSS to be loaded more than once.

Smile-SA / magento2-module-store-locator