use inline and block properties now

src/components/cardbuilder/card.scss

@@ -302,11 +302,7 @@ button::-moz-focus-inner {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    text-align: left;
-
-    [dir="rtl"] & {
-        text-align: right;
-    }
+    text-align: start;
 }
 
 .dialog .cardText {
@@ -400,31 +396,21 @@ button::-moz-focus-inner {
 }
 
 .cardIndicators {
-    right: 0.225em;
+    inset-inline-end: 0.225em;
     top: 0.225em;
     position: absolute;
     display: flex;
     align-items: center;
     contain: layout style;
-
-    [dir="rtl"] & {
-        right: unset;
-        left: 0.225em;
-    }
 }
 
 .cardProgramAttributeIndicators {
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     position: absolute;
     display: flex;
     text-transform: uppercase;
     font-size: 92%;
-
-    [dir="rtl"] & {
-        left: unset;
-        right: 0;
-    }
 }
 
 .programAttributeIndicator {
@@ -444,12 +430,7 @@ button::-moz-focus-inner {
 .cardOverlayButton-br {
     position: absolute;
     bottom: 0;
-    right: 0;
-
-    [dir="rtl"] & {
-        right: unset;
-        left: 0;
-    }
+    inset-inline-end: 0;
 }
 
 .cardOverlayButtonIcon {

src/components/indicators/indicators.scss

@@ -7,14 +7,8 @@
 
 .itemProgressBarForeground {
     position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-
-    [dir="rtl"] & {
-        left: unset;
-        right: 0;
-    }
+    inset-block: 0;
+    inset-inline-start: 0;
 }
 
 .indicator {

src/components/listview/listview.scss

@@ -9,14 +9,10 @@
     margin: 0;
     display: block;
     align-items: center;
-    text-align: left;
+    text-align: start;
     padding: 0.25em 0.25em 0.25em 0.5em;
     cursor: pointer;
     overflow: hidden;
-
-    [dir='rtl'] & {
-        text-align: right;
-    }
 }
 
 .listItem-withContentWrapper {

src/components/mediainfo/mediainfo.scss

@@ -1,10 +1,7 @@
 .mediaInfoItem {
-    margin: 0 1em 0 0;
+    margin-block: 0;
+    margin-inline: 0 1em;
     padding: 0;
-
-    [dir="rtl"] & {
-        margin: 0 0 0 1em;
-    }
 }
 
 .mediaInfoText {
@@ -29,12 +26,7 @@
 }
 
 .mediaInfoItem:last-child {
-    margin-right: 0;
-
-    [dir='rtl'] & {
-        margin-right: unset;
-        margin-left: 0;
-    }
+    margin-inline-end: 0;
 }
 
 .starRatingContainer {