Better naming for logical properties (inline and block)#81

Please change the class names for example:

.margin-horizontal-m into .margin-inline-m
.margin-vertical-m into .margin-block-m

also a big improvent would be to change CSS property from:

    margin-left: 2rem;
    margin-left: var(--space-m);
    margin-right: 2rem;
    margin-right: var(--space-m);

to

    margin-inline: 2rem;
    margin-inline: var(--space-m);

Alternatively, if there is reason to keep left & right separated, then the right way would look like this:
.margin-inline-end or .margin-inline-start

All margins and paddings the same way.

A good documentation can be found here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values