From 27ba7587ceb0b2586c173189cc4c865b0ab1e373 Mon Sep 17 00:00:00 2001
From: Stephanie Hobson <stephaniehobson@users.noreply.github.com>
Date: Fri, 11 Sep 2026 10:56:28 -0700
Subject: [PATCH] Convert templates/ and nav/menu/footer family to logical
 properties (#1084)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Second pass of the logical-properties migration -- the templates/ and
navigation/menu/footer component family, all built against current
main (post mixed-decls merge), not the older WS-4 branch state. 59 of
the 110 remaining @include bidi() calls removed:

  templates/_card-layout.scss    (15 -> 0)
  _navigation.scss               (11 -> 0)
  _footer.scss                   (10 -> 0)
  _menu-item.scss                (6 -> 0)
  _menu.scss                     (5 -> 0)
  _menu-list.scss                (4 -> 0)
  _sidebar-menu.scss             (4 -> 0)
  templates/_main-with-sidebar.scss (4 -> 0)

All eight files are now fully bidi()-free.

Notable non-mechanical cases:
- _navigation.scss / _menu-list.scss: several bidi() calls used the
  3-value "same property, different value per direction" form in
  pairs (e.g. two separate (padding-left, X, 0) / (padding-right, 0, X)
  tuples) rather than one 4-value tuple. Same underlying swap pattern,
  just spelled differently -- traced each pair through by hand to
  confirm which logical property they resolve to.
- _sidebar-menu.scss: one bidi() tuple paired a margin swap with a
  `transform: none / translateY(3px) rotate(180deg)` pair, flipping a
  ▸ triangle glyph to point the other way in RTL. transform has no
  logical/direction-aware equivalent (it's always in the element's own
  coordinate space), so that one stays an explicit [dir='rtl'] override
  -- only the margin half converted to margin-inline-start.
- _navigation.scss: two `background-position` bidi() calls stay
  physical with [dir='rtl'] overrides (same policy as the select rule
  in E1 -- no safe logical keyword syntax for background-position
  across this browser matrix). One of the two also had a bidi()
  tuple that was identical in both directions (dead weight, a pure
  no-op) -- collapsed to a single plain declaration.
- templates/_card-layout.scss, _menu.scss, _menu-item.scss: also
  converted several bare (non-bidi-wrapped) margin-left/margin-right:0
  pairs to margin-inline: 0 -- these were plain symmetric physical
  declarations sitting right next to the bidi() calls, in scope for
  the same inline-axis cleanup even though they weren't wrapped in the
  mixin.

Two real bugs found via a reported visual regression (menu-list
component rendering padding: 0 24px 0 4px locally vs. production's
padding: 0 24px 0 0) and fixed here, both the same class as the
label.mzp-u-inline bug found in the E1 commit -- a full 4-value
padding/margin shorthand implicitly zeroes every side it doesn't
otherwise set, and replacing it with a single logical longhand drops
that protection for the sides not touched:

- _menu-list.scss's `.is-details .mzp-c-menu-list-title button`: the
  original bidi() call's LTR value was the full shorthand
  "0 (16px + $spacing-sm) 0 0", explicitly zeroing padding-top/bottom/
  left. My conversion had only set padding-inline-end, so the button's
  padding-block and padding-inline-start fell through to the browser's
  UA default <button> padding (non-zero on every browser) instead of
  the intended 0. Fixed with padding-block: 0; padding-inline: 0 X.
- _footer.scss's `.mzp-c-footer-section:first-child`/`:last-child` at
  $mq-lg: the parent rule sets an explicit padding: 0 (X); shorthand
  (both inline sides non-zero), and :first-child/:last-child each
  need to zero out *one specific side* against that parent value --
  not restate the other side, which is what I'd written (a
  copy-paste-shaped mistake: I pattern-matched this diff's shape
  against a different, unrelated footer case that had no competing
  parent padding, and used the same-looking conversion without
  re-deriving it against this rule's actual cascade). Fixed to
  padding-inline-start: 0 / padding-inline-end: 0 respectively.

Given the severity, went back and systematically re-audited every
other bare "padding"/"margin"-shorthand-origin bidi() conversion
across both this commit and the E1 commit against the *actual*
parent-cascaded baseline (not just diff-shape pattern matching) --
checked ~20 selectors individually against true-original compiled
output. Everything else checked out: card-layout's, navigation's, and
menu-item's single-side overrides all rely on an explicit sibling
declaration (an earlier-cascading media query, or a base rule in the
same file) that already supplies the correct value for the side not
touched -- confirmed byte-for-byte via the same before/after compile
diff technique used throughout, this time checked per-selector rather
than by diff shape. Also confirmed the already-merged mixed-decls PR
doesn't have this bug class: it only did float/text-align keyword
swaps (no "sides" to drop), never converted a padding/margin
shorthand.

Branched directly off current main rather than the stale WS-4 chain
(D1/D2/E1 sit on pre-mixed-decls-merge main via the WS-3 tip) --
avoided converting bidi() calls against a structure that would need
re-reconciling again once that chain rebases. This PR has no file
overlap with D1/D2/E1's own scope.

Part of #1084.

Verified: npm run lint, npm test (47 specs, Firefox + Chrome),
npm run build-docs (523 items, no errors), npm run build-package, and
the exhaustive before/after compile diff described above all pass.
---
 CHANGELOG.md                                  |  5 ++
 assets/sass/protocol/components/_footer.scss  | 25 ++++---
 .../sass/protocol/components/_menu-item.scss  | 17 +++--
 .../sass/protocol/components/_menu-list.scss  |  9 +--
 assets/sass/protocol/components/_menu.scss    | 20 ++++--
 .../sass/protocol/components/_navigation.scss | 44 ++++++------
 .../protocol/components/_sidebar-menu.scss    | 21 +++---
 .../sass/protocol/templates/_card-layout.scss | 71 ++++++-------------
 .../templates/_main-with-sidebar.scss         | 28 +++-----
 9 files changed, 106 insertions(+), 134 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bdd64180..4edcd770 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,11 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
 
 ## Architecture changes
 
+### CSS Logical Properties
+
+* Continued migrating physical directional properties to their logical equivalents (see #1084) -- `templates/_card-layout.scss`, `templates/_main-with-sidebar.scss`, `_footer.scss`, `_navigation.scss`, `_menu.scss`, `_menu-item.scss`, `_menu-list.scss`, and `_sidebar-menu.scss`. 59 `bidi()` calls removed.
+* Where a property has no logical equivalent safe across the supported matrix (`background-position`, and a CSS `transform` that visually flips a directional glyph), kept the physical value with an explicit `[dir='rtl']` override instead.
+
 ### Browser Support
 
 * (breaking) Updated the supported browser matrix to Firefox ESR, Safari 15.6+, and evergreen browsers (`browserslist` in `package.json`).
diff --git a/assets/sass/protocol/components/_footer.scss b/assets/sass/protocol/components/_footer.scss
index 871e4c5a..ebba6c09 100644
--- a/assets/sass/protocol/components/_footer.scss
+++ b/assets/sass/protocol/components/_footer.scss
@@ -105,11 +105,11 @@
 
         &:nth-child(odd) {
             clear: inline-start;
-            @include bidi(((padding, 0 ($layout-md * 0.5) 0 0, 0 0 0 ($layout-md * 0.5)),));
+            padding-inline-end: $layout-md * 0.5;
         }
 
         &:nth-child(even) {
-            @include bidi(((padding, 0 0 0 ($layout-md * 0.5), 0 ($layout-md * 0.5) 0 0),));
+            padding-inline-start: $layout-md * 0.5;
         }
     }
 }
@@ -120,11 +120,11 @@
         float: inline-start;
 
         &:first-child {
-            @include bidi(((padding, 0 ($layout-md * 0.5) 0 0, 0 0 0 ($layout-md * 0.5)),));
+            padding-inline-start: 0;
         }
 
         &:last-child {
-            @include bidi(((padding, 0 0 0 ($layout-md * 0.5), 0 ($layout-md * 0.5) 0 0),));
+            padding-inline-end: 0;
         }
     }
 
@@ -181,11 +181,11 @@
             transition: transform 100ms ease-in-out;
             content: '';
             height: 24px;
+            inset-inline-end: 8px;
             margin-top: -12px;
             position: absolute;
             top: 50%;
             width: 24px;
-            @include bidi(((right, 8px, left, auto),));
         }
 
         button[aria-expanded='true']::before {
@@ -267,8 +267,8 @@
 
     li {
         display: inline-block;
+        margin-inline-end: $spacing-md;
         vertical-align: bottom;
-        @include bidi(((margin, 0 $spacing-md 0 0, 0 0 0 $spacing-md),));
 
         a {
             @include image-replaced;
@@ -299,17 +299,16 @@
 
     @media #{$mq-md} {
         bottom: 0;
+        inset-inline-end: 0;
         margin-bottom: 0;
         max-width: 33%; // don't over lap with legal links
         position: absolute;
-        @include bidi(((right, 0, left, auto),));
         text-align: end;
 
         li {
-            @include bidi((
-                (padding, 0 0 $spacing-md $spacing-lg, 0 $spacing-lg $spacing-md 0),
-                (margin, 0 , 0),
-            ));
+            margin: 0;
+            padding-block-end: $spacing-md;
+            padding-inline-start: $spacing-lg;
         }
     }
 }
@@ -330,10 +329,10 @@
     @media #{$mq-md} {
         li {
             display: inline-block;
-            @include bidi(((padding, 0 $spacing-lg 0 0, 0 0 0 $spacing-lg),));
+            padding-inline-end: $spacing-lg;
 
             &:last-child {
-                @include bidi(((padding-right, 0, padding-left, 0),));
+                padding-inline: 0;
             }
         }
     }
diff --git a/assets/sass/protocol/components/_menu-item.scss b/assets/sass/protocol/components/_menu-item.scss
index 2173e35f..2865df36 100644
--- a/assets/sass/protocol/components/_menu-item.scss
+++ b/assets/sass/protocol/components/_menu-item.scss
@@ -41,16 +41,16 @@ $icon-size: 24px;
     &.mzp-has-icon {
         .mzp-c-menu-item-head,
         .mzp-c-menu-item-link {
+            padding-inline-start: $icon-size + $spacing-lg;
             position: relative;
-            @include bidi(((padding-left, $icon-size + $spacing-lg, padding-right, 0),));
 
             .mzp-c-menu-item-icon {
                 height: $icon-size;
+                inset-inline-start: $spacing-sm;
                 margin: 0;
                 position: absolute;
                 top: $spacing-sm;
                 width: $icon-size;
-                @include bidi(((left, $spacing-sm, right, auto),));
             }
         }
     }
@@ -95,21 +95,19 @@ $icon-size: 24px;
                 float: inline-start;
 
                 &:nth-child(odd) {
-                    @include bidi((
-                        (clear, left, right),
-                        (padding-right, $spacing-sm, padding-left, 0),
-                    ));
+                    clear: inline-start;
+                    padding-inline-end: $spacing-sm;
                 }
 
                 &:nth-child(even) {
-                    @include bidi(((padding-left, $spacing-sm, padding-right, 0),));
+                    padding-inline-start: $spacing-sm;
                 }
             }
         }
     }
 
     &.mzp-has-icon .mzp-c-menu-item-list {
-        @include bidi(((margin-left, $icon-size + $spacing-lg, margin-right, 0),));
+        margin-inline-start: $icon-size + $spacing-lg;
     }
 
     @media #{$mq-md} {
@@ -124,7 +122,8 @@ $icon-size: 24px;
         }
 
         .mzp-c-menu-item-list {
-            @include bidi(((margin, $spacing-md 0 0 $spacing-sm, $spacing-md $spacing-sm 0 0),));
+            margin-block-start: $spacing-md;
+            margin-inline-start: $spacing-sm;
         }
     }
 }
diff --git a/assets/sass/protocol/components/_menu-list.scss b/assets/sass/protocol/components/_menu-list.scss
index b5f1ca4a..f70e6e14 100644
--- a/assets/sass/protocol/components/_menu-list.scss
+++ b/assets/sass/protocol/components/_menu-list.scss
@@ -31,17 +31,17 @@
         text-decoration: none;
 
         .mzp-t-download & {
-            @include bidi(((padding-right, $spacing-sm * 2 + 14px, padding-left, $spacing-sm),));
+            padding-inline-end: $spacing-sm * 2 + 14px;
 
             &::after {
                 background-size: 20px, 20px;
                 bottom: $spacing-sm;
                 content: '';
                 display: block;
+                inset-inline-end: $spacing-sm;
                 position: absolute;
                 top: $spacing-sm;
                 width: 14px;
-                @include bidi(((right, $spacing-sm, left, auto),));
             }
         }
 
@@ -76,22 +76,23 @@
             font-family: inherit;
             font-size: inherit;
             font-weight: inherit;
+            padding-block: 0;
+            padding-inline: 0 (16px + $spacing-sm);
             position: relative;
             text-align: inherit;
             text-decoration: underline;
             width: 100%;
-            @include bidi(((padding, 0 (16px + $spacing-sm) 0 0, 0 0 0 (16px + $spacing-sm)),));
 
             &::after {
                 background: $url-image-caret-down-link center bottom no-repeat;
                 bottom: 1px;
                 content: '';
                 display: inline-block;
+                inset-inline-end: 0;
                 position: absolute;
                 top: 0;
                 width: 16px;
                 transition: transform 200ms ease-in-out;
-                @include bidi(((right, 0, left, auto),));
             }
 
             &[aria-expanded='true']::after {
diff --git a/assets/sass/protocol/components/_menu.scss b/assets/sass/protocol/components/_menu.scss
index 923b3c61..08e60adc 100644
--- a/assets/sass/protocol/components/_menu.scss
+++ b/assets/sass/protocol/components/_menu.scss
@@ -80,11 +80,11 @@
             transition: transform 100ms ease-in-out;
             content: '';
             height: 20px;
+            inset-inline-end: 8px;
             margin-top: -8px;
             position: absolute;
             top: 50%;
             width: 20px;
-            @include bidi(((right, 8px, left, auto),));
         }
     }
 
@@ -224,11 +224,21 @@
         }
 
         @media #{$mq-md} {
-            @include bidi(((right, $layout-lg, left, auto),));
+            right: $layout-lg;
+
+            [dir='rtl'] & {
+                right: auto;
+                left: $layout-lg;
+            }
         }
 
         @media #{$mq-lg} {
-            @include bidi(((right, $layout-xl, left, auto),));
+            right: $layout-xl;
+
+            [dir='rtl'] & {
+                right: auto;
+                left: $layout-xl;
+            }
         }
     }
 
@@ -284,11 +294,11 @@
                 float: inline-start;
 
                 &:first-child {
-                    @include bidi(((margin-right, $spacing-lg * 0.5, margin-left, 0),));
+                    margin-inline-end: $spacing-lg * 0.5;
                 }
 
                 &:last-child {
-                    @include bidi(((margin-left, $spacing-lg * 0.5, margin-right, 0),));
+                    margin-inline-start: $spacing-lg * 0.5;
                 }
 
                 & > li:last-child .mzp-c-menu-item {
diff --git a/assets/sass/protocol/components/_navigation.scss b/assets/sass/protocol/components/_navigation.scss
index 0660be02..65d186bd 100644
--- a/assets/sass/protocol/components/_navigation.scss
+++ b/assets/sass/protocol/components/_navigation.scss
@@ -83,7 +83,8 @@ html.mzp-has-sticky-navigation {
     }
 
     @media #{$mq-md} {
-        @include bidi(((margin, $spacing-lg ($spacing-sm * 2) $spacing-lg 0, $spacing-lg 0 $spacing-lg ($spacing-sm * 2)),));
+        margin-block: $spacing-lg;
+        margin-inline: 0 ($spacing-sm * 2);
 
         a {
             margin-top: $spacing-sm;
@@ -91,11 +92,13 @@ html.mzp-has-sticky-navigation {
     }
 
     @media #{$mq-lg} {
-        @include bidi(((margin, $spacing-lg ($spacing-md * 2) $spacing-lg 0, $spacing-lg 0 $spacing-lg ($spacing-md * 2)),));
+        margin-block: $spacing-lg;
+        margin-inline: 0 ($spacing-md * 2);
     }
 
     @media #{$mq-xl} {
-        @include bidi(((margin, $spacing-lg ($spacing-lg * 2) $spacing-lg 0, $spacing-lg 0 $spacing-lg ($spacing-lg * 2)),));
+        margin-block: $spacing-lg;
+        margin-inline: 0 ($spacing-lg * 2);
     }
 
     .mzp-t-firefox & {
@@ -132,16 +135,16 @@ html.mzp-has-sticky-navigation {
 
     @media #{$mq-md} {
         display: inline-block;
+        margin-inline-start: -$spacing-sm;
         width: auto;
-        @include bidi(((margin-left, -$spacing-sm, margin-right, 0),));
     }
 
     @media #{$mq-lg} {
-        @include bidi(((margin-left, -$spacing-md, margin-right, 0),));
+        margin-inline-start: -$spacing-md;
     }
 
     @media #{$mq-xl} {
-        @include bidi(((margin-left, -$spacing-lg, margin-right, 0),));
+        margin-inline-start: -$spacing-lg;
     }
 }
 
@@ -165,17 +168,17 @@ html.mzp-has-sticky-navigation {
         display: block;
         float: inline-end;
         margin: $spacing-lg 0;
-        @include bidi((
-            (margin, $spacing-lg 0 $spacing-lg $spacing-sm, $spacing-lg $spacing-sm $spacing-lg 0),
-        ));
+        margin-inline-start: $spacing-sm;
     }
 
     @media #{$mq-lg} {
-        @include bidi(((margin, $spacing-lg 0 $spacing-lg $spacing-md, $spacing-lg $spacing-md $spacing-lg 0),));
+        margin-block: $spacing-lg;
+        margin-inline-start: $spacing-md;
     }
 
     @media #{$mq-xl} {
-        @include bidi(((margin, $spacing-lg 0 $spacing-lg $spacing-lg, $spacing-lg $spacing-lg $spacing-lg 0),));
+        margin-block: $spacing-lg;
+        margin-inline-start: $spacing-lg;
     }
 }
 
@@ -185,16 +188,19 @@ html.mzp-has-sticky-navigation {
 .mzp-c-navigation-menu-button {
     background-color: transparent;
     background-image: url('#{$image-path}/icons/menu.svg');
+    background-position: right 6px center;
     background-repeat: no-repeat;
     border-radius: $border-radius-sm;
     border: none;
     display: none;
-    height: 32px;
     float: inline-end;
-    @include bidi((
-        (background-position, right 6px center, left 6px center ),
-        (padding, 0 32px 0 6px, 0 6px 0 32px)
-    ));
+    height: 32px;
+    padding-block: 0;
+    padding-inline: 6px 32px;
+
+    [dir='rtl'] & {
+        background-position: left 6px center;
+    }
 
     &:hover,
     &:active,
@@ -208,10 +214,8 @@ html.mzp-has-sticky-navigation {
     cursor: pointer;
     width: 32px;
     @include image-replaced;
-    @include bidi((
-        (background-position, center center, center center ),
-        (padding, 0, 0),
-    ));
+    background-position: center center;
+    padding: 0;
 }
 
 .js .mzp-c-navigation-menu-button {
diff --git a/assets/sass/protocol/components/_sidebar-menu.scss b/assets/sass/protocol/components/_sidebar-menu.scss
index acd1e85a..34602b59 100644
--- a/assets/sass/protocol/components/_sidebar-menu.scss
+++ b/assets/sass/protocol/components/_sidebar-menu.scss
@@ -23,17 +23,16 @@
     li {
         color: $color-marketing-gray-80;
         display: inline-block;
-        @include bidi((
-            (margin-right, $spacing-xs, margin-left, 0),
-        ));
+        margin-inline-end: $spacing-xs;
 
         &::after {
             content: '\25B8'; // right pointing triangle
             display: inline-block;
-            @include bidi((
-                (margin-left, $spacing-xs, margin-right, 0),
-                (transform, none, translateY(3px) rotate(180deg)),
-            ));
+            margin-inline-start: $spacing-xs;
+
+            [dir='rtl'] & {
+                transform: translateY(3px) rotate(180deg);
+            }
         }
 
         &:last-child::after {
@@ -78,23 +77,19 @@
 }
 
 .mzp-c-sidemenu-label {
+    padding-inline-end: $spacing-lg;
     position: relative;
     @include text-body-sm;
     @include font-base;
-    @include bidi((
-        (padding-right, $spacing-lg, padding-left, 0),
-    ));
 
     &::after {
         transform: rotate(90deg);
         color: $color-marketing-gray-80;
         content: none;
         font-size: 1.5em;
+        inset-inline-end: 0;
         position: absolute;
         top: 0;
-        @include bidi((
-            (right, 0, left, auto),
-        ));
     }
 }
 
diff --git a/assets/sass/protocol/templates/_card-layout.scss b/assets/sass/protocol/templates/_card-layout.scss
index 26512adc..3edea80b 100644
--- a/assets/sass/protocol/templates/_card-layout.scss
+++ b/assets/sass/protocol/templates/_card-layout.scss
@@ -18,15 +18,11 @@
 
         .mzp-c-card {
             float: inline-start;
+            margin-inline: 0 var(--theme-spacing-between-inline);
             width: calc(50% - (var(--theme-spacing-between-inline) * 0.5));
-            @include bidi((
-                (margin-left, 0, var(--theme-spacing-between-inline)),
-                (margin-right, var(--theme-spacing-between-inline), 0),
-            ));
 
             &:nth-child(odd) {
-                margin-left: 0;
-                margin-right: 0;
+                margin-inline: 0;
             }
 
             &.mzp-c-card-large {
@@ -40,19 +36,16 @@
             width: calc(33.3% - (var(--theme-spacing-between-inline) - (var(--theme-spacing-between-inline) * 0.33)));
 
             &:nth-child(odd) {
-                @include bidi((
-                    (margin-left, 0, var(--theme-spacing-between-inline)),
-                    (margin-right, var(--theme-spacing-between-inline), 0),
-                ));
+                margin-inline: 0 var(--theme-spacing-between-inline);
             }
 
             &:nth-child(2),
             &:last-child {
-                @include bidi(((margin-right, 0, margin-left, 0),));
+                margin-inline-end: 0;
             }
 
             &:nth-child(3n) {
-                @include bidi(((clear, left, right),));
+                clear: inline-start;
             }
         }
 
@@ -73,40 +66,30 @@
 
         .mzp-c-card {
             float: inline-start;
+            margin-inline: 0 var(--theme-spacing-between-inline);
             width: calc(50% - (var(--theme-spacing-between-inline) * 0.5));
-            @include bidi((
-                (margin-left, 0, var(--theme-spacing-between-inline)),
-                (margin-right, var(--theme-spacing-between-inline), 0),
-            ));
 
             &:nth-child(even) {
-                margin-left: 0;
-                margin-right: 0;
+                margin-inline: 0;
             }
         }
     }
 
     @media #{$mq-lg} {
         .mzp-c-card {
+            margin-inline: 0 var(--theme-spacing-between-inline);
             width: calc(25% - (var(--theme-spacing-between-inline) - var(--theme-spacing-between-inline) * 0.25));
-            @include bidi((
-                (margin-left, 0, var(--theme-spacing-between-inline)),
-                (margin-right, var(--theme-spacing-between-inline), 0),
-            ));
 
             &:nth-child(even) {
-                @include bidi((
-                    (margin-left, 0, var(--theme-spacing-between-inline)),
-                    (margin-right, var(--theme-spacing-between-inline), 0),
-                ));
+                margin-inline: 0 var(--theme-spacing-between-inline);
             }
 
             &:nth-child(4n) {
-                @include bidi(((margin-right, 0, margin-left, 0),));
+                margin-inline-end: 0;
             }
 
             &:nth-child(4n+1) {
-                @include bidi(((clear, left, right),));
+                clear: inline-start;
             }
         }
     }
@@ -122,17 +105,12 @@
         @include clearfix;
 
         .mzp-c-card {
+            float: inline-start;
+            margin-inline: 0 var(--theme-spacing-between-inline);
             width: calc(50% - var(--theme-spacing-between-inline) * 0.5);
 
-            @include bidi((
-                (float, left, right),
-                (margin-left, 0, var(--theme-spacing-between-inline)),
-                (margin-right, var(--theme-spacing-between-inline), 0),
-            ));
-
             &:nth-child(even) {
-                margin-left: 0;
-                margin-right: 0;
+                margin-inline: 0;
             }
         }
     }
@@ -142,18 +120,15 @@
             width: calc(33.3% - (var(--theme-spacing-between-inline) - var(--theme-spacing-between-inline) * 0.33));
 
             &:nth-child(even) {
-                @include bidi((
-                    (margin-left, 0, var(--theme-spacing-between-inline)),
-                    (margin-right, var(--theme-spacing-between-inline), 0),
-                ));
+                margin-inline: 0 var(--theme-spacing-between-inline);
             }
 
             &:nth-child(3n) {
-                @include bidi(((margin-right, 0, margin-left, 0),));
+                margin-inline-end: 0;
             }
 
             &:nth-child(3n+1) {
-                @include bidi(((clear, left, right),));
+                clear: inline-start;
             }
         }
     }
@@ -168,19 +143,15 @@
         @include clearfix;
 
         .mzp-c-card {
-            @include bidi((
-                (float, left, right),
-                (margin-left, 0, var(--theme-spacing-between-inline)),
-                (margin-right, var(--theme-spacing-between-inline), 0),
-            ));
+            float: inline-start;
+            margin-inline: 0 var(--theme-spacing-between-inline);
 
             &:nth-child(2n) {
-                margin-left: 0;
-                margin-right: 0;
+                margin-inline: 0;
             }
 
             &:nth-child(2n+1) {
-                @include bidi(((clear, left, right),));
+                clear: inline-start;
             }
         }
     }
diff --git a/assets/sass/protocol/templates/_main-with-sidebar.scss b/assets/sass/protocol/templates/_main-with-sidebar.scss
index b77ee3a1..bbaf02d7 100644
--- a/assets/sass/protocol/templates/_main-with-sidebar.scss
+++ b/assets/sass/protocol/templates/_main-with-sidebar.scss
@@ -17,37 +17,25 @@
 
         &.mzp-l-sidebar-left {
             .mzp-l-main {
-                @include bidi((
-                    (float, right, left),
-                    (padding-left, $spacing-md, 0),
-                    (padding-right, 0, $spacing-md)
-                ));
+                float: inline-end;
+                padding-inline-start: $spacing-md;
             }
 
             .mzp-l-sidebar {
-                @include bidi((
-                    (float, left, right),
-                    (padding-right, $spacing-md, 0),
-                    (padding-left, 0, $spacing-md)
-                ));
+                float: inline-start;
+                padding-inline-end: $spacing-md;
             }
         }
 
         &.mzp-l-sidebar-right {
             .mzp-l-main {
-                @include bidi((
-                    (float, left, right),
-                    (padding-right, $spacing-md, 0),
-                    (padding-left, 0, $spacing-md)
-                ));
+                float: inline-start;
+                padding-inline-end: $spacing-md;
             }
 
             .mzp-l-sidebar {
-                @include bidi((
-                    (float, right, left),
-                    (padding-left, $spacing-md, 0),
-                    (padding-right, 0, $spacing-md)
-                ));
+                float: inline-end;
+                padding-inline-start: $spacing-md;
             }
         }
     }