@1money/component-ui 0.0.48 → 0.0.50

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

@@ -1 +1,952 @@
-.om-component-ui-grid-row{display:flex;flex-wrap:wrap;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);row-gap:var(--om-grid-gutter-y,0)}.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{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))}}@media (max-width:767.98px){.om-component-ui-grid-row{justify-content:var(--om-grid-justify-sm,var(--om-grid-justify,flex-start))}}.om-component-ui-grid-col{position:relative;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)}.om-component-ui-grid-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.om-component-ui-grid-col-offset-1{margin-left:8.3333333333%}.om-component-ui-grid-col-order-1{order:1}.om-component-ui-grid-col-push-1{left:8.3333333333%}.om-component-ui-grid-col-pull-1{right:8.3333333333%}.om-component-ui-grid-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.om-component-ui-grid-col-offset-2{margin-left:16.6666666667%}.om-component-ui-grid-col-order-2{order:2}.om-component-ui-grid-col-push-2{left:16.6666666667%}.om-component-ui-grid-col-pull-2{right:16.6666666667%}.om-component-ui-grid-col-3{flex:0 0 25%;max-width:25%}.om-component-ui-grid-col-offset-3{margin-left:25%}.om-component-ui-grid-col-order-3{order:3}.om-component-ui-grid-col-push-3{left:25%}.om-component-ui-grid-col-pull-3{right:25%}.om-component-ui-grid-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.om-component-ui-grid-col-offset-4{margin-left:33.3333333333%}.om-component-ui-grid-col-order-4{order:4}.om-component-ui-grid-col-push-4{left:33.3333333333%}.om-component-ui-grid-col-pull-4{right:33.3333333333%}.om-component-ui-grid-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.om-component-ui-grid-col-offset-5{margin-left:41.6666666667%}.om-component-ui-grid-col-order-5{order:5}.om-component-ui-grid-col-push-5{left:41.6666666667%}.om-component-ui-grid-col-pull-5{right:41.6666666667%}.om-component-ui-grid-col-6{flex:0 0 50%;max-width:50%}.om-component-ui-grid-col-offset-6{margin-left:50%}.om-component-ui-grid-col-order-6{order:6}.om-component-ui-grid-col-push-6{left:50%}.om-component-ui-grid-col-pull-6{right:50%}.om-component-ui-grid-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.om-component-ui-grid-col-offset-7{margin-left:58.3333333333%}.om-component-ui-grid-col-order-7{order:7}.om-component-ui-grid-col-push-7{left:58.3333333333%}.om-component-ui-grid-col-pull-7{right:58.3333333333%}.om-component-ui-grid-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.om-component-ui-grid-col-offset-8{margin-left:66.6666666667%}.om-component-ui-grid-col-order-8{order:8}.om-component-ui-grid-col-push-8{left:66.6666666667%}.om-component-ui-grid-col-pull-8{right:66.6666666667%}.om-component-ui-grid-col-9{flex:0 0 75%;max-width:75%}.om-component-ui-grid-col-offset-9{margin-left:75%}.om-component-ui-grid-col-order-9{order:9}.om-component-ui-grid-col-push-9{left:75%}.om-component-ui-grid-col-pull-9{right:75%}.om-component-ui-grid-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.om-component-ui-grid-col-offset-10{margin-left:83.3333333333%}.om-component-ui-grid-col-order-10{order:10}.om-component-ui-grid-col-push-10{left:83.3333333333%}.om-component-ui-grid-col-pull-10{right:83.3333333333%}.om-component-ui-grid-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.om-component-ui-grid-col-offset-11{margin-left:91.6666666667%}.om-component-ui-grid-col-order-11{order:11}.om-component-ui-grid-col-push-11{left:91.6666666667%}.om-component-ui-grid-col-pull-11{right:91.6666666667%}.om-component-ui-grid-col-12{flex:0 0 100%;max-width:100%}.om-component-ui-grid-col-offset-12{margin-left:100%}.om-component-ui-grid-col-order-12{order:12}.om-component-ui-grid-col-push-12{left:100%}.om-component-ui-grid-col-pull-12{right: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)}.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);row-gap:var(--om-grid-gutter-y-lg,var(--om-grid-gutter-y,0))}.om-component-ui-grid-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.om-component-ui-grid-col-lg-offset-1{margin-left:8.3333333333%}.om-component-ui-grid-col-lg-order-1{order:1}.om-component-ui-grid-col-lg-push-1{left:8.3333333333%}.om-component-ui-grid-col-lg-pull-1{right:8.3333333333%}.om-component-ui-grid-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.om-component-ui-grid-col-lg-offset-2{margin-left:16.6666666667%}.om-component-ui-grid-col-lg-order-2{order:2}.om-component-ui-grid-col-lg-push-2{left:16.6666666667%}.om-component-ui-grid-col-lg-pull-2{right:16.6666666667%}.om-component-ui-grid-col-lg-3{flex:0 0 25%;max-width:25%}.om-component-ui-grid-col-lg-offset-3{margin-left:25%}.om-component-ui-grid-col-lg-order-3{order:3}.om-component-ui-grid-col-lg-push-3{left:25%}.om-component-ui-grid-col-lg-pull-3{right:25%}.om-component-ui-grid-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.om-component-ui-grid-col-lg-offset-4{margin-left:33.3333333333%}.om-component-ui-grid-col-lg-order-4{order:4}.om-component-ui-grid-col-lg-push-4{left:33.3333333333%}.om-component-ui-grid-col-lg-pull-4{right:33.3333333333%}.om-component-ui-grid-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.om-component-ui-grid-col-lg-offset-5{margin-left:41.6666666667%}.om-component-ui-grid-col-lg-order-5{order:5}.om-component-ui-grid-col-lg-push-5{left:41.6666666667%}.om-component-ui-grid-col-lg-pull-5{right:41.6666666667%}.om-component-ui-grid-col-lg-6{flex:0 0 50%;max-width:50%}.om-component-ui-grid-col-lg-offset-6{margin-left:50%}.om-component-ui-grid-col-lg-order-6{order:6}.om-component-ui-grid-col-lg-push-6{left:50%}.om-component-ui-grid-col-lg-pull-6{right:50%}.om-component-ui-grid-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.om-component-ui-grid-col-lg-offset-7{margin-left:58.3333333333%}.om-component-ui-grid-col-lg-order-7{order:7}.om-component-ui-grid-col-lg-push-7{left:58.3333333333%}.om-component-ui-grid-col-lg-pull-7{right:58.3333333333%}.om-component-ui-grid-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.om-component-ui-grid-col-lg-offset-8{margin-left:66.6666666667%}.om-component-ui-grid-col-lg-order-8{order:8}.om-component-ui-grid-col-lg-push-8{left:66.6666666667%}.om-component-ui-grid-col-lg-pull-8{right:66.6666666667%}.om-component-ui-grid-col-lg-9{flex:0 0 75%;max-width:75%}.om-component-ui-grid-col-lg-offset-9{margin-left:75%}.om-component-ui-grid-col-lg-order-9{order:9}.om-component-ui-grid-col-lg-push-9{left:75%}.om-component-ui-grid-col-lg-pull-9{right:75%}.om-component-ui-grid-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.om-component-ui-grid-col-lg-offset-10{margin-left:83.3333333333%}.om-component-ui-grid-col-lg-order-10{order:10}.om-component-ui-grid-col-lg-push-10{left:83.3333333333%}.om-component-ui-grid-col-lg-pull-10{right:83.3333333333%}.om-component-ui-grid-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.om-component-ui-grid-col-lg-offset-11{margin-left:91.6666666667%}.om-component-ui-grid-col-lg-order-11{order:11}.om-component-ui-grid-col-lg-push-11{left:91.6666666667%}.om-component-ui-grid-col-lg-pull-11{right:91.6666666667%}.om-component-ui-grid-col-lg-12{flex:0 0 100%;max-width:100%}.om-component-ui-grid-col-lg-offset-12{margin-left:100%}.om-component-ui-grid-col-lg-order-12{order:12}.om-component-ui-grid-col-lg-push-12{left:100%}.om-component-ui-grid-col-lg-pull-12{right:100%}}@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)}.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,0))}.om-component-ui-grid-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.om-component-ui-grid-col-md-offset-1{margin-left:8.3333333333%}.om-component-ui-grid-col-md-order-1{order:1}.om-component-ui-grid-col-md-push-1{left:8.3333333333%}.om-component-ui-grid-col-md-pull-1{right:8.3333333333%}.om-component-ui-grid-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.om-component-ui-grid-col-md-offset-2{margin-left:16.6666666667%}.om-component-ui-grid-col-md-order-2{order:2}.om-component-ui-grid-col-md-push-2{left:16.6666666667%}.om-component-ui-grid-col-md-pull-2{right:16.6666666667%}.om-component-ui-grid-col-md-3{flex:0 0 25%;max-width:25%}.om-component-ui-grid-col-md-offset-3{margin-left:25%}.om-component-ui-grid-col-md-order-3{order:3}.om-component-ui-grid-col-md-push-3{left:25%}.om-component-ui-grid-col-md-pull-3{right:25%}.om-component-ui-grid-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.om-component-ui-grid-col-md-offset-4{margin-left:33.3333333333%}.om-component-ui-grid-col-md-order-4{order:4}.om-component-ui-grid-col-md-push-4{left:33.3333333333%}.om-component-ui-grid-col-md-pull-4{right:33.3333333333%}.om-component-ui-grid-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.om-component-ui-grid-col-md-offset-5{margin-left:41.6666666667%}.om-component-ui-grid-col-md-order-5{order:5}.om-component-ui-grid-col-md-push-5{left:41.6666666667%}.om-component-ui-grid-col-md-pull-5{right:41.6666666667%}.om-component-ui-grid-col-md-6{flex:0 0 50%;max-width:50%}.om-component-ui-grid-col-md-offset-6{margin-left:50%}.om-component-ui-grid-col-md-order-6{order:6}.om-component-ui-grid-col-md-push-6{left:50%}.om-component-ui-grid-col-md-pull-6{right:50%}.om-component-ui-grid-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.om-component-ui-grid-col-md-offset-7{margin-left:58.3333333333%}.om-component-ui-grid-col-md-order-7{order:7}.om-component-ui-grid-col-md-push-7{left:58.3333333333%}.om-component-ui-grid-col-md-pull-7{right:58.3333333333%}.om-component-ui-grid-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.om-component-ui-grid-col-md-offset-8{margin-left:66.6666666667%}.om-component-ui-grid-col-md-order-8{order:8}.om-component-ui-grid-col-md-push-8{left:66.6666666667%}.om-component-ui-grid-col-md-pull-8{right:66.6666666667%}.om-component-ui-grid-col-md-9{flex:0 0 75%;max-width:75%}.om-component-ui-grid-col-md-offset-9{margin-left:75%}.om-component-ui-grid-col-md-order-9{order:9}.om-component-ui-grid-col-md-push-9{left:75%}.om-component-ui-grid-col-md-pull-9{right:75%}.om-component-ui-grid-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.om-component-ui-grid-col-md-offset-10{margin-left:83.3333333333%}.om-component-ui-grid-col-md-order-10{order:10}.om-component-ui-grid-col-md-push-10{left:83.3333333333%}.om-component-ui-grid-col-md-pull-10{right:83.3333333333%}.om-component-ui-grid-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.om-component-ui-grid-col-md-offset-11{margin-left:91.6666666667%}.om-component-ui-grid-col-md-order-11{order:11}.om-component-ui-grid-col-md-push-11{left:91.6666666667%}.om-component-ui-grid-col-md-pull-11{right:91.6666666667%}.om-component-ui-grid-col-md-12{flex:0 0 100%;max-width:100%}.om-component-ui-grid-col-md-offset-12{margin-left:100%}.om-component-ui-grid-col-md-order-12{order:12}.om-component-ui-grid-col-md-push-12{left:100%}.om-component-ui-grid-col-md-pull-12{right:100%}}@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)}.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,0))}.om-component-ui-grid-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.om-component-ui-grid-col-sm-offset-1{margin-left:8.3333333333%}.om-component-ui-grid-col-sm-order-1{order:1}.om-component-ui-grid-col-sm-push-1{left:8.3333333333%}.om-component-ui-grid-col-sm-pull-1{right:8.3333333333%}.om-component-ui-grid-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.om-component-ui-grid-col-sm-offset-2{margin-left:16.6666666667%}.om-component-ui-grid-col-sm-order-2{order:2}.om-component-ui-grid-col-sm-push-2{left:16.6666666667%}.om-component-ui-grid-col-sm-pull-2{right:16.6666666667%}.om-component-ui-grid-col-sm-3{flex:0 0 25%;max-width:25%}.om-component-ui-grid-col-sm-offset-3{margin-left:25%}.om-component-ui-grid-col-sm-order-3{order:3}.om-component-ui-grid-col-sm-push-3{left:25%}.om-component-ui-grid-col-sm-pull-3{right:25%}.om-component-ui-grid-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.om-component-ui-grid-col-sm-offset-4{margin-left:33.3333333333%}.om-component-ui-grid-col-sm-order-4{order:4}.om-component-ui-grid-col-sm-push-4{left:33.3333333333%}.om-component-ui-grid-col-sm-pull-4{right:33.3333333333%}.om-component-ui-grid-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.om-component-ui-grid-col-sm-offset-5{margin-left:41.6666666667%}.om-component-ui-grid-col-sm-order-5{order:5}.om-component-ui-grid-col-sm-push-5{left:41.6666666667%}.om-component-ui-grid-col-sm-pull-5{right:41.6666666667%}.om-component-ui-grid-col-sm-6{flex:0 0 50%;max-width:50%}.om-component-ui-grid-col-sm-offset-6{margin-left:50%}.om-component-ui-grid-col-sm-order-6{order:6}.om-component-ui-grid-col-sm-push-6{left:50%}.om-component-ui-grid-col-sm-pull-6{right:50%}.om-component-ui-grid-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.om-component-ui-grid-col-sm-offset-7{margin-left:58.3333333333%}.om-component-ui-grid-col-sm-order-7{order:7}.om-component-ui-grid-col-sm-push-7{left:58.3333333333%}.om-component-ui-grid-col-sm-pull-7{right:58.3333333333%}.om-component-ui-grid-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.om-component-ui-grid-col-sm-offset-8{margin-left:66.6666666667%}.om-component-ui-grid-col-sm-order-8{order:8}.om-component-ui-grid-col-sm-push-8{left:66.6666666667%}.om-component-ui-grid-col-sm-pull-8{right:66.6666666667%}.om-component-ui-grid-col-sm-9{flex:0 0 75%;max-width:75%}.om-component-ui-grid-col-sm-offset-9{margin-left:75%}.om-component-ui-grid-col-sm-order-9{order:9}.om-component-ui-grid-col-sm-push-9{left:75%}.om-component-ui-grid-col-sm-pull-9{right:75%}.om-component-ui-grid-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.om-component-ui-grid-col-sm-offset-10{margin-left:83.3333333333%}.om-component-ui-grid-col-sm-order-10{order:10}.om-component-ui-grid-col-sm-push-10{left:83.3333333333%}.om-component-ui-grid-col-sm-pull-10{right:83.3333333333%}.om-component-ui-grid-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.om-component-ui-grid-col-sm-offset-11{margin-left:91.6666666667%}.om-component-ui-grid-col-sm-order-11{order:11}.om-component-ui-grid-col-sm-push-11{left:91.6666666667%}.om-component-ui-grid-col-sm-pull-11{right:91.6666666667%}.om-component-ui-grid-col-sm-12{flex:0 0 100%;max-width:100%}.om-component-ui-grid-col-sm-offset-12{margin-left:100%}.om-component-ui-grid-col-sm-order-12{order:12}.om-component-ui-grid-col-sm-push-12{left:100%}.om-component-ui-grid-col-sm-pull-12{right:100%}}
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-grid-row {
+  display: flex;
+  flex-wrap: wrap;
+  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);
+  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 {
+    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));
+  }
+}
+@media (max-width: 767.98px) {
+  .om-component-ui-grid-row {
+    justify-content: var(--om-grid-justify-sm, var(--om-grid-justify, flex-start));
+  }
+}
+.om-component-ui-grid-col {
+  position: relative;
+  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);
+}
+
+.om-component-ui-grid-col-1 {
+  flex: 0 0 8.3333333333%;
+  max-width: 8.3333333333%;
+}
+
+.om-component-ui-grid-col-offset-1 {
+  margin-left: 8.3333333333%;
+}
+
+.om-component-ui-grid-col-order-1 {
+  order: 1;
+}
+
+.om-component-ui-grid-col-push-1 {
+  left: 8.3333333333%;
+}
+
+.om-component-ui-grid-col-pull-1 {
+  right: 8.3333333333%;
+}
+
+.om-component-ui-grid-col-2 {
+  flex: 0 0 16.6666666667%;
+  max-width: 16.6666666667%;
+}
+
+.om-component-ui-grid-col-offset-2 {
+  margin-left: 16.6666666667%;
+}
+
+.om-component-ui-grid-col-order-2 {
+  order: 2;
+}
+
+.om-component-ui-grid-col-push-2 {
+  left: 16.6666666667%;
+}
+
+.om-component-ui-grid-col-pull-2 {
+  right: 16.6666666667%;
+}
+
+.om-component-ui-grid-col-3 {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+
+.om-component-ui-grid-col-offset-3 {
+  margin-left: 25%;
+}
+
+.om-component-ui-grid-col-order-3 {
+  order: 3;
+}
+
+.om-component-ui-grid-col-push-3 {
+  left: 25%;
+}
+
+.om-component-ui-grid-col-pull-3 {
+  right: 25%;
+}
+
+.om-component-ui-grid-col-4 {
+  flex: 0 0 33.3333333333%;
+  max-width: 33.3333333333%;
+}
+
+.om-component-ui-grid-col-offset-4 {
+  margin-left: 33.3333333333%;
+}
+
+.om-component-ui-grid-col-order-4 {
+  order: 4;
+}
+
+.om-component-ui-grid-col-push-4 {
+  left: 33.3333333333%;
+}
+
+.om-component-ui-grid-col-pull-4 {
+  right: 33.3333333333%;
+}
+
+.om-component-ui-grid-col-5 {
+  flex: 0 0 41.6666666667%;
+  max-width: 41.6666666667%;
+}
+
+.om-component-ui-grid-col-offset-5 {
+  margin-left: 41.6666666667%;
+}
+
+.om-component-ui-grid-col-order-5 {
+  order: 5;
+}
+
+.om-component-ui-grid-col-push-5 {
+  left: 41.6666666667%;
+}
+
+.om-component-ui-grid-col-pull-5 {
+  right: 41.6666666667%;
+}
+
+.om-component-ui-grid-col-6 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+.om-component-ui-grid-col-offset-6 {
+  margin-left: 50%;
+}
+
+.om-component-ui-grid-col-order-6 {
+  order: 6;
+}
+
+.om-component-ui-grid-col-push-6 {
+  left: 50%;
+}
+
+.om-component-ui-grid-col-pull-6 {
+  right: 50%;
+}
+
+.om-component-ui-grid-col-7 {
+  flex: 0 0 58.3333333333%;
+  max-width: 58.3333333333%;
+}
+
+.om-component-ui-grid-col-offset-7 {
+  margin-left: 58.3333333333%;
+}
+
+.om-component-ui-grid-col-order-7 {
+  order: 7;
+}
+
+.om-component-ui-grid-col-push-7 {
+  left: 58.3333333333%;
+}
+
+.om-component-ui-grid-col-pull-7 {
+  right: 58.3333333333%;
+}
+
+.om-component-ui-grid-col-8 {
+  flex: 0 0 66.6666666667%;
+  max-width: 66.6666666667%;
+}
+
+.om-component-ui-grid-col-offset-8 {
+  margin-left: 66.6666666667%;
+}
+
+.om-component-ui-grid-col-order-8 {
+  order: 8;
+}
+
+.om-component-ui-grid-col-push-8 {
+  left: 66.6666666667%;
+}
+
+.om-component-ui-grid-col-pull-8 {
+  right: 66.6666666667%;
+}
+
+.om-component-ui-grid-col-9 {
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+
+.om-component-ui-grid-col-offset-9 {
+  margin-left: 75%;
+}
+
+.om-component-ui-grid-col-order-9 {
+  order: 9;
+}
+
+.om-component-ui-grid-col-push-9 {
+  left: 75%;
+}
+
+.om-component-ui-grid-col-pull-9 {
+  right: 75%;
+}
+
+.om-component-ui-grid-col-10 {
+  flex: 0 0 83.3333333333%;
+  max-width: 83.3333333333%;
+}
+
+.om-component-ui-grid-col-offset-10 {
+  margin-left: 83.3333333333%;
+}
+
+.om-component-ui-grid-col-order-10 {
+  order: 10;
+}
+
+.om-component-ui-grid-col-push-10 {
+  left: 83.3333333333%;
+}
+
+.om-component-ui-grid-col-pull-10 {
+  right: 83.3333333333%;
+}
+
+.om-component-ui-grid-col-11 {
+  flex: 0 0 91.6666666667%;
+  max-width: 91.6666666667%;
+}
+
+.om-component-ui-grid-col-offset-11 {
+  margin-left: 91.6666666667%;
+}
+
+.om-component-ui-grid-col-order-11 {
+  order: 11;
+}
+
+.om-component-ui-grid-col-push-11 {
+  left: 91.6666666667%;
+}
+
+.om-component-ui-grid-col-pull-11 {
+  right: 91.6666666667%;
+}
+
+.om-component-ui-grid-col-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+.om-component-ui-grid-col-offset-12 {
+  margin-left: 100%;
+}
+
+.om-component-ui-grid-col-order-12 {
+  order: 12;
+}
+
+.om-component-ui-grid-col-push-12 {
+  left: 100%;
+}
+
+.om-component-ui-grid-col-pull-12 {
+  right: 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);
+  }
+  .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);
+    row-gap: var(--om-grid-gutter-y-lg, var(--om-grid-gutter-y, 0px));
+  }
+  .om-component-ui-grid-col-lg-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-offset-1 {
+    margin-left: 8.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-order-1 {
+    order: 1;
+  }
+  .om-component-ui-grid-col-lg-push-1 {
+    left: 8.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-pull-1 {
+    right: 8.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-offset-2 {
+    margin-left: 16.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-order-2 {
+    order: 2;
+  }
+  .om-component-ui-grid-col-lg-push-2 {
+    left: 16.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-pull-2 {
+    right: 16.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .om-component-ui-grid-col-lg-offset-3 {
+    margin-left: 25%;
+  }
+  .om-component-ui-grid-col-lg-order-3 {
+    order: 3;
+  }
+  .om-component-ui-grid-col-lg-push-3 {
+    left: 25%;
+  }
+  .om-component-ui-grid-col-lg-pull-3 {
+    right: 25%;
+  }
+  .om-component-ui-grid-col-lg-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-offset-4 {
+    margin-left: 33.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-order-4 {
+    order: 4;
+  }
+  .om-component-ui-grid-col-lg-push-4 {
+    left: 33.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-pull-4 {
+    right: 33.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-offset-5 {
+    margin-left: 41.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-order-5 {
+    order: 5;
+  }
+  .om-component-ui-grid-col-lg-push-5 {
+    left: 41.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-pull-5 {
+    right: 41.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .om-component-ui-grid-col-lg-offset-6 {
+    margin-left: 50%;
+  }
+  .om-component-ui-grid-col-lg-order-6 {
+    order: 6;
+  }
+  .om-component-ui-grid-col-lg-push-6 {
+    left: 50%;
+  }
+  .om-component-ui-grid-col-lg-pull-6 {
+    right: 50%;
+  }
+  .om-component-ui-grid-col-lg-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-offset-7 {
+    margin-left: 58.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-order-7 {
+    order: 7;
+  }
+  .om-component-ui-grid-col-lg-push-7 {
+    left: 58.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-pull-7 {
+    right: 58.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-offset-8 {
+    margin-left: 66.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-order-8 {
+    order: 8;
+  }
+  .om-component-ui-grid-col-lg-push-8 {
+    left: 66.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-pull-8 {
+    right: 66.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .om-component-ui-grid-col-lg-offset-9 {
+    margin-left: 75%;
+  }
+  .om-component-ui-grid-col-lg-order-9 {
+    order: 9;
+  }
+  .om-component-ui-grid-col-lg-push-9 {
+    left: 75%;
+  }
+  .om-component-ui-grid-col-lg-pull-9 {
+    right: 75%;
+  }
+  .om-component-ui-grid-col-lg-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-offset-10 {
+    margin-left: 83.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-order-10 {
+    order: 10;
+  }
+  .om-component-ui-grid-col-lg-push-10 {
+    left: 83.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-pull-10 {
+    right: 83.3333333333%;
+  }
+  .om-component-ui-grid-col-lg-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-offset-11 {
+    margin-left: 91.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-order-11 {
+    order: 11;
+  }
+  .om-component-ui-grid-col-lg-push-11 {
+    left: 91.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-pull-11 {
+    right: 91.6666666667%;
+  }
+  .om-component-ui-grid-col-lg-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .om-component-ui-grid-col-lg-offset-12 {
+    margin-left: 100%;
+  }
+  .om-component-ui-grid-col-lg-order-12 {
+    order: 12;
+  }
+  .om-component-ui-grid-col-lg-push-12 {
+    left: 100%;
+  }
+  .om-component-ui-grid-col-lg-pull-12 {
+    right: 100%;
+  }
+}
+@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);
+  }
+  .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));
+  }
+  .om-component-ui-grid-col-md-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  .om-component-ui-grid-col-md-offset-1 {
+    margin-left: 8.3333333333%;
+  }
+  .om-component-ui-grid-col-md-order-1 {
+    order: 1;
+  }
+  .om-component-ui-grid-col-md-push-1 {
+    left: 8.3333333333%;
+  }
+  .om-component-ui-grid-col-md-pull-1 {
+    right: 8.3333333333%;
+  }
+  .om-component-ui-grid-col-md-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  .om-component-ui-grid-col-md-offset-2 {
+    margin-left: 16.6666666667%;
+  }
+  .om-component-ui-grid-col-md-order-2 {
+    order: 2;
+  }
+  .om-component-ui-grid-col-md-push-2 {
+    left: 16.6666666667%;
+  }
+  .om-component-ui-grid-col-md-pull-2 {
+    right: 16.6666666667%;
+  }
+  .om-component-ui-grid-col-md-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .om-component-ui-grid-col-md-offset-3 {
+    margin-left: 25%;
+  }
+  .om-component-ui-grid-col-md-order-3 {
+    order: 3;
+  }
+  .om-component-ui-grid-col-md-push-3 {
+    left: 25%;
+  }
+  .om-component-ui-grid-col-md-pull-3 {
+    right: 25%;
+  }
+  .om-component-ui-grid-col-md-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  .om-component-ui-grid-col-md-offset-4 {
+    margin-left: 33.3333333333%;
+  }
+  .om-component-ui-grid-col-md-order-4 {
+    order: 4;
+  }
+  .om-component-ui-grid-col-md-push-4 {
+    left: 33.3333333333%;
+  }
+  .om-component-ui-grid-col-md-pull-4 {
+    right: 33.3333333333%;
+  }
+  .om-component-ui-grid-col-md-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  .om-component-ui-grid-col-md-offset-5 {
+    margin-left: 41.6666666667%;
+  }
+  .om-component-ui-grid-col-md-order-5 {
+    order: 5;
+  }
+  .om-component-ui-grid-col-md-push-5 {
+    left: 41.6666666667%;
+  }
+  .om-component-ui-grid-col-md-pull-5 {
+    right: 41.6666666667%;
+  }
+  .om-component-ui-grid-col-md-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .om-component-ui-grid-col-md-offset-6 {
+    margin-left: 50%;
+  }
+  .om-component-ui-grid-col-md-order-6 {
+    order: 6;
+  }
+  .om-component-ui-grid-col-md-push-6 {
+    left: 50%;
+  }
+  .om-component-ui-grid-col-md-pull-6 {
+    right: 50%;
+  }
+  .om-component-ui-grid-col-md-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  .om-component-ui-grid-col-md-offset-7 {
+    margin-left: 58.3333333333%;
+  }
+  .om-component-ui-grid-col-md-order-7 {
+    order: 7;
+  }
+  .om-component-ui-grid-col-md-push-7 {
+    left: 58.3333333333%;
+  }
+  .om-component-ui-grid-col-md-pull-7 {
+    right: 58.3333333333%;
+  }
+  .om-component-ui-grid-col-md-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  .om-component-ui-grid-col-md-offset-8 {
+    margin-left: 66.6666666667%;
+  }
+  .om-component-ui-grid-col-md-order-8 {
+    order: 8;
+  }
+  .om-component-ui-grid-col-md-push-8 {
+    left: 66.6666666667%;
+  }
+  .om-component-ui-grid-col-md-pull-8 {
+    right: 66.6666666667%;
+  }
+  .om-component-ui-grid-col-md-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .om-component-ui-grid-col-md-offset-9 {
+    margin-left: 75%;
+  }
+  .om-component-ui-grid-col-md-order-9 {
+    order: 9;
+  }
+  .om-component-ui-grid-col-md-push-9 {
+    left: 75%;
+  }
+  .om-component-ui-grid-col-md-pull-9 {
+    right: 75%;
+  }
+  .om-component-ui-grid-col-md-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  .om-component-ui-grid-col-md-offset-10 {
+    margin-left: 83.3333333333%;
+  }
+  .om-component-ui-grid-col-md-order-10 {
+    order: 10;
+  }
+  .om-component-ui-grid-col-md-push-10 {
+    left: 83.3333333333%;
+  }
+  .om-component-ui-grid-col-md-pull-10 {
+    right: 83.3333333333%;
+  }
+  .om-component-ui-grid-col-md-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  .om-component-ui-grid-col-md-offset-11 {
+    margin-left: 91.6666666667%;
+  }
+  .om-component-ui-grid-col-md-order-11 {
+    order: 11;
+  }
+  .om-component-ui-grid-col-md-push-11 {
+    left: 91.6666666667%;
+  }
+  .om-component-ui-grid-col-md-pull-11 {
+    right: 91.6666666667%;
+  }
+  .om-component-ui-grid-col-md-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .om-component-ui-grid-col-md-offset-12 {
+    margin-left: 100%;
+  }
+  .om-component-ui-grid-col-md-order-12 {
+    order: 12;
+  }
+  .om-component-ui-grid-col-md-push-12 {
+    left: 100%;
+  }
+  .om-component-ui-grid-col-md-pull-12 {
+    right: 100%;
+  }
+}
+@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);
+  }
+  .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));
+  }
+  .om-component-ui-grid-col-sm-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-offset-1 {
+    margin-left: 8.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-order-1 {
+    order: 1;
+  }
+  .om-component-ui-grid-col-sm-push-1 {
+    left: 8.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-pull-1 {
+    right: 8.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-offset-2 {
+    margin-left: 16.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-order-2 {
+    order: 2;
+  }
+  .om-component-ui-grid-col-sm-push-2 {
+    left: 16.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-pull-2 {
+    right: 16.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .om-component-ui-grid-col-sm-offset-3 {
+    margin-left: 25%;
+  }
+  .om-component-ui-grid-col-sm-order-3 {
+    order: 3;
+  }
+  .om-component-ui-grid-col-sm-push-3 {
+    left: 25%;
+  }
+  .om-component-ui-grid-col-sm-pull-3 {
+    right: 25%;
+  }
+  .om-component-ui-grid-col-sm-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-offset-4 {
+    margin-left: 33.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-order-4 {
+    order: 4;
+  }
+  .om-component-ui-grid-col-sm-push-4 {
+    left: 33.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-pull-4 {
+    right: 33.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-offset-5 {
+    margin-left: 41.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-order-5 {
+    order: 5;
+  }
+  .om-component-ui-grid-col-sm-push-5 {
+    left: 41.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-pull-5 {
+    right: 41.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .om-component-ui-grid-col-sm-offset-6 {
+    margin-left: 50%;
+  }
+  .om-component-ui-grid-col-sm-order-6 {
+    order: 6;
+  }
+  .om-component-ui-grid-col-sm-push-6 {
+    left: 50%;
+  }
+  .om-component-ui-grid-col-sm-pull-6 {
+    right: 50%;
+  }
+  .om-component-ui-grid-col-sm-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-offset-7 {
+    margin-left: 58.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-order-7 {
+    order: 7;
+  }
+  .om-component-ui-grid-col-sm-push-7 {
+    left: 58.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-pull-7 {
+    right: 58.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-offset-8 {
+    margin-left: 66.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-order-8 {
+    order: 8;
+  }
+  .om-component-ui-grid-col-sm-push-8 {
+    left: 66.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-pull-8 {
+    right: 66.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .om-component-ui-grid-col-sm-offset-9 {
+    margin-left: 75%;
+  }
+  .om-component-ui-grid-col-sm-order-9 {
+    order: 9;
+  }
+  .om-component-ui-grid-col-sm-push-9 {
+    left: 75%;
+  }
+  .om-component-ui-grid-col-sm-pull-9 {
+    right: 75%;
+  }
+  .om-component-ui-grid-col-sm-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-offset-10 {
+    margin-left: 83.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-order-10 {
+    order: 10;
+  }
+  .om-component-ui-grid-col-sm-push-10 {
+    left: 83.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-pull-10 {
+    right: 83.3333333333%;
+  }
+  .om-component-ui-grid-col-sm-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-offset-11 {
+    margin-left: 91.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-order-11 {
+    order: 11;
+  }
+  .om-component-ui-grid-col-sm-push-11 {
+    left: 91.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-pull-11 {
+    right: 91.6666666667%;
+  }
+  .om-component-ui-grid-col-sm-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .om-component-ui-grid-col-sm-offset-12 {
+    margin-left: 100%;
+  }
+  .om-component-ui-grid-col-sm-order-12 {
+    order: 12;
+  }
+  .om-component-ui-grid-col-sm-push-12 {
+    left: 100%;
+  }
+  .om-component-ui-grid-col-sm-pull-12 {
+    right: 100%;
+  }
+}