CSS variables for responsive margin and padding sizes

[ecgan]

User story

This is a follow-up to https://github.com/woocommerce/google-listings-and-ads/pull/1264#discussion_r818000169.

In our current code base, we have some custom margin and padding sizes like so:

margin-bottom: calc(var(--main-gap) / 3 * 2);

gap: calc(var(--large-gap) / 2);

The reason for using --main-gap and --large-gap is that they are responsive - their exact value depends on the current screen width. However, by using them in the examples above, it is not easy and natural to quickly understand and use them.

In this issue, the idea is to extract the above values into a set of CSS custom properties or SCSS variables , so that we can easily understand and use them.

In our internal slack thread (p1650010139538209-slack-CK365S85V), @eason suggested:

I think it's okay to add GLA-related CSS/SCSS variables in the files under the js/src/css/abstracts folder. One thing to take care probably is to ensure all variables are named with gla- prefix.

[puntope]

Thanks @ecgan 🙏

Would be cool to extend this issue into also adding other frequent used values (like the 600px) as mentioned here p1650010139538209-slack-CK365S85V