@sc-360-v2/storefront-cms-library 0.5.58 → 0.5.60

package/dist/brand-basic-elements.scss

@@ -11,16 +11,9 @@ $overflowSelector: ".flex__overflow";
     // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // 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)))
-          )
-      )
-    );
+    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)));
     // The Height control. brandDescription and brandCode below already had this; only
     // brandName was missing it, so its own stylesheet never applied the height at all
@@ -36,7 +29,7 @@ $overflowSelector: ".flex__overflow";
     // );
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
 
-    & > .wrapper {
+    &>.wrapper {
       width: 100%;
       // Follow the elements own height so the styled box (background, border, shadow)
       // matches the Height set in layout instead of only hugging the text.
@@ -44,34 +37,26 @@ $overflowSelector: ".flex__overflow";
       // height: 100%;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
 
-      border-color: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
-      );
-      border-style: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
-      );
-      border-width: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
-      );
+      border-color: var(--_show-border,
+          var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr))));
+      border-style: var(--_show-border,
+          var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se))));
+      border-width: var(--_show-border,
+          var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))));
       border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-      box-shadow: var(
-        --_show-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)))
-      );
+      box-shadow: var(--_show-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))));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
     }
+
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+
     &[data-show-border="false"] {
       --_show-border: none;
     }
+
     // .text-element {
     //   // background: #6d96e4;
     //   // padding: 10px;
@@ -110,6 +95,13 @@ $overflowSelector: ".flex__overflow";
       // );
       color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
       font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
+      text-transform: var(--_ctm-mob-dn-tt-tm, var(--_ctm-tab-dn-tt-tm, var(--_ctm-dn-tt-tm)));
+
+      &.flex__overflow {
+        white-space: normal;
+        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+      }
+
       font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
       font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
@@ -120,29 +112,26 @@ $overflowSelector: ".flex__overflow";
       // up taller than their own line box and spill out of it, which is what makes the
       // text look cut off. max(..., 1em) keeps the box at least as tall as the text
       // while still honouring any larger value the user sets.
-      line-height: max(
-        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
-        1em
-      );
+      line-height: max(var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em);
       word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
       word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
 
-      text-decoration: var(
-        --_sf-hr-tt-dn,
-        var(
-          --_ctm-mob-dn-dt-se-ue,
-          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
-        )
-      );
+      text-decoration: var(--_sf-hr-tt-dn,
+        var(--_ctm-mob-dn-dt-se-ue,
+          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))));
       scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
+
       &[data-flip-x="true"] {
         transform: scaleX(-1);
       }
+
       &[data-flip-y="true"] {
         transform: scaleY(-1);
       }
     }
   }
+
   &[data-element-type="brandDescription"] {
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
@@ -150,16 +139,9 @@ $overflowSelector: ".flex__overflow";
     // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // 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)))
-          )
-      )
-    );
+    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)));
     min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
@@ -169,7 +151,7 @@ $overflowSelector: ".flex__overflow";
     //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
     // );
 
-    & > .wrapper {
+    &>.wrapper {
       width: 100%;
       // Follow the elements own height so the styled box (background, border, shadow)
       // matches the Height set in layout instead of only hugging the text.
@@ -177,33 +159,25 @@ $overflowSelector: ".flex__overflow";
       // height: 100%;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      border-color: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
-      );
-      border-style: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
-      );
-      border-width: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
-      );
+      border-color: var(--_show-border,
+          var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr))));
+      border-style: var(--_show-border,
+          var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se))));
+      border-width: var(--_show-border,
+          var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))));
       border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-      box-shadow: var(
-        --_show-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)))
-      );
+      box-shadow: var(--_show-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-show-shadow="false"] {
       --_show-shadow: none;
     }
+
     &[data-show-border="false"] {
       --_show-border: none;
     }
+
     // .text-element {
     //   background: #6d96e4;
     //   padding: 10px;
@@ -221,6 +195,14 @@ $overflowSelector: ".flex__overflow";
 
       color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
       font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
+      word-wrap: var(--_ctm-mob-dn-wd-wp, var(--_ctm-tab-dn-wd-wp, var(--_ctm-dn-wd-wp)));
+      word-break: var(--_ctm-mob-dn-wd-bk, var(--_ctm-tab-dn-wd-bk, var(--_ctm-dn-wd-bk)));
+
+      &.flex__overflow {
+        white-space: normal;
+        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+      }
+
       font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
       font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
@@ -231,30 +213,28 @@ $overflowSelector: ".flex__overflow";
       // up taller than their own line box and spill out of it, which is what makes the
       // text look cut off. max(..., 1em) keeps the box at least as tall as the text
       // while still honouring any larger value the user sets.
-      line-height: max(
-        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
-        1em
-      );
-      text-decoration: var(
-        --_sf-hr-tt-dn,
-        var(
-          --_ctm-mob-dn-dt-se-ue,
-          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
-        )
-      );
+      line-height: max(var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em);
+      text-decoration: var(--_sf-hr-tt-dn,
+        var(--_ctm-mob-dn-dt-se-ue,
+          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))));
       scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
       text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
+
       &[data-flip-x="true"] {
         transform: scaleX(-1);
       }
+
       &[data-flip-y="true"] {
         transform: scaleY(-1);
       }
+
       &#{$overflowSelector} {
         @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
       }
     }
   }
+
   &[data-element-type="brandCode"] {
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
@@ -262,16 +242,9 @@ $overflowSelector: ".flex__overflow";
     // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // 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)))
-          )
-      )
-    );
+    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)));
     min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
     // height: ;
@@ -280,7 +253,7 @@ $overflowSelector: ".flex__overflow";
     //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
     // );
 
-    & > .wrapper {
+    &>.wrapper {
       width: 100%;
       // Follow the elements own height so the styled box (background, border, shadow)
       // matches the Height set in layout instead of only hugging the text.
@@ -288,33 +261,25 @@ $overflowSelector: ".flex__overflow";
       // height: 100%;
       background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      border-color: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
-      );
-      border-style: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
-      );
-      border-width: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
-      );
+      border-color: var(--_show-border,
+          var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr))));
+      border-style: var(--_show-border,
+          var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se))));
+      border-width: var(--_show-border,
+          var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))));
       border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-      box-shadow: var(
-        --_show-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)))
-      );
+      box-shadow: var(--_show-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-show-shadow="false"] {
       --_show-shadow: none;
     }
+
     &[data-show-border="false"] {
       --_show-border: none;
     }
+
     // .text-element {
     //   // background: #6d96e4;
     //   // padding: 10px;
@@ -332,6 +297,14 @@ $overflowSelector: ".flex__overflow";
 
       color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
       font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
+      word-wrap: var(--_ctm-mob-dn-wd-wp, var(--_ctm-tab-dn-wd-wp, var(--_ctm-dn-wd-wp)));
+      word-break: var(--_ctm-mob-dn-wd-bk, var(--_ctm-tab-dn-wd-bk, var(--_ctm-dn-wd-bk)));
+
+      &.flex__overflow {
+        white-space: normal;
+        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+      }
+
       font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
       font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
       font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
@@ -342,22 +315,18 @@ $overflowSelector: ".flex__overflow";
       // up taller than their own line box and spill out of it, which is what makes the
       // text look cut off. max(..., 1em) keeps the box at least as tall as the text
       // while still honouring any larger value the user sets.
-      line-height: max(
-        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
-        1em
-      );
-      text-decoration: var(
-        --_sf-hr-tt-dn,
-        var(
-          --_ctm-mob-dn-dt-se-ue,
-          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
-        )
-      );
+      line-height: max(var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
+        1em);
+      text-decoration: var(--_sf-hr-tt-dn,
+        var(--_ctm-mob-dn-dt-se-ue,
+          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))));
       scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
       text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
+
       &[data-flip-x="true"] {
         transform: scaleX(-1);
       }
+
       &[data-flip-y="true"] {
         transform: scaleY(-1);
       }
@@ -367,4 +336,4 @@ $overflowSelector: ".flex__overflow";
       }
     }
   }
-}
+}

package/dist/brand.scss

@@ -4,29 +4,21 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
+
 [data-div-type="element"] {
   &[data-element-type="brand"] {
     // width: var(--_sf-con-nw-wh);
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% *
-          var(
-            --_ctm-mob-bran-ele-nw-wh-vl,
-            var(--_ctm-tab-bran-ele-nw-wh-vl, var(--_ctm-bran-ele-nw-wh-vl, var(--_sf-nw-wh)))
-          )
-      )
-    );
+    width: var(--_sf-el-wh-st-mx,
+        calc(1% * var(--_ctm-mob-bran-ele-nw-wh-vl,
+            var(--_ctm-tab-bran-ele-nw-wh-vl, var(--_ctm-bran-ele-nw-wh-vl, var(--_sf-nw-wh))))));
     grid-template-columns: 100% !important;
     grid-template-rows: auto !important;
     // height: var(
     //   --_ctm-mob-bran-lt-ht,
     //   var(--_ctm-tab-bran-lt-ht, var(--_ctm-bran-lt-ht))
     // ) !important;
-    margin: var(
-      --_ctm-mob-bran-lt-mn,
-      var(--_ctm-tab-bran-lt-mn, var(--_ctm-bran-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn)))
-    );
+    margin: var(--_ctm-mob-bran-lt-mn,
+        var(--_ctm-tab-bran-lt-mn, var(--_ctm-bran-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn))));
 
     &[data-background-type="color"] {
       background-color: prepareMediaVariable(--_ctm-bran-dn-bd-cr);
@@ -35,29 +27,21 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     &[data-background-type="gradient"] {
       --_sf-bran-gradient-angle: calc(#{prepareMediaVariable(--_ctm-bran-dn-gt-ae, 90)} * 1deg);
       --_sf-bran-gradient-start-color: #{prepareMediaVariable(--_ctm-bran-dn-gt-st-cr, transparent)};
-      --_sf-bran-gradient-start-position: calc(
-        #{prepareMediaVariable(--_ctm-bran-dn-gt-st-pn, 0)} * 1%
-      );
+      --_sf-bran-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-bran-dn-gt-st-pn, 0)} * 1%);
       --_sf-bran-gradient-end-color: #{prepareMediaVariable(--_ctm-bran-dn-gt-ed-cr, transparent)};
-      --_sf-bran-gradient-end-position: calc(
-        #{prepareMediaVariable(--_ctm-bran-dn-gt-ed-pn, 100)} * 1%
-      );
+      --_sf-bran-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-bran-dn-gt-ed-pn, 100)} * 1%);
       --_sf-bran-gradient-position: #{prepareMediaVariable(--_ctm-bran-dn-gt-pn, center)};
 
       &[data-gradient-type="Linear Gradient"] {
-        background-image: linear-gradient(
-          var(--_sf-bran-gradient-angle),
-          var(--_sf-bran-gradient-start-color) var(--_sf-bran-gradient-start-position),
-          var(--_sf-bran-gradient-end-color) var(--_sf-bran-gradient-end-position)
-        );
+        background-image: linear-gradient(var(--_sf-bran-gradient-angle),
+            var(--_sf-bran-gradient-start-color) var(--_sf-bran-gradient-start-position),
+            var(--_sf-bran-gradient-end-color) var(--_sf-bran-gradient-end-position));
       }
 
       &[data-gradient-type="Radial Gradient"] {
-        background-image: radial-gradient(
-          circle at var(--_sf-bran-gradient-position),
-          var(--_sf-bran-gradient-start-color) var(--_sf-bran-gradient-start-position),
-          var(--_sf-bran-gradient-end-color) var(--_sf-bran-gradient-end-position)
-        );
+        background-image: radial-gradient(circle at var(--_sf-bran-gradient-position),
+            var(--_sf-bran-gradient-start-color) var(--_sf-bran-gradient-start-position),
+            var(--_sf-bran-gradient-end-color) var(--_sf-bran-gradient-end-position));
       }
     }
 
@@ -97,41 +81,30 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     padding: var(--_ctm-mob-bran-lt-pg, var(--_ctm-tab-bran-lt-pg, var(--_ctm-bran-lt-pg)));
 
     // height: 100%;
-    border-color: var(
-      --_ctm-mob-bran-dn-br-cr,
-      var(--_ctm-tab-bran-dn-br-cr, var(--_ctm-bran-dn-br-cr))
-    );
-    border-style: var(
-      --_ctm-mob-bran-dn-br-se,
-      var(--_ctm-tab-bran-dn-br-se, var(--_ctm-bran-dn-br-se))
-    );
-    border-width: var(
-      --_ctm-mob-bran-dn-br-wh,
-      var(--_ctm-tab-bran-dn-br-wh, var(--_ctm-bran-dn-br-wh))
-    );
+    border-color: var(--_ctm-mob-bran-dn-br-cr,
+      var(--_ctm-tab-bran-dn-br-cr, var(--_ctm-bran-dn-br-cr)));
+    border-style: var(--_ctm-mob-bran-dn-br-se,
+      var(--_ctm-tab-bran-dn-br-se, var(--_ctm-bran-dn-br-se)));
+    border-width: var(--_ctm-mob-bran-dn-br-wh,
+      var(--_ctm-tab-bran-dn-br-wh, var(--_ctm-bran-dn-br-wh)));
+
     // "Show Border" switch. The border above is painted from CSS variables, so the
     // switch arrives as a data attribute and zeroes the width when it is off.
     &[data-show-border="false"] {
       border-width: 0;
       border-style: none;
     }
-    border-radius: var(
-      --_ctm-mob-bran-dn-br-rs,
-      var(--_ctm-tab-bran-dn-br-rs, var(--_ctm-bran-dn-br-rs))
-    );
-    box-shadow: var(
-      --_show-shadow,
-      var(--_ctm-mob-bran-dn-sw-ae, var(--_ctm-tab-bran-dn-sw-ae, var(--_ctm-bran-dn-sw-ae)))
-        var(--_ctm-mob-bran-dn-sw-br, var(--_ctm-tab-bran-dn-sw-br, var(--_ctm-bran-dn-sw-br)))
-        var(--_ctm-mob-bran-dn-sw-sd, var(--_ctm-tab-bran-dn-sw-sd, var(--_ctm-bran-dn-sw-sd)))
-        var(--_ctm-mob-bran-dn-sw-cr, var(--_ctm-tab-bran-dn-sw-cr, var(--_ctm-bran-dn-sw-cr)))
-    );
+
+    border-radius: var(--_ctm-mob-bran-dn-br-rs,
+      var(--_ctm-tab-bran-dn-br-rs, var(--_ctm-bran-dn-br-rs)));
+    box-shadow: var(--_show-shadow,
+      var(--_ctm-mob-bran-dn-sw-ae, var(--_ctm-tab-bran-dn-sw-ae, var(--_ctm-bran-dn-sw-ae))) var(--_ctm-mob-bran-dn-sw-br, var(--_ctm-tab-bran-dn-sw-br, var(--_ctm-bran-dn-sw-br))) var(--_ctm-mob-bran-dn-sw-sd, var(--_ctm-tab-bran-dn-sw-sd, var(--_ctm-bran-dn-sw-sd))) var(--_ctm-mob-bran-dn-sw-cr, var(--_ctm-tab-bran-dn-sw-cr, var(--_ctm-bran-dn-sw-cr))));
 
     // &:not(:has(#{$resizerId}#{$resizeActive})) {
     //   min-height: 100px !important;
     // }
 
-    & > div {
+    &>div {
       &.wrapper {
         width: 100%;
         grid-template-columns: 100% !important;
@@ -139,4 +112,4 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
     }
   }
-}
+}