The idea
Logical shorthands take two values just like physical ones, but the order is *start then end* rather than *top then right*. margin-inline: 20px 60px means 20px on the inline-start (left) and 60px on the inline-end (right); margin-block: 10px 30px means 10px on the block-start (top) and 30px on the block-end (bottom).
Physical margin longhands are off-limits — use the two-value logical shorthands.