As we are moving to an 8pt grid system (inherited also by Bootstrap 5) we should remove or align any units that don't fit into that grid.

Tasks

• Go through our code to see the amount of spacing attributes that don't use our 5px based units and come up with a reccomendation. Either to drop them or switch them to 8px variants.
• Also, remove the 4px unit and any use of it. The smallest spacing unit should be 8px to match the grid and avoid weird offsets.
• Review our code and replacing any spacing (padding, margin) with its closest variable from the list.

Naming

• As for the naming of the variables, most frameworks use numeric values which are a multiple of a base grid unit (in our case, that should be 8px), for example, for padding, that would be: p1, p2, p3, p4, so it's quite easy to see what a variable means when you are reading code, instead of space-xs which you might not be able to immediately associate with a number. If the base spacing is 8px, which actually means "a square on the grid", then p2 would be two squares on the grid, is super easy to visualize without doing any calculation.