[FEATURE] Improve responsive design support

[chrismclarke]

What?
Make it easier to improve overall design for different sized screens

Why?
Apps are run on a wide variety of screen sizes (small mobile through to desktop), however typically designs are limited to mobile and maybe tablet. Adding a few general size-dependent layout changes and exposing some specific authoring options may help to generally improve layouts across device sizes.

How?
Would probably recommend:

• Review Ionic docs to understand what already happens at different screen sizes.
• Define set of screen sizes to model breakpoints around. Could consider tailwind existing sizes, angular material spec or ionic breakpoints.
• Add a _responsiveness.scss or similar partial global stylesheet that exposes mixins for size-specific styling
• Create some basic variables to adjust common whitespace variables for different screen sizes, E.g. ion-content padding. This might be a mix of creating new variables to read in components and adjusting ionic variables.

E.g. Create a new --padding variable to use in components and automatically change default value depending on screen size.

:host{
--padding:  8px;

@tablet{
-- padding: 16px
}

@desktop{
-- padding: 24px;
}

}

This can then be used in components or to override existing ionic variables or use within custom

:host{
--ion-padding: var(--padding)
}
.custom-class{
padding: var(--padding)
}

With a few more utilities in place can start looking more through existing apps and try to identify other areas where responsiveness could do with improvement

Other details
There's already a lot of code in place to manage whitepsace, e.g. --huge-padding: 40px; however this typically sets the value for a given component at all sizes and likely isn't best suited for responsive use-cases. May want to consider reviewing and removing legacy styles where possible.