Use vars for grid

[ohmonster]

With these changes, a user should be able to more easily update the grid layout of products. Current users should see minor, if any, changes to mobile, and none to their current desktop implementations to styles.

Adds variables to

• desktop/small-items.css
• desktop/more-description-text.css with
• desktop/variable-defs.css to support calculated values

and

• mobile/mobile.css

Note: mobile.css has defaults/fallbacks defined as variables. For desktop, fallbacks are inline in the style definitions and also in variable-defs.css

There's no requirement to use variable-defs.css. However, using it makes resizing the product grid easier. Several values are calculated from a base value, making proportions more consistent and requiring less troubleshooting. Also, the styling should continue to work for those that include the file, but don't define any customizations.

The easiest way to redefine the proportions is to change --cust-item-tile-height.

For desktop, a user would do the following to make a slightly larger grid:

:root{
  --cust-item-tile-height:50px;
}
@import url(https://raw.githubusercontent.com/Thorvarium/vine-styling/main/desktop/variable-defs.css);
@import url(https://raw.githubusercontent.com/Thorvarium/vine-styling/main/desktop/small-items.css);
/*any additional imports*/
/*any css with additional redefined styles*/

For mobile, depending on the platform, browser, extension, etc, too make a similar change, they would use

:root{
  --cust-item-tile-height:50px;
}
@import url(https://raw.githubusercontent.com/Thorvarium/vine-styling/main/desktop/variable-defs.css);
@import url(https://raw.githubusercontent.com/Thorvarium/vine-styling/main/mobile.css);
/*any additional imports*/
/*any css with additional redefined styles*/