Improve RTL text support in flex-with-gap mixin

Even if it was looking OK using `margin-left`, there were probably edge
cases where it wouldn't behave as we expected.

As mentioned in the previous commit, this won't be necessary once
everyone uses browsers supporting the `gap` property in flexbox layouts,
but this won't happen for a few years.

In a few months we might also consider using the `margin-inline-start`
property, which is currently supported by about 97% of the browsers [1].

[1] https://caniuse.com/css-logical-props

app/assets/stylesheets/mixins/layouts.scss

@@ -25,10 +25,10 @@
 
 @mixin flex-with-gap($gap: rem-calc(map-get($grid-column-gutter, medium))) {
   display: flex;
-  margin-left: -$gap;
+  margin-#{$global-left}: -$gap;
 
   > * {
-    margin-left: $gap;
+    margin-#{$global-left}: $gap;
   }
 }