@sc-360-v2/storefront-cms-library 0.5.1 → 0.5.3

package/dist/icon-library.scss

@@ -1,74 +1,74 @@
-@use "sass:map";
-@use "sass:list";
-
-$resizerId: "[data-cms-tool='cms-element-resizer']";
-$resizeActive: '[data-cms-element-resizer="true"]';
-
-[data-div-type="element"] {
-  &[data-element-type="iconLibrary"] {
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% *
-          var(
-            --_ctm-mob-ele-nw-wh-vl,
-            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
-          )
-      )
-    );
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-    // height: var(--_ctm-lt-ht, --_tst-lt-ht);
-
-    & > .wrapper {
-      width: 100%;
-      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
-    }
-    &[data-widget-border="true"] .icon__container {
-      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
-      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
-      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
-    }
-
-    &[data-widget-shadow="true"] .icon__container {
-      box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
-        var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
-        var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
-        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)));
-    }
-
-    &[data-widget-shadow="false"] .icon__container {
-      box-shadow: none;
-    }
-
-    .icon__container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
-      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-
-      .icon {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-
-        width: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
-        height: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
-
-        svg {
-          width: 100%;
-          height: 100%;
-          path {
-            stroke: var(
-              --_ctm-mob-dn-in-c1,
-              var(--_ctm-tab-dn-in-c1, var(--_ctm-dn-in-c1))
-            ) !important;
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+
+[data-div-type="element"] {
+  &[data-element-type="iconLibrary"] {
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    // height: var(--_ctm-lt-ht, --_tst-lt-ht);
+
+    & > .wrapper {
+      width: 100%;
+      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+    }
+    &[data-widget-border="true"] .icon__container {
+      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
+      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
+      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+    }
+
+    &[data-widget-shadow="true"] .icon__container {
+      box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+        var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+        var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)));
+    }
+
+    &[data-widget-shadow="false"] .icon__container {
+      box-shadow: none;
+    }
+
+    .icon__container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+
+      .icon {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        width: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
+        height: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
+
+        svg {
+          width: 100%;
+          height: 100%;
+          path {
+            stroke: var(
+              --_ctm-mob-dn-in-c1,
+              var(--_ctm-tab-dn-in-c1, var(--_ctm-dn-in-c1))
+            ) !important;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/image-for-product.scss

@@ -1,21 +1,21 @@
-.product_img {
-  // background-color: var(--_base-white);
-  border-radius: 6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  // border: 1px solid var(--_gray-200);
-  overflow: hidden;
-  img {
-    max-height: 100%;
-    object-fit: contain;
-    // padding: 4px;
-  }
-  .no_image {
-    padding: 16px;
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
+.product_img {
+  // background-color: var(--_base-white);
+  border-radius: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // border: 1px solid var(--_gray-200);
+  overflow: hidden;
+  img {
+    max-height: 100%;
+    object-fit: contain;
+    // padding: 4px;
+  }
+  .no_image {
+    padding: 16px;
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/dist/item-stock.scss

@@ -1,87 +1,87 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-[data-div-type="element"] {
-  &[data-element-type="itemStock"] {
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% *
-          var(
-            --_ctm-mob-ele-nw-wh-vl,
-            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
-          )
-      )
-    );
-    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
-    position: relative;
-
-    & > .wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-    }
-
-    .item__stock__section {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      gap: 8px;
-      .item__stock__heading {
-        position: relative;
-        .item__stock__text {
-          font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
-          font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
-          color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
-          font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);
-          font-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se-ic);
-          text-decoration: prepareMediaVariable(--_ctm-dn-im-sk-tt-ue);
-          text-align: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-an);
-          letter-spacing: prepareMediaVariable(--_ctm-dn-im-sk-tt-lr-sg);
-          line-height: prepareMediaVariable(--_ctm-dn-im-sk-tt-le-ht);
-        }
-        .stock_message_conatainer {
-          display: flex;
-          padding: 2px 8px 2px 6px;
-          align-items: center;
-          gap: 4px;
-          mix-blend-mode: multiply;
-          background-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-bd-cr);
-          border-width: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-wh);
-          border-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-cr);
-          border-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-se);
-          border-radius: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-ae)
-            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-br)
-            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-sd)
-            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-cr);
-
-          .stock_messages {
-            font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
-            font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
-            color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
-            font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);
-            font-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se-ic);
-            text-decoration: prepareMediaVariable(--_ctm-dn-im-sk-tt-ue);
-            text-align: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-an);
-            letter-spacing: prepareMediaVariable(--_ctm-dn-im-sk-tt-lr-sg);
-            line-height: prepareMediaVariable(--_ctm-dn-im-sk-tt-le-ht);
-          }
-        }
-      }
-    }
-
-    &[data-widget-shadow="false"] {
-      --_show-shadow: none;
-    }
-
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+[data-div-type="element"] {
+  &[data-element-type="itemStock"] {
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    position: relative;
+
+    & > .wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    .item__stock__section {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      gap: 8px;
+      .item__stock__heading {
+        position: relative;
+        .item__stock__text {
+          font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
+          font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
+          color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
+          font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);
+          font-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se-ic);
+          text-decoration: prepareMediaVariable(--_ctm-dn-im-sk-tt-ue);
+          text-align: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-an);
+          letter-spacing: prepareMediaVariable(--_ctm-dn-im-sk-tt-lr-sg);
+          line-height: prepareMediaVariable(--_ctm-dn-im-sk-tt-le-ht);
+        }
+        .stock_message_conatainer {
+          display: flex;
+          padding: 2px 8px 2px 6px;
+          align-items: center;
+          gap: 4px;
+          mix-blend-mode: multiply;
+          background-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-bd-cr);
+          border-width: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-wh);
+          border-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-cr);
+          border-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-se);
+          border-radius: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-rs);
+          box-shadow: prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-ae)
+            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-br)
+            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-sd)
+            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-cr);
+
+          .stock_messages {
+            font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
+            font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
+            color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
+            font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);
+            font-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se-ic);
+            text-decoration: prepareMediaVariable(--_ctm-dn-im-sk-tt-ue);
+            text-align: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-an);
+            letter-spacing: prepareMediaVariable(--_ctm-dn-im-sk-tt-lr-sg);
+            line-height: prepareMediaVariable(--_ctm-dn-im-sk-tt-le-ht);
+          }
+        }
+      }
+    }
+
+    &[data-widget-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

package/dist/language-selector.scss

@@ -423,14 +423,15 @@
         // padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
         gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
         .language__name {
-          // color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
-          color: var(
-            --_sf-hr-cr,
-            var(
-              --_ctm-mob-dn-im-se-dt-se-cr,
-              var(--_ctm-tab-dn-im-se-dt-se-cr, var(--_ctm-dn-im-se-dt-se-cr, inherit))
-            )
-          );
+          font-family: prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-fy);
+          font-size: prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-se);
+          color: prepareMediaVariable(--_ctm-dn-wt-pr-tt-cr);
+          font-weight: prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-wt);
+          text-decoration: prepareMediaVariable(--_ctm-dn-wt-pr-tt-ue);
+          font-style: prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-se-ic);
+          text-align: prepareMediaVariable(--_ctm-dn-wt-pr-tt-tt-an);
+          letter-spacing: prepareMediaVariable(--_ctm-dn-wt-pr-tt-lr-sg);
+          line-height: prepareMediaVariable(--_ctm-dn-wt-pr-tt-le-ht);
           @include restrictToLinesShow(1);
         }
       }

package/dist/layouter-pro.scss

@@ -1,88 +1,88 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-$childItemSelector: '[data-element-type="layouter-pro-item"]';
-$flex: "flx";
-$grid: "grd";
-$flexRow: "rw";
-$flexRowReverse: "rw-rv";
-$flexColumn: "cln";
-$flexColumnReverse: "cln-rv";
-[data-div-type="element"] {
-  &[data-element-type="layouter-pro"] {
-    // width: var(--_sf-con-nw-wh);
-    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    width: calc(1% * #{prepareMediaVariable(--_ctm-layou-ele-nw-wh-vl)});
-    max-width: 100% !important;
-    // width: min(#{prepareMediaVariable(--_ctm-layou-lt-wh)}, 100%);
-    // width: 100%;
-    // height: var(--_ctm-con-lt-ht);
-    margin: prepareMediaVariable(--_ctm-layou-lt-mn);
-    background-color: prepareMediaVariable(--_ctm-layou-dn-bd-cr);
-    background-image: prepareMediaVariable(--_ctm-layou-dn-bd-ie);
-    background-attachment: prepareMediaVariable(--_ctm-layou-dn-bd-at);
-    background-position: prepareMediaVariable(--_ctm-layou-dn-bd-pn);
-    background-repeat: prepareMediaVariable(--_ctm-layou-dn-bd-rt);
-    background-size: prepareMediaVariable(--_ctm-layou-dn-bd-se);
-    border-radius: prepareMediaVariable(--_ctm-layou-dn-br-rs);
-    padding: prepareMediaVariable(--_ctm-layou-lt-pg);
-
-    &[data-show-border="true"] {
-      border-color: prepareMediaVariable(--_ctm-layou-dn-br-cr);
-      border-style: prepareMediaVariable(--_ctm-layou-dn-br-se);
-      border-width: prepareMediaVariable(--_ctm-layou-dn-br-wh);
-    }
-
-    &[data-show-boxshadow="true"] {
-      box-shadow: var(
-        --_hide-grid-shadow,
-        prepareMediaVariable(--_ctm-layou-dn-sw-ae) prepareMediaVariable(--_ctm-layou-dn-sw-br)
-          prepareMediaVariable(--_ctm-layou-dn-sw-sd) prepareMediaVariable(--_ctm-layou-dn-sw-cr)
-      );
-    }
-
-    & > div {
-      &.wrapper {
-        width: 100%;
-        min-height: prepareMediaVariable(--_ctm-layou-lt-mn-ht);
-        column-gap: prepareMediaVariable(--_ctm-layou-lt-cn-gp);
-        row-gap: prepareMediaVariable(--_ctm-layou-lt-rw-gp);
-
-        &:is(.#{$flex} > *) {
-          display: var(--_d-flex) !important;
-          flex-wrap: prepareMediaVariable(--_ctm-layou-lt-fx-wp);
-          overflow: prepareMediaVariable(--_ctm-layou-lt-fx-ow);
-
-          &.#{$flexRow} {
-            flex-direction: row;
-            align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
-            justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
-          }
-          &.#{$flexRowReverse} {
-            flex-direction: row-reverse;
-            align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
-            justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
-          }
-          &.#{$flexColumn} {
-            flex-direction: column;
-            justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
-            align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
-          }
-          &.#{$flexColumnReverse} {
-            flex-direction: column-reverse;
-            justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
-            align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
-          }
-        }
-
-        // & > div {
-        //   &#{$childItemSelector} {
-        //     // width: 100%;
-        //   }
-        // }
-        // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
-        // grid-auto-rows: minmax(100px, 1fr);
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+$childItemSelector: '[data-element-type="layouter-pro-item"]';
+$flex: "flx";
+$grid: "grd";
+$flexRow: "rw";
+$flexRowReverse: "rw-rv";
+$flexColumn: "cln";
+$flexColumnReverse: "cln-rv";
+[data-div-type="element"] {
+  &[data-element-type="layouter-pro"] {
+    // width: var(--_sf-con-nw-wh);
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    width: calc(1% * #{prepareMediaVariable(--_ctm-layou-ele-nw-wh-vl)});
+    max-width: 100% !important;
+    // width: min(#{prepareMediaVariable(--_ctm-layou-lt-wh)}, 100%);
+    // width: 100%;
+    // height: var(--_ctm-con-lt-ht);
+    margin: prepareMediaVariable(--_ctm-layou-lt-mn);
+    background-color: prepareMediaVariable(--_ctm-layou-dn-bd-cr);
+    background-image: prepareMediaVariable(--_ctm-layou-dn-bd-ie);
+    background-attachment: prepareMediaVariable(--_ctm-layou-dn-bd-at);
+    background-position: prepareMediaVariable(--_ctm-layou-dn-bd-pn);
+    background-repeat: prepareMediaVariable(--_ctm-layou-dn-bd-rt);
+    background-size: prepareMediaVariable(--_ctm-layou-dn-bd-se);
+    border-radius: prepareMediaVariable(--_ctm-layou-dn-br-rs);
+    padding: prepareMediaVariable(--_ctm-layou-lt-pg);
+
+    &[data-show-border="true"] {
+      border-color: prepareMediaVariable(--_ctm-layou-dn-br-cr);
+      border-style: prepareMediaVariable(--_ctm-layou-dn-br-se);
+      border-width: prepareMediaVariable(--_ctm-layou-dn-br-wh);
+    }
+
+    &[data-show-boxshadow="true"] {
+      box-shadow: var(
+        --_hide-grid-shadow,
+        prepareMediaVariable(--_ctm-layou-dn-sw-ae) prepareMediaVariable(--_ctm-layou-dn-sw-br)
+          prepareMediaVariable(--_ctm-layou-dn-sw-sd) prepareMediaVariable(--_ctm-layou-dn-sw-cr)
+      );
+    }
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+        min-height: prepareMediaVariable(--_ctm-layou-lt-mn-ht);
+        column-gap: prepareMediaVariable(--_ctm-layou-lt-cn-gp);
+        row-gap: prepareMediaVariable(--_ctm-layou-lt-rw-gp);
+
+        &:is(.#{$flex} > *) {
+          display: var(--_d-flex) !important;
+          flex-wrap: prepareMediaVariable(--_ctm-layou-lt-fx-wp);
+          overflow: prepareMediaVariable(--_ctm-layou-lt-fx-ow);
+
+          &.#{$flexRow} {
+            flex-direction: row;
+            align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
+            justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
+          }
+          &.#{$flexRowReverse} {
+            flex-direction: row-reverse;
+            align-items: prepareMediaVariable(--_ctm-layou-lt-an-is);
+            justify-content: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
+          }
+          &.#{$flexColumn} {
+            flex-direction: column;
+            justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
+            align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
+          }
+          &.#{$flexColumnReverse} {
+            flex-direction: column-reverse;
+            justify-content: prepareMediaVariable(--_ctm-layou-lt-an-is);
+            align-items: prepareMediaVariable(--_ctm-layou-lt-jy-ct);
+          }
+        }
+
+        // & > div {
+        //   &#{$childItemSelector} {
+        //     // width: 100%;
+        //   }
+        // }
+        // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
+        // grid-auto-rows: minmax(100px, 1fr);
+      }
+    }
+  }
+}