Sorry, we don't support your browser.  Install a modern browser

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);


    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:

2 months ago