Refactor gutters and rounded corners in blocks

[cogniSyb]

Due to changes in design and iterations in way of working in code, we should refactor some sizings and rounded corners.

• [ ] Make an inventarisation of all blocks with a gutter and their values on all breakpoints
• [ ] Decide in certain cases whether to switch to gap instead of margin or padding
• [x] Make an inventarisation of all blocks with a border-radius and their values on all breakpoints
• [ ] Utilise CSS custom properties to standardise patterns

List of components and their radius in design Content Card: 8px Content Carousel: 12px (for images) Find a Dealer: 12px Icon Cards: 8px Media Gallery: 8px Media with Key Stats: 8px in old designs, missing in new. Must be a mistake Media with Text Block: 8px Media with Tabs: 8px Resource Gallery: 8px Stories Carousel: 8px Subscribe: 8px Social: 8px Video Module: 8px mobile/tablet; 12px desktop Video Player Modal: 8px Visual Grid: 12px. In Digital Reveal designs it’s 8px

The rounded corners need to be harmonised, it will become 8px. Some of these changes will be fixed with #284. The deviating code will need to be corrected with this issue.

[shirin27]

Kamino cloned this issue to hlxsites/vg-volvotrucks-us