@1money/component-ui 0.0.76 → 0.0.78

package/es/components/Grid/style/Grid.css

@@ -21,60 +21,41 @@
   *   }
   */
 .om-component-ui-grid-row {
+  --om-grid-align: initial;
+  --om-grid-align-sm: initial;
+  --om-grid-align-md: initial;
+  --om-grid-align-lg: initial;
+  --om-grid-justify: initial;
+  --om-grid-justify-sm: initial;
+  --om-grid-justify-md: initial;
+  --om-grid-justify-lg: initial;
   display: flex;
   flex-wrap: wrap;
+  align-items: var(--om-grid-align, stretch);
   justify-content: var(--om-grid-justify, flex-start);
-  margin-right: calc(var(--om-grid-gutter-x, 0px) / -2);
-  margin-left: calc(var(--om-grid-gutter-x, 0px) / -2);
+  margin-inline: calc(var(--om-grid-gutter-x, 0px) / -2);
   row-gap: var(--om-grid-gutter-y, 0px);
 }
 .om-component-ui-grid-row-no-wrap {
   flex-wrap: nowrap;
 }
-.om-component-ui-grid-row-align-top {
-  align-items: flex-start;
-}
-.om-component-ui-grid-row-align-middle {
-  align-items: center;
-}
-.om-component-ui-grid-row-align-bottom {
-  align-items: flex-end;
-}
-.om-component-ui-grid-row-align-stretch {
-  align-items: stretch;
-}
-.om-component-ui-grid-row-justify-start {
-  justify-content: flex-start;
-}
-.om-component-ui-grid-row-justify-end {
-  justify-content: flex-end;
-}
-.om-component-ui-grid-row-justify-center {
-  justify-content: center;
-}
-.om-component-ui-grid-row-justify-space-between {
-  justify-content: space-between;
-}
-.om-component-ui-grid-row-justify-space-around {
-  justify-content: space-around;
-}
-.om-component-ui-grid-row-justify-space-evenly {
-  justify-content: space-evenly;
-}
 
 @media (max-width: 1279.98px) {
   .om-component-ui-grid-row {
+    align-items: var(--om-grid-align-lg, var(--om-grid-align, stretch));
     justify-content: var(--om-grid-justify-lg, var(--om-grid-justify, flex-start));
   }
 }
 @media (max-width: 1023.98px) {
   .om-component-ui-grid-row {
-    justify-content: var(--om-grid-justify-md, var(--om-grid-justify, flex-start));
+    align-items: var(--om-grid-align-md, var(--om-grid-align-lg, var(--om-grid-align, stretch)));
+    justify-content: var(--om-grid-justify-md, var(--om-grid-justify-lg, var(--om-grid-justify, flex-start)));
   }
 }
 @media (max-width: 767.98px) {
   .om-component-ui-grid-row {
-    justify-content: var(--om-grid-justify-sm, var(--om-grid-justify, flex-start));
+    align-items: var(--om-grid-align-sm, var(--om-grid-align-md, var(--om-grid-align-lg, var(--om-grid-align, stretch))));
+    justify-content: var(--om-grid-justify-sm, var(--om-grid-justify-md, var(--om-grid-justify-lg, var(--om-grid-justify, flex-start))));
   }
 }
 .om-component-ui-grid-col {
@@ -82,17 +63,21 @@
   flex: var(--om-grid-col-flex, 0 0 auto);
   max-width: 100%;
   min-height: 1px;
-  padding-right: calc(var(--om-grid-gutter-x, 0px) / 2);
-  padding-left: calc(var(--om-grid-gutter-x, 0px) / 2);
+  padding-inline: calc(var(--om-grid-gutter-x, 0px) / 2);
+}
+
+.om-component-ui-grid-col-0 {
+  display: none;
 }
 
 .om-component-ui-grid-col-1 {
+  display: block;
   flex: 0 0 8.3333333333%;
   max-width: 8.3333333333%;
 }
 
 .om-component-ui-grid-col-offset-1 {
-  margin-left: 8.3333333333%;
+  margin-inline-start: 8.3333333333%;
 }
 
 .om-component-ui-grid-col-order-1 {
@@ -100,20 +85,21 @@
 }
 
 .om-component-ui-grid-col-push-1 {
-  left: 8.3333333333%;
+  inset-inline-start: 8.3333333333%;
 }
 
 .om-component-ui-grid-col-pull-1 {
-  right: 8.3333333333%;
+  inset-inline-end: 8.3333333333%;
 }
 
 .om-component-ui-grid-col-2 {
+  display: block;
   flex: 0 0 16.6666666667%;
   max-width: 16.6666666667%;
 }
 
 .om-component-ui-grid-col-offset-2 {
-  margin-left: 16.6666666667%;
+  margin-inline-start: 16.6666666667%;
 }
 
 .om-component-ui-grid-col-order-2 {
@@ -121,20 +107,21 @@
 }
 
 .om-component-ui-grid-col-push-2 {
-  left: 16.6666666667%;
+  inset-inline-start: 16.6666666667%;
 }
 
 .om-component-ui-grid-col-pull-2 {
-  right: 16.6666666667%;
+  inset-inline-end: 16.6666666667%;
 }
 
 .om-component-ui-grid-col-3 {
+  display: block;
   flex: 0 0 25%;
   max-width: 25%;
 }
 
 .om-component-ui-grid-col-offset-3 {
-  margin-left: 25%;
+  margin-inline-start: 25%;
 }
 
 .om-component-ui-grid-col-order-3 {
@@ -142,20 +129,21 @@
 }
 
 .om-component-ui-grid-col-push-3 {
-  left: 25%;
+  inset-inline-start: 25%;
 }
 
 .om-component-ui-grid-col-pull-3 {
-  right: 25%;
+  inset-inline-end: 25%;
 }
 
 .om-component-ui-grid-col-4 {
+  display: block;
   flex: 0 0 33.3333333333%;
   max-width: 33.3333333333%;
 }
 
 .om-component-ui-grid-col-offset-4 {
-  margin-left: 33.3333333333%;
+  margin-inline-start: 33.3333333333%;
 }
 
 .om-component-ui-grid-col-order-4 {
@@ -163,20 +151,21 @@
 }
 
 .om-component-ui-grid-col-push-4 {
-  left: 33.3333333333%;
+  inset-inline-start: 33.3333333333%;
 }
 
 .om-component-ui-grid-col-pull-4 {
-  right: 33.3333333333%;
+  inset-inline-end: 33.3333333333%;
 }
 
 .om-component-ui-grid-col-5 {
+  display: block;
   flex: 0 0 41.6666666667%;
   max-width: 41.6666666667%;
 }
 
 .om-component-ui-grid-col-offset-5 {
-  margin-left: 41.6666666667%;
+  margin-inline-start: 41.6666666667%;
 }
 
 .om-component-ui-grid-col-order-5 {
@@ -184,20 +173,21 @@
 }
 
 .om-component-ui-grid-col-push-5 {
-  left: 41.6666666667%;
+  inset-inline-start: 41.6666666667%;
 }
 
 .om-component-ui-grid-col-pull-5 {
-  right: 41.6666666667%;
+  inset-inline-end: 41.6666666667%;
 }
 
 .om-component-ui-grid-col-6 {
+  display: block;
   flex: 0 0 50%;
   max-width: 50%;
 }
 
 .om-component-ui-grid-col-offset-6 {
-  margin-left: 50%;
+  margin-inline-start: 50%;
 }
 
 .om-component-ui-grid-col-order-6 {
@@ -205,20 +195,21 @@
 }
 
 .om-component-ui-grid-col-push-6 {
-  left: 50%;
+  inset-inline-start: 50%;
 }
 
 .om-component-ui-grid-col-pull-6 {
-  right: 50%;
+  inset-inline-end: 50%;
 }
 
 .om-component-ui-grid-col-7 {
+  display: block;
   flex: 0 0 58.3333333333%;
   max-width: 58.3333333333%;
 }
 
 .om-component-ui-grid-col-offset-7 {
-  margin-left: 58.3333333333%;
+  margin-inline-start: 58.3333333333%;
 }
 
 .om-component-ui-grid-col-order-7 {
@@ -226,20 +217,21 @@
 }
 
 .om-component-ui-grid-col-push-7 {
-  left: 58.3333333333%;
+  inset-inline-start: 58.3333333333%;
 }
 
 .om-component-ui-grid-col-pull-7 {
-  right: 58.3333333333%;
+  inset-inline-end: 58.3333333333%;
 }
 
 .om-component-ui-grid-col-8 {
+  display: block;
   flex: 0 0 66.6666666667%;
   max-width: 66.6666666667%;
 }
 
 .om-component-ui-grid-col-offset-8 {
-  margin-left: 66.6666666667%;
+  margin-inline-start: 66.6666666667%;
 }
 
 .om-component-ui-grid-col-order-8 {
@@ -247,20 +239,21 @@
 }
 
 .om-component-ui-grid-col-push-8 {
-  left: 66.6666666667%;
+  inset-inline-start: 66.6666666667%;
 }
 
 .om-component-ui-grid-col-pull-8 {
-  right: 66.6666666667%;
+  inset-inline-end: 66.6666666667%;
 }
 
 .om-component-ui-grid-col-9 {
+  display: block;
   flex: 0 0 75%;
   max-width: 75%;
 }
 
 .om-component-ui-grid-col-offset-9 {
-  margin-left: 75%;
+  margin-inline-start: 75%;
 }
 
 .om-component-ui-grid-col-order-9 {
@@ -268,20 +261,21 @@
 }
 
 .om-component-ui-grid-col-push-9 {
-  left: 75%;
+  inset-inline-start: 75%;
 }
 
 .om-component-ui-grid-col-pull-9 {
-  right: 75%;
+  inset-inline-end: 75%;
 }
 
 .om-component-ui-grid-col-10 {
+  display: block;
   flex: 0 0 83.3333333333%;
   max-width: 83.3333333333%;
 }
 
 .om-component-ui-grid-col-offset-10 {
-  margin-left: 83.3333333333%;
+  margin-inline-start: 83.3333333333%;
 }
 
 .om-component-ui-grid-col-order-10 {
@@ -289,20 +283,21 @@
 }
 
 .om-component-ui-grid-col-push-10 {
-  left: 83.3333333333%;
+  inset-inline-start: 83.3333333333%;
 }
 
 .om-component-ui-grid-col-pull-10 {
-  right: 83.3333333333%;
+  inset-inline-end: 83.3333333333%;
 }
 
 .om-component-ui-grid-col-11 {
+  display: block;
   flex: 0 0 91.6666666667%;
   max-width: 91.6666666667%;
 }
 
 .om-component-ui-grid-col-offset-11 {
-  margin-left: 91.6666666667%;
+  margin-inline-start: 91.6666666667%;
 }
 
 .om-component-ui-grid-col-order-11 {
@@ -310,20 +305,21 @@
 }
 
 .om-component-ui-grid-col-push-11 {
-  left: 91.6666666667%;
+  inset-inline-start: 91.6666666667%;
 }
 
 .om-component-ui-grid-col-pull-11 {
-  right: 91.6666666667%;
+  inset-inline-end: 91.6666666667%;
 }
 
 .om-component-ui-grid-col-12 {
+  display: block;
   flex: 0 0 100%;
   max-width: 100%;
 }
 
 .om-component-ui-grid-col-offset-12 {
-  margin-left: 100%;
+  margin-inline-start: 100%;
 }
 
 .om-component-ui-grid-col-order-12 {
@@ -331,622 +327,670 @@
 }
 
 .om-component-ui-grid-col-push-12 {
-  left: 100%;
+  inset-inline-start: 100%;
 }
 
 .om-component-ui-grid-col-pull-12 {
-  right: 100%;
+  inset-inline-end: 100%;
 }
 
 @media (max-width: 1279.98px) {
   .om-component-ui-grid-col {
     flex: var(--om-grid-col-flex-lg, var(--om-grid-col-flex, 0 0 auto));
-    padding-right: calc(var(--om-grid-gutter-x-lg, var(--om-grid-gutter-x, 0px)) / 2);
-    padding-left: calc(var(--om-grid-gutter-x-lg, var(--om-grid-gutter-x, 0px)) / 2);
+    padding-inline: calc(var(--om-grid-gutter-x-lg, var(--om-grid-gutter-x, 0px)) / 2);
   }
   .om-component-ui-grid-row {
-    margin-right: calc(var(--om-grid-gutter-x-lg, var(--om-grid-gutter-x, 0px)) / -2);
-    margin-left: calc(var(--om-grid-gutter-x-lg, var(--om-grid-gutter-x, 0px)) / -2);
+    margin-inline: calc(var(--om-grid-gutter-x-lg, var(--om-grid-gutter-x, 0px)) / -2);
     row-gap: var(--om-grid-gutter-y-lg, var(--om-grid-gutter-y, 0px));
   }
+  .om-component-ui-grid-col-lg-0 {
+    display: none;
+  }
   .om-component-ui-grid-col-lg-1 {
+    display: block;
     flex: 0 0 8.3333333333%;
     max-width: 8.3333333333%;
   }
   .om-component-ui-grid-col-lg-offset-1 {
-    margin-left: 8.3333333333%;
+    margin-inline-start: 8.3333333333%;
   }
   .om-component-ui-grid-col-lg-order-1 {
     order: 1;
   }
   .om-component-ui-grid-col-lg-push-1 {
-    left: 8.3333333333%;
+    inset-inline-start: 8.3333333333%;
   }
   .om-component-ui-grid-col-lg-pull-1 {
-    right: 8.3333333333%;
+    inset-inline-end: 8.3333333333%;
   }
   .om-component-ui-grid-col-lg-2 {
+    display: block;
     flex: 0 0 16.6666666667%;
     max-width: 16.6666666667%;
   }
   .om-component-ui-grid-col-lg-offset-2 {
-    margin-left: 16.6666666667%;
+    margin-inline-start: 16.6666666667%;
   }
   .om-component-ui-grid-col-lg-order-2 {
     order: 2;
   }
   .om-component-ui-grid-col-lg-push-2 {
-    left: 16.6666666667%;
+    inset-inline-start: 16.6666666667%;
   }
   .om-component-ui-grid-col-lg-pull-2 {
-    right: 16.6666666667%;
+    inset-inline-end: 16.6666666667%;
   }
   .om-component-ui-grid-col-lg-3 {
+    display: block;
     flex: 0 0 25%;
     max-width: 25%;
   }
   .om-component-ui-grid-col-lg-offset-3 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .om-component-ui-grid-col-lg-order-3 {
     order: 3;
   }
   .om-component-ui-grid-col-lg-push-3 {
-    left: 25%;
+    inset-inline-start: 25%;
   }
   .om-component-ui-grid-col-lg-pull-3 {
-    right: 25%;
+    inset-inline-end: 25%;
   }
   .om-component-ui-grid-col-lg-4 {
+    display: block;
     flex: 0 0 33.3333333333%;
     max-width: 33.3333333333%;
   }
   .om-component-ui-grid-col-lg-offset-4 {
-    margin-left: 33.3333333333%;
+    margin-inline-start: 33.3333333333%;
   }
   .om-component-ui-grid-col-lg-order-4 {
     order: 4;
   }
   .om-component-ui-grid-col-lg-push-4 {
-    left: 33.3333333333%;
+    inset-inline-start: 33.3333333333%;
   }
   .om-component-ui-grid-col-lg-pull-4 {
-    right: 33.3333333333%;
+    inset-inline-end: 33.3333333333%;
   }
   .om-component-ui-grid-col-lg-5 {
+    display: block;
     flex: 0 0 41.6666666667%;
     max-width: 41.6666666667%;
   }
   .om-component-ui-grid-col-lg-offset-5 {
-    margin-left: 41.6666666667%;
+    margin-inline-start: 41.6666666667%;
   }
   .om-component-ui-grid-col-lg-order-5 {
     order: 5;
   }
   .om-component-ui-grid-col-lg-push-5 {
-    left: 41.6666666667%;
+    inset-inline-start: 41.6666666667%;
   }
   .om-component-ui-grid-col-lg-pull-5 {
-    right: 41.6666666667%;
+    inset-inline-end: 41.6666666667%;
   }
   .om-component-ui-grid-col-lg-6 {
+    display: block;
     flex: 0 0 50%;
     max-width: 50%;
   }
   .om-component-ui-grid-col-lg-offset-6 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .om-component-ui-grid-col-lg-order-6 {
     order: 6;
   }
   .om-component-ui-grid-col-lg-push-6 {
-    left: 50%;
+    inset-inline-start: 50%;
   }
   .om-component-ui-grid-col-lg-pull-6 {
-    right: 50%;
+    inset-inline-end: 50%;
   }
   .om-component-ui-grid-col-lg-7 {
+    display: block;
     flex: 0 0 58.3333333333%;
     max-width: 58.3333333333%;
   }
   .om-component-ui-grid-col-lg-offset-7 {
-    margin-left: 58.3333333333%;
+    margin-inline-start: 58.3333333333%;
   }
   .om-component-ui-grid-col-lg-order-7 {
     order: 7;
   }
   .om-component-ui-grid-col-lg-push-7 {
-    left: 58.3333333333%;
+    inset-inline-start: 58.3333333333%;
   }
   .om-component-ui-grid-col-lg-pull-7 {
-    right: 58.3333333333%;
+    inset-inline-end: 58.3333333333%;
   }
   .om-component-ui-grid-col-lg-8 {
+    display: block;
     flex: 0 0 66.6666666667%;
     max-width: 66.6666666667%;
   }
   .om-component-ui-grid-col-lg-offset-8 {
-    margin-left: 66.6666666667%;
+    margin-inline-start: 66.6666666667%;
   }
   .om-component-ui-grid-col-lg-order-8 {
     order: 8;
   }
   .om-component-ui-grid-col-lg-push-8 {
-    left: 66.6666666667%;
+    inset-inline-start: 66.6666666667%;
   }
   .om-component-ui-grid-col-lg-pull-8 {
-    right: 66.6666666667%;
+    inset-inline-end: 66.6666666667%;
   }
   .om-component-ui-grid-col-lg-9 {
+    display: block;
     flex: 0 0 75%;
     max-width: 75%;
   }
   .om-component-ui-grid-col-lg-offset-9 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .om-component-ui-grid-col-lg-order-9 {
     order: 9;
   }
   .om-component-ui-grid-col-lg-push-9 {
-    left: 75%;
+    inset-inline-start: 75%;
   }
   .om-component-ui-grid-col-lg-pull-9 {
-    right: 75%;
+    inset-inline-end: 75%;
   }
   .om-component-ui-grid-col-lg-10 {
+    display: block;
     flex: 0 0 83.3333333333%;
     max-width: 83.3333333333%;
   }
   .om-component-ui-grid-col-lg-offset-10 {
-    margin-left: 83.3333333333%;
+    margin-inline-start: 83.3333333333%;
   }
   .om-component-ui-grid-col-lg-order-10 {
     order: 10;
   }
   .om-component-ui-grid-col-lg-push-10 {
-    left: 83.3333333333%;
+    inset-inline-start: 83.3333333333%;
   }
   .om-component-ui-grid-col-lg-pull-10 {
-    right: 83.3333333333%;
+    inset-inline-end: 83.3333333333%;
   }
   .om-component-ui-grid-col-lg-11 {
+    display: block;
     flex: 0 0 91.6666666667%;
     max-width: 91.6666666667%;
   }
   .om-component-ui-grid-col-lg-offset-11 {
-    margin-left: 91.6666666667%;
+    margin-inline-start: 91.6666666667%;
   }
   .om-component-ui-grid-col-lg-order-11 {
     order: 11;
   }
   .om-component-ui-grid-col-lg-push-11 {
-    left: 91.6666666667%;
+    inset-inline-start: 91.6666666667%;
   }
   .om-component-ui-grid-col-lg-pull-11 {
-    right: 91.6666666667%;
+    inset-inline-end: 91.6666666667%;
   }
   .om-component-ui-grid-col-lg-12 {
+    display: block;
     flex: 0 0 100%;
     max-width: 100%;
   }
   .om-component-ui-grid-col-lg-offset-12 {
-    margin-left: 100%;
+    margin-inline-start: 100%;
   }
   .om-component-ui-grid-col-lg-order-12 {
     order: 12;
   }
   .om-component-ui-grid-col-lg-push-12 {
-    left: 100%;
+    inset-inline-start: 100%;
   }
   .om-component-ui-grid-col-lg-pull-12 {
-    right: 100%;
+    inset-inline-end: 100%;
+  }
+  .om-component-ui-grid-col-lg-flex {
+    display: block;
   }
 }
 @media (max-width: 1023.98px) {
   .om-component-ui-grid-col {
-    flex: var(--om-grid-col-flex-md, var(--om-grid-col-flex, 0 0 auto));
-    padding-right: calc(var(--om-grid-gutter-x-md, var(--om-grid-gutter-x, 0px)) / 2);
-    padding-left: calc(var(--om-grid-gutter-x-md, var(--om-grid-gutter-x, 0px)) / 2);
+    flex: var(--om-grid-col-flex-md, var(--om-grid-col-flex-lg, var(--om-grid-col-flex, 0 0 auto)));
+    padding-inline: calc(var(--om-grid-gutter-x-md, var(--om-grid-gutter-x-lg, var(--om-grid-gutter-x, 0px))) / 2);
   }
   .om-component-ui-grid-row {
-    margin-right: calc(var(--om-grid-gutter-x-md, var(--om-grid-gutter-x, 0px)) / -2);
-    margin-left: calc(var(--om-grid-gutter-x-md, var(--om-grid-gutter-x, 0px)) / -2);
-    row-gap: var(--om-grid-gutter-y-md, var(--om-grid-gutter-y, 0px));
+    margin-inline: calc(var(--om-grid-gutter-x-md, var(--om-grid-gutter-x-lg, var(--om-grid-gutter-x, 0px))) / -2);
+    row-gap: var(--om-grid-gutter-y-md, var(--om-grid-gutter-y-lg, var(--om-grid-gutter-y, 0px)));
+  }
+  .om-component-ui-grid-col-md-0 {
+    display: none;
   }
   .om-component-ui-grid-col-md-1 {
+    display: block;
     flex: 0 0 8.3333333333%;
     max-width: 8.3333333333%;
   }
   .om-component-ui-grid-col-md-offset-1 {
-    margin-left: 8.3333333333%;
+    margin-inline-start: 8.3333333333%;
   }
   .om-component-ui-grid-col-md-order-1 {
     order: 1;
   }
   .om-component-ui-grid-col-md-push-1 {
-    left: 8.3333333333%;
+    inset-inline-start: 8.3333333333%;
   }
   .om-component-ui-grid-col-md-pull-1 {
-    right: 8.3333333333%;
+    inset-inline-end: 8.3333333333%;
   }
   .om-component-ui-grid-col-md-2 {
+    display: block;
     flex: 0 0 16.6666666667%;
     max-width: 16.6666666667%;
   }
   .om-component-ui-grid-col-md-offset-2 {
-    margin-left: 16.6666666667%;
+    margin-inline-start: 16.6666666667%;
   }
   .om-component-ui-grid-col-md-order-2 {
     order: 2;
   }
   .om-component-ui-grid-col-md-push-2 {
-    left: 16.6666666667%;
+    inset-inline-start: 16.6666666667%;
   }
   .om-component-ui-grid-col-md-pull-2 {
-    right: 16.6666666667%;
+    inset-inline-end: 16.6666666667%;
   }
   .om-component-ui-grid-col-md-3 {
+    display: block;
     flex: 0 0 25%;
     max-width: 25%;
   }
   .om-component-ui-grid-col-md-offset-3 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .om-component-ui-grid-col-md-order-3 {
     order: 3;
   }
   .om-component-ui-grid-col-md-push-3 {
-    left: 25%;
+    inset-inline-start: 25%;
   }
   .om-component-ui-grid-col-md-pull-3 {
-    right: 25%;
+    inset-inline-end: 25%;
   }
   .om-component-ui-grid-col-md-4 {
+    display: block;
     flex: 0 0 33.3333333333%;
     max-width: 33.3333333333%;
   }
   .om-component-ui-grid-col-md-offset-4 {
-    margin-left: 33.3333333333%;
+    margin-inline-start: 33.3333333333%;
   }
   .om-component-ui-grid-col-md-order-4 {
     order: 4;
   }
   .om-component-ui-grid-col-md-push-4 {
-    left: 33.3333333333%;
+    inset-inline-start: 33.3333333333%;
   }
   .om-component-ui-grid-col-md-pull-4 {
-    right: 33.3333333333%;
+    inset-inline-end: 33.3333333333%;
   }
   .om-component-ui-grid-col-md-5 {
+    display: block;
     flex: 0 0 41.6666666667%;
     max-width: 41.6666666667%;
   }
   .om-component-ui-grid-col-md-offset-5 {
-    margin-left: 41.6666666667%;
+    margin-inline-start: 41.6666666667%;
   }
   .om-component-ui-grid-col-md-order-5 {
     order: 5;
   }
   .om-component-ui-grid-col-md-push-5 {
-    left: 41.6666666667%;
+    inset-inline-start: 41.6666666667%;
   }
   .om-component-ui-grid-col-md-pull-5 {
-    right: 41.6666666667%;
+    inset-inline-end: 41.6666666667%;
   }
   .om-component-ui-grid-col-md-6 {
+    display: block;
     flex: 0 0 50%;
     max-width: 50%;
   }
   .om-component-ui-grid-col-md-offset-6 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .om-component-ui-grid-col-md-order-6 {
     order: 6;
   }
   .om-component-ui-grid-col-md-push-6 {
-    left: 50%;
+    inset-inline-start: 50%;
   }
   .om-component-ui-grid-col-md-pull-6 {
-    right: 50%;
+    inset-inline-end: 50%;
   }
   .om-component-ui-grid-col-md-7 {
+    display: block;
     flex: 0 0 58.3333333333%;
     max-width: 58.3333333333%;
   }
   .om-component-ui-grid-col-md-offset-7 {
-    margin-left: 58.3333333333%;
+    margin-inline-start: 58.3333333333%;
   }
   .om-component-ui-grid-col-md-order-7 {
     order: 7;
   }
   .om-component-ui-grid-col-md-push-7 {
-    left: 58.3333333333%;
+    inset-inline-start: 58.3333333333%;
   }
   .om-component-ui-grid-col-md-pull-7 {
-    right: 58.3333333333%;
+    inset-inline-end: 58.3333333333%;
   }
   .om-component-ui-grid-col-md-8 {
+    display: block;
     flex: 0 0 66.6666666667%;
     max-width: 66.6666666667%;
   }
   .om-component-ui-grid-col-md-offset-8 {
-    margin-left: 66.6666666667%;
+    margin-inline-start: 66.6666666667%;
   }
   .om-component-ui-grid-col-md-order-8 {
     order: 8;
   }
   .om-component-ui-grid-col-md-push-8 {
-    left: 66.6666666667%;
+    inset-inline-start: 66.6666666667%;
   }
   .om-component-ui-grid-col-md-pull-8 {
-    right: 66.6666666667%;
+    inset-inline-end: 66.6666666667%;
   }
   .om-component-ui-grid-col-md-9 {
+    display: block;
     flex: 0 0 75%;
     max-width: 75%;
   }
   .om-component-ui-grid-col-md-offset-9 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .om-component-ui-grid-col-md-order-9 {
     order: 9;
   }
   .om-component-ui-grid-col-md-push-9 {
-    left: 75%;
+    inset-inline-start: 75%;
   }
   .om-component-ui-grid-col-md-pull-9 {
-    right: 75%;
+    inset-inline-end: 75%;
   }
   .om-component-ui-grid-col-md-10 {
+    display: block;
     flex: 0 0 83.3333333333%;
     max-width: 83.3333333333%;
   }
   .om-component-ui-grid-col-md-offset-10 {
-    margin-left: 83.3333333333%;
+    margin-inline-start: 83.3333333333%;
   }
   .om-component-ui-grid-col-md-order-10 {
     order: 10;
   }
   .om-component-ui-grid-col-md-push-10 {
-    left: 83.3333333333%;
+    inset-inline-start: 83.3333333333%;
   }
   .om-component-ui-grid-col-md-pull-10 {
-    right: 83.3333333333%;
+    inset-inline-end: 83.3333333333%;
   }
   .om-component-ui-grid-col-md-11 {
+    display: block;
     flex: 0 0 91.6666666667%;
     max-width: 91.6666666667%;
   }
   .om-component-ui-grid-col-md-offset-11 {
-    margin-left: 91.6666666667%;
+    margin-inline-start: 91.6666666667%;
   }
   .om-component-ui-grid-col-md-order-11 {
     order: 11;
   }
   .om-component-ui-grid-col-md-push-11 {
-    left: 91.6666666667%;
+    inset-inline-start: 91.6666666667%;
   }
   .om-component-ui-grid-col-md-pull-11 {
-    right: 91.6666666667%;
+    inset-inline-end: 91.6666666667%;
   }
   .om-component-ui-grid-col-md-12 {
+    display: block;
     flex: 0 0 100%;
     max-width: 100%;
   }
   .om-component-ui-grid-col-md-offset-12 {
-    margin-left: 100%;
+    margin-inline-start: 100%;
   }
   .om-component-ui-grid-col-md-order-12 {
     order: 12;
   }
   .om-component-ui-grid-col-md-push-12 {
-    left: 100%;
+    inset-inline-start: 100%;
   }
   .om-component-ui-grid-col-md-pull-12 {
-    right: 100%;
+    inset-inline-end: 100%;
+  }
+  .om-component-ui-grid-col-md-flex {
+    display: block;
   }
 }
 @media (max-width: 767.98px) {
   .om-component-ui-grid-col {
-    flex: var(--om-grid-col-flex-sm, var(--om-grid-col-flex, 0 0 auto));
-    padding-right: calc(var(--om-grid-gutter-x-sm, var(--om-grid-gutter-x, 0px)) / 2);
-    padding-left: calc(var(--om-grid-gutter-x-sm, var(--om-grid-gutter-x, 0px)) / 2);
+    flex: var(--om-grid-col-flex-sm, var(--om-grid-col-flex-md, var(--om-grid-col-flex-lg, var(--om-grid-col-flex, 0 0 auto))));
+    padding-inline: calc(var(--om-grid-gutter-x-sm, var(--om-grid-gutter-x-md, var(--om-grid-gutter-x-lg, var(--om-grid-gutter-x, 0px)))) / 2);
   }
   .om-component-ui-grid-row {
-    margin-right: calc(var(--om-grid-gutter-x-sm, var(--om-grid-gutter-x, 0px)) / -2);
-    margin-left: calc(var(--om-grid-gutter-x-sm, var(--om-grid-gutter-x, 0px)) / -2);
-    row-gap: var(--om-grid-gutter-y-sm, var(--om-grid-gutter-y, 0px));
+    margin-inline: calc(var(--om-grid-gutter-x-sm, var(--om-grid-gutter-x-md, var(--om-grid-gutter-x-lg, var(--om-grid-gutter-x, 0px)))) / -2);
+    row-gap: var(--om-grid-gutter-y-sm, var(--om-grid-gutter-y-md, var(--om-grid-gutter-y-lg, var(--om-grid-gutter-y, 0px))));
+  }
+  .om-component-ui-grid-col-sm-0 {
+    display: none;
   }
   .om-component-ui-grid-col-sm-1 {
+    display: block;
     flex: 0 0 8.3333333333%;
     max-width: 8.3333333333%;
   }
   .om-component-ui-grid-col-sm-offset-1 {
-    margin-left: 8.3333333333%;
+    margin-inline-start: 8.3333333333%;
   }
   .om-component-ui-grid-col-sm-order-1 {
     order: 1;
   }
   .om-component-ui-grid-col-sm-push-1 {
-    left: 8.3333333333%;
+    inset-inline-start: 8.3333333333%;
   }
   .om-component-ui-grid-col-sm-pull-1 {
-    right: 8.3333333333%;
+    inset-inline-end: 8.3333333333%;
   }
   .om-component-ui-grid-col-sm-2 {
+    display: block;
     flex: 0 0 16.6666666667%;
     max-width: 16.6666666667%;
   }
   .om-component-ui-grid-col-sm-offset-2 {
-    margin-left: 16.6666666667%;
+    margin-inline-start: 16.6666666667%;
   }
   .om-component-ui-grid-col-sm-order-2 {
     order: 2;
   }
   .om-component-ui-grid-col-sm-push-2 {
-    left: 16.6666666667%;
+    inset-inline-start: 16.6666666667%;
   }
   .om-component-ui-grid-col-sm-pull-2 {
-    right: 16.6666666667%;
+    inset-inline-end: 16.6666666667%;
   }
   .om-component-ui-grid-col-sm-3 {
+    display: block;
     flex: 0 0 25%;
     max-width: 25%;
   }
   .om-component-ui-grid-col-sm-offset-3 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .om-component-ui-grid-col-sm-order-3 {
     order: 3;
   }
   .om-component-ui-grid-col-sm-push-3 {
-    left: 25%;
+    inset-inline-start: 25%;
   }
   .om-component-ui-grid-col-sm-pull-3 {
-    right: 25%;
+    inset-inline-end: 25%;
   }
   .om-component-ui-grid-col-sm-4 {
+    display: block;
     flex: 0 0 33.3333333333%;
     max-width: 33.3333333333%;
   }
   .om-component-ui-grid-col-sm-offset-4 {
-    margin-left: 33.3333333333%;
+    margin-inline-start: 33.3333333333%;
   }
   .om-component-ui-grid-col-sm-order-4 {
     order: 4;
   }
   .om-component-ui-grid-col-sm-push-4 {
-    left: 33.3333333333%;
+    inset-inline-start: 33.3333333333%;
   }
   .om-component-ui-grid-col-sm-pull-4 {
-    right: 33.3333333333%;
+    inset-inline-end: 33.3333333333%;
   }
   .om-component-ui-grid-col-sm-5 {
+    display: block;
     flex: 0 0 41.6666666667%;
     max-width: 41.6666666667%;
   }
   .om-component-ui-grid-col-sm-offset-5 {
-    margin-left: 41.6666666667%;
+    margin-inline-start: 41.6666666667%;
   }
   .om-component-ui-grid-col-sm-order-5 {
     order: 5;
   }
   .om-component-ui-grid-col-sm-push-5 {
-    left: 41.6666666667%;
+    inset-inline-start: 41.6666666667%;
   }
   .om-component-ui-grid-col-sm-pull-5 {
-    right: 41.6666666667%;
+    inset-inline-end: 41.6666666667%;
   }
   .om-component-ui-grid-col-sm-6 {
+    display: block;
     flex: 0 0 50%;
     max-width: 50%;
   }
   .om-component-ui-grid-col-sm-offset-6 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .om-component-ui-grid-col-sm-order-6 {
     order: 6;
   }
   .om-component-ui-grid-col-sm-push-6 {
-    left: 50%;
+    inset-inline-start: 50%;
   }
   .om-component-ui-grid-col-sm-pull-6 {
-    right: 50%;
+    inset-inline-end: 50%;
   }
   .om-component-ui-grid-col-sm-7 {
+    display: block;
     flex: 0 0 58.3333333333%;
     max-width: 58.3333333333%;
   }
   .om-component-ui-grid-col-sm-offset-7 {
-    margin-left: 58.3333333333%;
+    margin-inline-start: 58.3333333333%;
   }
   .om-component-ui-grid-col-sm-order-7 {
     order: 7;
   }
   .om-component-ui-grid-col-sm-push-7 {
-    left: 58.3333333333%;
+    inset-inline-start: 58.3333333333%;
   }
   .om-component-ui-grid-col-sm-pull-7 {
-    right: 58.3333333333%;
+    inset-inline-end: 58.3333333333%;
   }
   .om-component-ui-grid-col-sm-8 {
+    display: block;
     flex: 0 0 66.6666666667%;
     max-width: 66.6666666667%;
   }
   .om-component-ui-grid-col-sm-offset-8 {
-    margin-left: 66.6666666667%;
+    margin-inline-start: 66.6666666667%;
   }
   .om-component-ui-grid-col-sm-order-8 {
     order: 8;
   }
   .om-component-ui-grid-col-sm-push-8 {
-    left: 66.6666666667%;
+    inset-inline-start: 66.6666666667%;
   }
   .om-component-ui-grid-col-sm-pull-8 {
-    right: 66.6666666667%;
+    inset-inline-end: 66.6666666667%;
   }
   .om-component-ui-grid-col-sm-9 {
+    display: block;
     flex: 0 0 75%;
     max-width: 75%;
   }
   .om-component-ui-grid-col-sm-offset-9 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .om-component-ui-grid-col-sm-order-9 {
     order: 9;
   }
   .om-component-ui-grid-col-sm-push-9 {
-    left: 75%;
+    inset-inline-start: 75%;
   }
   .om-component-ui-grid-col-sm-pull-9 {
-    right: 75%;
+    inset-inline-end: 75%;
   }
   .om-component-ui-grid-col-sm-10 {
+    display: block;
     flex: 0 0 83.3333333333%;
     max-width: 83.3333333333%;
   }
   .om-component-ui-grid-col-sm-offset-10 {
-    margin-left: 83.3333333333%;
+    margin-inline-start: 83.3333333333%;
   }
   .om-component-ui-grid-col-sm-order-10 {
     order: 10;
   }
   .om-component-ui-grid-col-sm-push-10 {
-    left: 83.3333333333%;
+    inset-inline-start: 83.3333333333%;
   }
   .om-component-ui-grid-col-sm-pull-10 {
-    right: 83.3333333333%;
+    inset-inline-end: 83.3333333333%;
   }
   .om-component-ui-grid-col-sm-11 {
+    display: block;
     flex: 0 0 91.6666666667%;
     max-width: 91.6666666667%;
   }
   .om-component-ui-grid-col-sm-offset-11 {
-    margin-left: 91.6666666667%;
+    margin-inline-start: 91.6666666667%;
   }
   .om-component-ui-grid-col-sm-order-11 {
     order: 11;
   }
   .om-component-ui-grid-col-sm-push-11 {
-    left: 91.6666666667%;
+    inset-inline-start: 91.6666666667%;
   }
   .om-component-ui-grid-col-sm-pull-11 {
-    right: 91.6666666667%;
+    inset-inline-end: 91.6666666667%;
   }
   .om-component-ui-grid-col-sm-12 {
+    display: block;
     flex: 0 0 100%;
     max-width: 100%;
   }
   .om-component-ui-grid-col-sm-offset-12 {
-    margin-left: 100%;
+    margin-inline-start: 100%;
   }
   .om-component-ui-grid-col-sm-order-12 {
     order: 12;
   }
   .om-component-ui-grid-col-sm-push-12 {
-    left: 100%;
+    inset-inline-start: 100%;
   }
   .om-component-ui-grid-col-sm-pull-12 {
-    right: 100%;
+    inset-inline-end: 100%;
+  }
+  .om-component-ui-grid-col-sm-flex {
+    display: block;
   }
 }