@sc-360-v2/storefront-cms-library 0.2.73 → 0.2.76

package/dist/product.scss

@@ -6,26 +6,80 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 [data-div-type="element"] {
   &[data-element-type="product"] {
     // width: var(--_sf-con-nw-wh);
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-pro-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    // width: calc(1% * var(--_ctm-pro-ele-nw-wh-vl, auto));
-    // width: 100%;
-    // height: var(--_ctm-pro-lt-ht) !important;
+    width: var(
+      --_sf-mob-el-wh-st-mx,
+      var(
+        --_sf-tab-el-wh-st-mx,
+        var(
+          --_sf-el-wh-st-mx,
+          calc(
+            1% *
+              var(
+                --_ctm-mob-pro-ele-nw-wh-vl,
+                var(--_ctm-tab-pro-ele-nw-wh-vl, var(--_ctm-pro-ele-nw-wh-vl, var(--_sf-nw-wh)))
+              )
+          )
+        )
+      )
+    );
+
     height: auto;
-    margin: var(--_ctm-pro-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
 
-    background-color: var(--_ctm-pro-dn-bd-cr, var(--_tst-dn-bd-cr));
-    padding: var(--_ctm-pro-lt-pg, var(--_tst-lt-pg));
+    margin: var(
+      --_ctm-mob-pro-lt-mn,
+      var(--_ctm-tab-pro-lt-mn, var(--_ctm-pro-lt-mn, var(--_ctm-lt-mn)))
+    );
+
+    background-color: var(
+      --_ctm-mob-pro-dn-bd-cr,
+      var(--_ctm-tab-pro-dn-bd-cr, var(--_ctm-pro-dn-bd-cr))
+    );
+    background-image: var(
+      --_ctm-mob-pro-dn-bd-ie,
+      var(--_ctm-tab-pro-dn-bd-ie, var(--_ctm-pro-dn-bd-ie))
+    );
+    background-attachment: var(
+      --_ctm-mob-pro-dn-bd-at,
+      var(--_ctm-tab-pro-dn-bd-at, var(--_ctm-pro-dn-bd-at))
+    );
+    background-position: var(
+      --_ctm-mob-pro-dn-bd-pn,
+      var(--_ctm-tab-pro-dn-bd-pn, var(--_ctm-pro-dn-bd-pn))
+    );
+    background-repeat: var(
+      --_ctm-mob-pro-dn-bd-rt,
+      var(--_ctm-tab-pro-dn-bd-rt, var(--_ctm-pro-dn-bd-rt))
+    );
+    background-size: var(
+      --_ctm-mob-pro-dn-bd-se,
+      var(--_ctm-tab-pro-dn-bd-se, var(--_ctm-pro-dn-bd-se))
+    );
+    padding: var(--_ctm-mob-pro-lt-pg, var(--_ctm-tab-pro-lt-pg, var(--_ctm-pro-lt-pg)));
 
     // height: 100%;
-    border-color: var(--_ctm-pro-dn-br-cr, var(--_tst-dn-br-cr));
-    border-style: var(--_ctm-pro-dn-br-se, var(--_tst-dn-br-se));
-    border-width: var(--_ctm-pro-dn-br-wh, var(--_tst-dn-br-wh));
-    border-radius: var(--_ctm-pro-dn-br-rs, var(--_tst-dn-br-rs));
+    border-color: var(
+      --_ctm-mob-pro-dn-br-cr,
+      var(--_ctm-tab-pro-dn-br-cr, var(--_ctm-pro-dn-br-cr))
+    );
+    border-style: var(
+      --_ctm-mob-pro-dn-br-se,
+      var(--_ctm-tab-pro-dn-br-se, var(--_ctm-pro-dn-br-se))
+    );
+    border-width: var(
+      --_ctm-mob-pro-dn-br-wh,
+      var(--_ctm-tab-pro-dn-br-wh, var(--_ctm-pro-dn-br-wh))
+    );
+    border-radius: var(
+      --_ctm-mob-pro-dn-br-rs,
+      var(--_ctm-tab-pro-dn-br-rs, var(--_ctm-pro-dn-br-rs))
+    );
+
     box-shadow: var(
       --_show-shadow,
-      var(--_ctm-pro-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-pro-dn-sw-br, var(--_tst-dn-sw-br))
-        var(--_ctm-pro-dn-sw-sd, var(--_tst-dn-sw-sd))
-        var(--_ctm-pro-dn-sw-cr, var(--_tst-dn-fq-wt-sw-cr))
+      var(--_ctm-mob-pro-dn-sw-ae, var(--_ctm-tab-pro-dn-sw-ae, var(--_ctm-pro-dn-sw-ae)))
+        var(--_ctm-mob-pro-dn-sw-br, var(--_ctm-tab-pro-dn-sw-br, var(--_ctm-pro-dn-sw-br)))
+        var(--_ctm-mob-pro-dn-sw-sd, var(--_ctm-tab-pro-dn-sw-sd, var(--_ctm-pro-dn-sw-sd)))
+        var(--_ctm-mob-pro-dn-sw-cr, var(--_ctm-tab-pro-dn-sw-cr, var(--_ctm-pro-dn-sw-cr)))
     );
 
     // &:not(:has(#{$resizerId}#{$resizeActive})) {

package/dist/productDetails.scss

@@ -23,8 +23,35 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     // height: var(--_ctm-pro-lt-ht) !important;
     // width: 100%;
     height: auto;
-    margin: var(--_ctm-prod-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
-    background: var(--_ctm-prod-dn-bd-cr);
+    margin: var(
+      --_ctm-mob-prod-lt-mn,
+      var(--_ctm-tab-prod-lt-mn, var(--_ctm-prod-lt-mn, var(--_ctm-lt-mn)))
+    );
+
+    background-color: var(
+      --_ctm-mob-prod-dn-bd-cr,
+      var(--_ctm-tab-prod-dn-bd-cr, var(--_ctm-prod-dn-bd-cr))
+    );
+    background-image: var(
+      --_ctm-mob-prod-dn-bd-ie,
+      var(--_ctm-tab-prod-dn-bd-ie, var(--_ctm-prod-dn-bd-ie))
+    );
+    background-attachment: var(
+      --_ctm-mob-prod-dn-bd-at,
+      var(--_ctm-tab-prod-dn-bd-at, var(--_ctm-prod-dn-bd-at))
+    );
+    background-position: var(
+      --_ctm-mob-prod-dn-bd-pn,
+      var(--_ctm-tab-prod-dn-bd-pn, var(--_ctm-prod-dn-bd-pn))
+    );
+    background-repeat: var(
+      --_ctm-mob-prod-dn-bd-rt,
+      var(--_ctm-tab-prod-dn-bd-rt, var(--_ctm-prod-dn-bd-rt))
+    );
+    background-size: var(
+      --_ctm-mob-prod-dn-bd-se,
+      var(--_ctm-tab-prod-dn-bd-se, var(--_ctm-prod-dn-bd-se))
+    );
     min-height: var(--_ctm-mob-prod-lt-ht, var(--_ctm-tab-prod-lt-ht, var(--_ctm-prod-lt-ht)));
 
     // &:not(:has(#{$resizerId}#{$resizeActive})) {

package/dist/profile.scss

@@ -3,9 +3,21 @@
 
 [data-div-type="element"] {
   &[data-element-type="profile"] {
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    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)));
+
+    aspect-ratio: 1 /
+      var(--_ctm-mob-aspect-ratio, var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio)));
 
     & > .wrapper {
       width: 100%;
@@ -25,7 +37,10 @@
       gap: 8px;
       svg {
         path {
-          stroke: var(--_ctm-dn-ct-in-in-cr);
+          stroke: var(
+            --_ctm-mob-dn-ct-in-in-cr,
+            var(--_ctm-tab-dn-ct-in-in-cr, var(--_ctm-dn-ct-in-in-cr))
+          );
         }
       }
       .profile__content {

package/dist/quantity-selector.scss

@@ -9,7 +9,7 @@
     // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -42,7 +42,7 @@
       color: rgba(75, 69, 70, 1);
     }
     .quantity_container {
-      padding: var(--_ctm-lt-pg);
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
 
       .quantity_open_input {
         display: flex;
@@ -251,7 +251,8 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        width: 150px;
+        // width: 150px;
+        width: 100%;
         height: 40px;
         border: 1px solid #ccc;
         border-radius: 8px;
@@ -270,7 +271,7 @@
           align-items: center;
           border-left: 1px solid #ccc;
           flex: 1;
-          justify-content: space-around;
+          justify-content: space-between;
 
           button {
             width: 30px;

package/dist/quick-links.scss

@@ -0,0 +1,277 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="quickLinks"] {
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    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)));
+
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+
+    --_aspect-ratio: calc(
+      1 *
+        (
+          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
+            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
+        )
+    );
+
+    & > .wrapper {
+      width: 100%;
+      height: 100%;
+      // background-color: var(--_ctm-dn-fl-ad-bd-bd-cr, var(--_tst-dn-fl-ad-bd-bd-cr));
+      // gap: var(--_ctm-lt-im-sg, var(--_tst-lt-im-sg));
+      // justify-content: var(--_justify-center);
+      // align-items: var(--_align-center);
+    }
+
+    &[data-social-alignment="horizontal"] {
+      .social__container {
+        flex-direction: row;
+      }
+    }
+
+    &[data-social-alignment="vertical"] {
+      .social__container {
+        flex-direction: column;
+      }
+    }
+    &[data-icon-style="Icon"] {
+      .social__container {
+        align-items: center;
+      }
+      &[data-item-alignment="left"] {
+        .social__container {
+          justify-content: flex-start;
+          align-items: center;
+        }
+      }
+      &[data-item-alignment="center"] {
+        .social__container {
+          justify-content: center;
+          align-items: center;
+        }
+      }
+      &[data-item-alignment="right"] {
+        .social__container {
+          justify-content: flex-end;
+          align-items: center;
+        }
+      }
+    }
+    &[data-icon-position="left"] {
+      .social__item {
+        flex-direction: row;
+      }
+    }
+    &[data-icon-position="right"] {
+      .social__item {
+        flex-direction: row-reverse;
+      }
+    }
+    &[data-icon-position="top"] {
+      .social__item {
+        flex-direction: column;
+      }
+    }
+    &[data-icon-position="bottom"] {
+      .social__item {
+        flex-direction: column-reverse;
+      }
+    }
+    &[data-item-alignment="left"] {
+      .social__item {
+        align-items: flex-start;
+      }
+    }
+    &[data-item-alignment="center"] {
+      .social__item {
+        align-items: center;
+      }
+    }
+    &[data-item-alignment="right"] {
+      .social__item {
+        align-items: flex-end;
+      }
+    }
+
+    &[data-widget-border="true"] {
+      .social__container {
+        border-color: var(
+          --_ctm-mob-dn-sl-wt-br-cr,
+          var(--_ctm-tab-dn-sl-wt-br-cr, var(--_ctm-dn-sl-wt-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-dn-sl-wt-br-se,
+          var(--_ctm-tab-dn-sl-wt-br-se, var(--_ctm-dn-sl-wt-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-dn-sl-wt-br-wh,
+          var(--_ctm-tab-dn-sl-wt-br-wh, var(--_ctm-dn-sl-wt-br-wh))
+        );
+      }
+    }
+    &[data-item-show-icon-color="true"] {
+      .social__container {
+        & svg {
+          path {
+            stroke: var(--_ctm-dn-im-se-in-c1, var(--_tst-dn-im-se-in-c1));
+          }
+        }
+      }
+    }
+    &[data-widget-shadow="true"] {
+      .social__container {
+        box-shadow: var(
+          --_show-shadow,
+          var(--_ctm-mob-dn-sl-wt-sw-ae, var(--_ctm-tab-dn-sl-wt-sw-ae, var(--_ctm-dn-sl-wt-sw-ae)))
+            var(
+              --_ctm-mob-dn-sl-wt-sw-br,
+              var(--_ctm-tab-dn-sl-wt-sw-br, var(--_ctm-dn-sl-wt-sw-br))
+            )
+            var(
+              --_ctm-mob-dn-sl-wt-sw-sd,
+              var(--_ctm-tab-dn-sl-wt-sw-sd, var(--_ctm-dn-sl-wt-sw-sd))
+            )
+            var(
+              --_ctm-mob-dn-sl-wt-sw-cr,
+              var(--_ctm-tab-dn-sl-wt-sw-cr, var(--_ctm-dn-sl-wt-sw-cr))
+            )
+        );
+      }
+    }
+    &[data-item-border="true"] {
+      .social__item {
+        border-color: var(
+          --_ctm-mob-dn-im-se-br-cr,
+          var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-dn-im-se-br-se,
+          var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-dn-im-se-br-wh,
+          var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
+        );
+      }
+    }
+    &[data-item-shadow="true"] {
+      .social__item {
+        box-shadow: var(
+          --_show-shadow,
+          var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
+            var(
+              --_ctm-mob-dn-im-se-sw-br,
+              var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
+            )
+            var(
+              --_ctm-mob-dn-im-se-sw-sd,
+              var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
+            )
+            var(
+              --_ctm-mob-dn-im-se-sw-cr,
+              var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
+            )
+        );
+      }
+    }
+    .social__container {
+      display: flex;
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      width: 100%;
+      height: 100%;
+      gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
+      background-color: var(
+        --_ctm-mob-dn-sl-wt-bd-cr,
+        var(--_ctm-tab-dn-sl-wt-bd-cr, var(--_ctm-dn-sl-wt-bd-cr))
+      );
+      border-radius: var(
+        --_ctm-mob-dn-sl-wt-br-rs,
+        var(--_ctm-tab-dn-sl-wt-br-rs, var(--_ctm-dn-sl-wt-br-rs))
+      );
+
+      svg {
+        width: var(
+          --_ctm-mob-dn-im-se-in-se,
+          var(--_ctm-tab-dn-im-se-in-se, var(--_ctm-dn-im-se-in-se))
+        );
+        height: var(
+          --_ctm-mob-dn-im-se-in-se,
+          var(--_ctm-tab-dn-im-se-in-se, var(--_ctm-dn-im-se-in-se))
+        );
+
+        // path {
+        //   stroke: var(
+        //     --_ctm-mob-dn-im-se-in-c1,
+        //     var(--_ctm-tab-dn-im-se-in-c1, var(--_ctm-dn-im-se-in-c1))
+        //   );
+        // }
+      }
+
+      .social__item {
+        width: 100%;
+        height: 100%;
+        flex-wrap: wrap;
+        display: flex;
+        gap: var(--_ctm-mob-lt-gp, var(--_ctm-tab-lt-gp, var(--_ctm-lt-gp)));
+        background-color: var(
+          --_ctm-mob-dn-im-se-bd-cr,
+          var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
+        );
+        border-radius: var(
+          --_ctm-mob-dn-im-se-br-rs,
+          var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
+        );
+      }
+
+      .social__text {
+        color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
+        font-family: var(
+            --_ctm-mob-dn-im-se-ft-fy,
+            var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
+          ),
+          sans-serif;
+        font-size: var(
+          --_ctm-mob-dn-im-se-ft-se,
+          var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
+        );
+        font-weight: var(
+          --_ctm-mob-dn-im-se-ft-wt,
+          var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))
+        );
+        font-style: var(
+          --_ctm-mob-dn-im-se-ft-se-ic,
+          var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))
+        );
+        text-align: var(
+          --_ctm-mob-dn-im-se-tt-an,
+          var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))
+        );
+        letter-spacing: var(
+          --_ctm-mob-dn-im-se-lr-sg,
+          var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))
+        );
+        line-height: var(
+          --_ctm-mob-dn-im-se-le-ht,
+          var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))
+        );
+        text-decoration: var(
+          --_ctm-mob-dn-im-se-lh,
+          var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-lh))
+        );
+      }
+    }
+  }
+}

package/dist/quotes.scss

@@ -5,8 +5,17 @@ $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
 [data-div-type="element"] {
   &[data-element-type="quotes"] {
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    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)));
 
     & > div {
       &.wrapper {

package/dist/repeater-item.scss

@@ -16,8 +16,32 @@
       &.wrapper {
         width: 100%;
         height: 100%;
-        padding: var(--_ctm-repe-lt-pg);
-        background: var(--_ctm-repe-dn-bd-cr);
+        padding: var(--_ctm-mob-repe-lt-pg, var(--_ctm-tab-repe-lt-pg, var(--_ctm-repe-lt-pg)));
+
+        background-color: var(
+          --_ctm-mob-repe-dn-bd-cr,
+          var(--_ctm-tab-repe-dn-bd-cr, var(--_ctm-repe-dn-bd-cr))
+        );
+        background-image: var(
+          --_ctm-mob-repe-dn-bd-ie,
+          var(--_ctm-tab-repe-dn-bd-ie, var(--_ctm-repe-dn-bd-ie))
+        );
+        background-attachment: var(
+          --_ctm-mob-repe-dn-bd-at,
+          var(--_ctm-tab-repe-dn-bd-at, var(--_ctm-repe-dn-bd-at))
+        );
+        background-position: var(
+          --_ctm-mob-repe-dn-bd-pn,
+          var(--_ctm-tab-repe-dn-bd-pn, var(--_ctm-repe-dn-bd-pn))
+        );
+        background-repeat: var(
+          --_ctm-mob-repe-dn-bd-rt,
+          var(--_ctm-tab-repe-dn-bd-rt, var(--_ctm-repe-dn-bd-rt))
+        );
+        background-size: var(
+          --_ctm-mob-repe-dn-bd-se,
+          var(--_ctm-tab-repe-dn-bd-se, var(--_ctm-repe-dn-bd-se))
+        );
         border-radius: var(
           --_ctm-mob-repe-dn-br-rs,
           var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs))

package/dist/repeater.scss

@@ -2,6 +2,7 @@
 @use "sass:list";
 @use "./repeater-embla-controls.scss" as *;
 $childItemSelector: '[data-element-type="repeater-item"]';
+$rai: "repeater-advertise-item";
 [data-div-type="element"] {
   &[data-element-type="repeater"] {
     // width: var(--_sf-con-nw-wh);
@@ -14,15 +15,41 @@ $childItemSelector: '[data-element-type="repeater-item"]';
         )
     );
     // width: 100%;
-    // height: var(--_ctm-con-lt-ht);
+    &:not([data-view-state="full"]) {
+      min-height: var(
+        --_ctm-mob-rep-lt-ht,
+        var(--_ctm-tab-rep-lt-ht, var(--_ctm-rep-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht))))
+      );
+    }
+    min-height: var();
     margin: var(
       --_ctm-mob-rep-lt-mn,
       var(--_ctm-tab-rep-lt-mn, var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))))
     );
-    background: var(
+    background-color: var(
       --_ctm-mob-rep-dn-bd-cr,
       var(--_ctm-tab-rep-dn-bd-cr, var(--_ctm-rep-dn-bd-cr))
     );
+    background-image: var(
+      --_ctm-mob-rep-dn-bd-ie,
+      var(--_ctm-tab-rep-dn-bd-ie, var(--_ctm-rep-dn-bd-ie))
+    );
+    background-attachment: var(
+      --_ctm-mob-rep-dn-bd-at,
+      var(--_ctm-tab-rep-dn-bd-at, var(--_ctm-rep-dn-bd-at))
+    );
+    background-position: var(
+      --_ctm-mob-rep-dn-bd-pn,
+      var(--_ctm-tab-rep-dn-bd-pn, var(--_ctm-rep-dn-bd-pn))
+    );
+    background-repeat: var(
+      --_ctm-mob-rep-dn-bd-rt,
+      var(--_ctm-tab-rep-dn-bd-rt, var(--_ctm-rep-dn-bd-rt))
+    );
+    background-size: var(
+      --_ctm-mob-rep-dn-bd-se,
+      var(--_ctm-tab-rep-dn-bd-se, var(--_ctm-rep-dn-bd-se))
+    );
     border-radius: var(
       --_ctm-mob-rep-dn-br-rs,
       var(--_ctm-tab-rep-dn-br-rs, var(--_ctm-rep-dn-br-rs))
@@ -90,7 +117,8 @@ $childItemSelector: '[data-element-type="repeater-item"]';
           );
 
           div {
-            &#{$childItemSelector} {
+            &#{$childItemSelector},
+            &.#{$rai} {
               width: 100%;
             }
           }
@@ -105,6 +133,7 @@ $childItemSelector: '[data-element-type="repeater-item"]';
           flex-wrap: wrap;
           width: 100%;
           height: auto !important;
+          min-height: 100px !important;
         }
       }
       &:not(.stimsfrRws) {
@@ -112,7 +141,8 @@ $childItemSelector: '[data-element-type="repeater-item"]';
           &.wrapper {
             justify-content: center;
             & > div {
-              &#{$childItemSelector} {
+              &#{$childItemSelector},
+              &.#{$rai} {
                 // width: var(--_ctm-rep-lt-wh);
                 --_col-count: var(--_sf-gd-ct, 3);
                 --_col-gap: 0px;
@@ -137,7 +167,8 @@ $childItemSelector: '[data-element-type="repeater-item"]';
           &.wrapper {
             align-self: center;
             & > div {
-              &#{$childItemSelector} {
+              &#{$childItemSelector},
+              &.#{$rai} {
                 // --_col-count: var(--_sf-gd-ct, 3);
                 --_col-count: var(
                   --_ctm-mob-rep-lt-st-is-pr-rw,
@@ -163,7 +194,16 @@ $childItemSelector: '[data-element-type="repeater-item"]';
                   auto
                 );
                 grid-template-columns: minmax(0px, 1fr);
-                // grid-template-rows: minmax(max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),auto) minmax(max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),auto);
+                // min-height: 50px !important;
+                grid-template-rows:
+                  minmax(
+                    max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
+                    auto
+                  )
+                  minmax(
+                    max(0.5px, 0.09375 * (var(--scaling-factor) - var(--scrollbar-width))),
+                    auto
+                  );
               }
             }
           }
@@ -195,6 +235,7 @@ $childItemSelector: '[data-element-type="repeater-item"]';
               --_ctm-mob-rep-lt-im-gp,
               var(--_ctm-tab-rep-lt-im-gp, var(--_ctm-rep-lt-im-gp))
             );
+            min-height: 100px !important;
             --_embla-col-count: var(
               --_ctm-mob-rep-lt-st-is-pr-se,
               var(--_ctm-tab-rep-lt-st-is-pr-se, var(--_ctm-rep-lt-st-is-pr-se, 3))
@@ -242,7 +283,19 @@ $childItemSelector: '[data-element-type="repeater-item"]';
         // grid-auto-rows: minmax(100px, 1fr);
       }
     }
-
+    .repeater-advertise-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        // width: 100%;
+        // height: 100%;
+        object-fit: cover;
+        object-position: center center;
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
     // &[data-view-state="full"] {
     //   width: auto;
     //   margin: 0;

package/dist/rfqs.scss

@@ -5,8 +5,17 @@ $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
 [data-div-type="element"] {
   &[data-element-type="rfqs"] {
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    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)));
 
     & > div {
       &.wrapper {