@sc-360-v2/storefront-cms-library 0.1.7 → 0.1.9

package/dist/bulk-variant-picker.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="bulkVariantPicker"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // 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);
+    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+    // height: ;
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    --_aspect-ratio: calc(
+      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    );
+
+    & > .wrapper {
+      width: 100%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

package/dist/button.scss

@@ -3,9 +3,11 @@
 
 [data-div-type="element"] {
   &[data-element-type="button"] {
-    width: var(--_sf-nw-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-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    height: var(--_ctm-lt-ht) !important;
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
 
     & > .wrapper {
       // width: 100%;

package/dist/code-temp.scss

@@ -8,7 +8,8 @@
     // margin: var(--_lt-mn);
     // 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-nw-wh, var(--_tst-lt-wh));
+    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);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;

package/dist/countdown.scss

@@ -8,7 +8,8 @@
     // margin: var(--_lt-mn);
     // 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-nw-wh, var(--_tst-lt-wh));
+    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);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;

package/dist/editor-core.scss

@@ -4,14 +4,20 @@
 @import "./elements/section.scss";
 @import "./elements/grid.scss";
 @import "./elements/container.scss";
+@import "./elements/stack.scss";
 
 $dropElementSelector: "[data-drop-element='cms-drop-element']";
 $activeElementSelector: "[data-has-clicked='true']";
+$elementSelector: "[data-div-type='element']";
+$elementLayer: "[data-layer-div-type='element']";
+$suggestionSelector: ".suggestion-container";
+$dblclickSelector: "[data-cms-tt-ee-dbl-clkd='true']";
+// --_sf-el-lr-op
 
 [data-page-id="cms__template__editor"] {
   [data-page-id="page-wrapper"] {
-    display: var(--_d-grid);
-    padding-block-end: 50px;
+    // display: var(--_d-grid);
+    // padding-block-end: 50px;
 
     &[data-child-empty="true"] {
       align-items: center;
@@ -134,6 +140,41 @@ $activeElementSelector: "[data-has-clicked='true']";
         &[data-div-type="element"] {
           pointer-events: var(--_self-child-inside-element-pointerEvents, none);
           position: var(--_p-relative);
+
+          &[data-element-type="text"] {
+            &:has(#{$suggestionSelector}) {
+              &,
+              #{$suggestionSelector} {
+                z-index: calc(var(--_higher-zIndex) + var(--_cms-map-at-zIndex)) !important;
+              }
+            }
+            .text_editor_main .editor {
+              width: 100% !important;
+            }
+
+            &:not(#{$dblclickSelector}) {
+              * {
+                &:not([data-layer-element-type="text"]) {
+                  pointer-events: none !important;
+                }
+              }
+            }
+            &#{$dblclickSelector} {
+              cursor: auto !important;
+            }
+
+            #{$suggestionSelector} {
+              position: var(--_p-fixed);
+              max-width: 400px;
+              max-height: 400px;
+              overflow-y: auto;
+              background: var(--_body-bg);
+              padding: 10px;
+              border: 1px solid var(--_gray-200);
+              transform: translateY(10px);
+              box-shadow: var(--_shadow-md);
+            }
+          }
           &:has([data-is-rendering="false"]) {
             background: transparent !important;
             border: none !important;
@@ -169,10 +210,23 @@ $activeElementSelector: "[data-has-clicked='true']";
                 --_sf-nw-op-vl: -1;
               }
             }
-            &:is(#{$dropElementSelector}):not(:has(#{$activeElementSelector})),
+
+            &:is(#{$dropElementSelector}) {
+              & > .wrapper {
+                & > #{$elementSelector} {
+                  &:not(#{$activeElementSelector}) {
+                    pointer-events: none;
+                  }
+                  & > #{$elementLayer} {
+                    --_sf-el-lr-op: 1;
+                  }
+                }
+              }
+            }
+            &:is(#{$dropElementSelector}):not(:has(#{$activeElementSelector}#{$elementSelector})),
             &:not(#{$dropElementSelector}) {
               & > .wrapper {
-                border: var(--_sf-el-wr-br-at-vl, none);
+                // border: var(--_sf-el-wr-br-at-vl, none);
                 & > div {
                   &[data-cms-tool="cms-element-resizer"] {
                     --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-flex));
@@ -235,13 +289,16 @@ $activeElementSelector: "[data-has-clicked='true']";
             //   }
             // }
           }
-          &[data-element-type="container"] {
+          &:is([data-element-type="container"], [data-element-type="stack"]) {
             &:has(#{$activeElementSelector}) {
               --_sf-ct-pi-nw: none;
             }
             & > .wrapper {
               &[data-div-type="cms-container-wrapper"] {
                 display: var(--_d-grid);
+              }
+              &[data-div-type="cms-container-wrapper"],
+              &[data-div-type="cms-stack-wrapper"] {
                 height: 100%;
                 pointer-events: var(--_sf-ct-pi-nw);
                 // &,
@@ -255,9 +312,10 @@ $activeElementSelector: "[data-has-clicked='true']";
             --_sf-rsr-dt-vl-dp: var(--_d-flex);
           }
           &[data-cms-element-dragging="true"] {
-            --_sf-rsr-dp-vl: var(--_d-none);
-            --_sf-rsr-op-ac-dr-vl: 0;
-            --_sf-rsr-vt-ac-dr-vl: hidden;
+            // --_sf-rsr-dp-vl: var(--_d-none);
+            // --_sf-rsr-op-ac-dr-vl: 0;
+            // --_sf-rsr-vt-ac-dr-vl: hidden;
+            --_sf-rsr-op-ac-vl-cr-sp: 0;
             --_sf-el-wr-br-at-vl: 1px solid var(--_accent-color-2-500);
             * {
               pointer-events: none;

package/dist/embed-temp.scss

@@ -8,7 +8,8 @@
     // margin: var(--_lt-mn);
     // 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-nw-wh, var(--_tst-lt-wh));
+    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);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;

package/dist/faq.scss

@@ -7,9 +7,10 @@
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);
     // padding: var(--_lt-pg);
-    width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // width: 50%;
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    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);
     // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
     // height: var(--_ctm-lt-ht);
@@ -20,6 +21,11 @@
       1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
     );
 
+    // &[data-element-sub-child="true"] {
+    //   // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
+    //   width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // }
+
     & > .wrapper {
       // width: 100%;
       // height: 100%;

package/dist/gallery-slider-temp.scss

@@ -3,7 +3,9 @@
 
 [data-div-type="element"] {
   &[data-element-type="gallerySlider"] {
-    width: var(--_sf-nw-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-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // height: var(--_ctm-lt-ht);
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
 
     aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -33,7 +35,7 @@
       gap: var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_tst-dn-gy-lt-tt-ad-im-sg));
 
       width: 100%;
-      // height: 100%;
+      height: 100%;
       border-color: var(--_ctm-dn-gy-wt-se-br-cr, var(--_tst-dn-gy-wt-se-br-cr));
       border-style: var(--_ctm-dn-gy-wt-se-br-se, var(--_tst-dn-gy-wt-se-br-se));
       border-width: var(--_ctm-dn-gy-wt-se-br-wh, var(--_tst-dn-gy-wt-se-br-wh));
@@ -53,6 +55,8 @@
         align-items: center;
         margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
         gap: 6px;
+        margin-top: 16px;
+
         &[data-control-type="Bottom-Overflow"] {
           position: absolute;
           bottom: 10px;
@@ -114,7 +118,7 @@
       }
 
       .gallery-header {
-        text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
+        // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
         // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
         display: flex;
         flex-direction: column;
@@ -122,7 +126,7 @@
         gap: var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg);
         padding-block: var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg);
         padding-inline: var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg);
-        background-color: var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr, var(--_tst-dn-gy-wt-tt-cr-dn-bd-cr));
+        background-color: var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr, var(--_tst-dn-gy-wt-se-cr-dn-bd-cr));
         width: 100%;
         border-color: var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr, var(--_tst-dn-gy-wt-tt-cr-dn-br-cr));
         border-style: var(--_ctm-dn-gy-wt-tt-cr-dn-br-se, var(--_tst-dn-gy-wt-tt-cr-dn-br-se));
@@ -137,34 +141,27 @@
         );
 
         & h3 {
-          color: var(--_ctm-dn-gy-wt-cr, var(--_tst-dn-gy-wt-cr));
-          font-family: var(--_ctm-dn-gy-wt-ft-fy, var(--_tst-dn-gy-wt-ft-fy)), sans-serif;
-          font-size: var(--_ctm-dn-gy-wt-ft-se, var(--_tst-dn-gy-wt-ft-se));
-          font-weight: var(--_ctm-dn-gy-wt-ft-wt, var(--_tst-dn-gy-wt-ft-wt));
-          font-style: var(--_ctm-dn-gy-wt-ft-se-ic, var(--_tst-dn-gy-wt-ft-se-ic));
-          text-align: var(--_ctm-dn-gy-wt-tt-an, var(--_tst-dn-gy-wt-tt-an));
-          letter-spacing: var(--_ctm-dn-gy-wt-lr-sg, var(--_tst-dn-gy-wt-lr-sg));
-          line-height: var(--_ctm-dn-gy-wt-le-ht, var(--_tst-dn-gy-wt-le-ht));
-          text-decoration: var(
-            --_ctm-dn-gy-wt-lh,
-            var(--_ctm-dn-gy-wt-ue),
-            var(--_tst-dn-gy-wt-lh)
-          );
+          color: var(--_ctm-dn-gy-wt-se-cr, var(--_tst-dn-gy-wt-se-cr));
+          font-family: var(--_ctm-dn-gy-wt-se-ft-fy, var(--_tst-dn-gy-wt-se-ft-fy)), sans-serif;
+          font-size: var(--_ctm-dn-gy-wt-se-ft-se, var(--_tst-dn-gy-wt-se-ft-se));
+          font-weight: var(--_ctm-dn-gy-wt-se-ft-wt, var(--_tst-dn-gy-wt-se-ft-wt));
+          font-style: var(--_ctm-dn-gy-wt-se-ft-se-ic, var(--_tst-dn-gy-wt-se-ft-se-ic));
+          text-align: var(--_ctm-dn-gy-wt-se-tt-an, var(--_tst-dn-gy-wt-se-se-an));
+          letter-spacing: var(--_ctm-dn-gy-wt-se-lr-sg, var(--_tst-dn-gy-wt-se-lr-sg));
+          line-height: var(--_ctm-dn-gy-wt-se-le-ht, var(--_tst-dn-gy-wt-se-le-ht));
+          text-decoration: var(--_ctm-dn-gy-wt-se-ue,);
         }
         & p {
-          color: var(--_ctm-dn-gy-wt-cr-dc, var(--_tst-dn-gy-wt-cr-dc));
-          font-family: var(--_ctm-dn-gy-wt-ft-fy-dc, var(--_tst-dn-gy-wt-ft-fy-dc)), sans-serif;
-          font-size: var(--_ctm-dn-gy-wt-ft-se-dc, var(--_tst-dn-gy-wt-ft-se-dc));
-          font-weight: var(--_ctm-dn-gy-wt-ft-wt-dc, var(--_tst-dn-gy-wt-ft-wt-dc));
-          font-style: var(--_ctm-dn-gy-wt-ft-se-ic-dc, var(--_tst-dn-gy-wt-ft-se-ic-dc));
-          text-align: var(--_ctm-dn-gy-wt-tt-an-dc, var(--_tst-dn-gy-wt-tt-an-dc));
-          letter-spacing: var(--_ctm-dn-gy-wt-lr-sg-dc, var(--_tst-dn-gy-wt-lr-sg-dc));
-          line-height: var(--_ctm-dn-gy-wt-le-ht-dc, var(--_tst-dn-gy-wt-le-ht-dc));
-          text-decoration: var(
-            --_ctm-dn-gy-wt-lh-dc,
-            var(--_ctm-dn-gy-wt-ue-dc),
-            var(--_tst-dn-gy-wt-lh)
-          );
+          color: var(--_ctm-dn-gy-wt-se-cr-dc, var(--_tst-dn-gy-wt-se-cr-dc));
+          font-family: var(--_ctm-dn-gy-wt-se-ft-fy-dc, var(--_tst-dn-gy-wt-se-ft-fy-dc)),
+            sans-serif;
+          font-size: var(--_ctm-dn-gy-wt-se-ft-se-dc, var(--_tst-dn-gy-wt-se-ft-se-dc));
+          font-weight: var(--_ctm-dn-gy-wt-se-ft-wt-dc, var(--_tst-dn-gy-wt-se-ft-wt-dc));
+          font-style: var(--_ctm-dn-gy-wt-se-ft-se-ic-dc, var(--_tst-dn-gy-wt-se-ft-se-ic-dc));
+          text-align: var(--_ctm-dn-gy-wt-se-tt-an-dc, var(--_tst-dn-gy-wt-se-se-an-dc));
+          letter-spacing: var(--_ctm-dn-gy-wt-se-lr-sg-dc, var(--_tst-dn-gy-wt-se-lr-sg-dc));
+          line-height: var(--_ctm-dn-gy-wt-se-le-ht-dc, var(--_tst-dn-gy-wt-se-le-ht-dc));
+          text-decoration: var(--_ctm-dn-gy-wt-se-ue-dc,);
         }
         // h3 {
         //   margin-bottom: var(--_mb-4);
@@ -259,46 +256,76 @@
       .gallery-slider-element {
         flex-direction: row;
       }
+      .gallery-header {
+        width: fit-content;
+        height: 100%;
+      }
       &[data-widget-alignment="top"] {
         .gallery-slider-element {
           align-items: flex-start;
         }
+        .gallery-header {
+          justify-content: flex-start;
+        }
       }
       &[data-widget-alignment="center"] {
         .gallery-slider-element {
           align-items: center;
         }
+        .gallery-header {
+          justify-content: center;
+        }
       }
       &[data-widget-alignment="bottom"] {
         .gallery-slider-element {
           align-items: flex-end;
         }
+        .gallery-header {
+          justify-content: flex-end;
+        }
       }
     }
     &[data-text-position="right"] {
+      .gallery-header {
+        width: fit-content;
+        height: 100%;
+      }
       .gallery-slider-element {
         flex-direction: row-reverse;
       }
+
       &[data-widget-alignment="top"] {
         .gallery-slider-element {
           align-items: flex-start;
         }
+        .gallery-header {
+          justify-content: flex-start;
+        }
       }
       &[data-widget-alignment="center"] {
         .gallery-slider-element {
           align-items: center;
         }
+        .gallery-header {
+          justify-content: center;
+        }
       }
       &[data-widget-alignment="bottom"] {
         .gallery-slider-element {
           align-items: flex-end;
         }
+        .gallery-header {
+          justify-content: flex-end;
+        }
       }
     }
 
     .embla__viewport {
       width: 100%;
+      height: 100%;
       position: relative;
+      display: flex;
+      flex-direction: column;
 
       overflow: hidden;
       &[data-control-type="Side"] {
@@ -316,7 +343,7 @@
     }
     .embla__container {
       width: "100%";
-      height: 400px;
+      height: 100%;
       display: grid;
 
       grid-auto-flow: column;
@@ -333,49 +360,194 @@
     }
     .embla__slide {
       width: 100%;
-      .item__details {
+      height: 100%;
+    }
+
+    .gallery__slide {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      // flex-direction: column;
+
+      background-color: var(--_ctm-dn-im-se-bd-cr, var(--_tst-dn-im-se-bd-cr));
+      border-color: var(--_ctm-dn-im-se-br-cr, var(--_tst-dn-im-se-br-cr));
+      border-style: var(--_ctm-dn-im-se-br-se, var(--_tst-dn-im-se-br-se));
+      border-width: var(--_ctm-dn-im-se-br-wh, var(--_tst-dn-im-se-br-wh));
+      border-radius: var(--_ctm-dn-im-se-br-rs, var(--_tst-dn-im-se-br-rs));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-dn-im-se-sw-ae, var(--_tst-dn-im-se-sw-ae))
+          var(--_ctm-dn-im-se-sw-br, var(--_tst-dn-im-se-sw-br))
+          var(--_ctm-dn-im-se-sw-sd, var(--_tst-dn-im-se-sw-sd))
+          var(--_ctm-dn-im-se-sw-cr, var(--_tst-dn-im-se-sw-cr))
+      );
+      gap: var(--_ctm-dn-im-lt-gy-tt-ad-im-sg, var(--_tst-dn-gy-lt-tt-ad-im-sg));
+
+      .gallery-header {
+        // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
+        // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
         display: flex;
         flex-direction: column;
-        padding: var(--_ctm-dn-im-se-tt-vl-pg) var(--_ctm-dn-im-se-tt-hl-pg);
-        gap: var(--_ctm-dn-im-se-te-ad-dn-sg);
-        align-items: var(--_ctm-dn-im-se-te-ad-dn-at);
+
+        gap: var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg);
+        padding-block: var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg);
+        padding-inline: var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg);
+        background-color: var(--_ctm-dn-im-tt-cr-dn-bd-cr, var(--_tst-dn-im-se-cr-dn-bd-cr));
         width: 100%;
-      }
+        border-color: var(--_ctm-dn-im-tt-cr-dn-br-cr, var(--_tst-dn-im-tt-cr-dn-br-cr));
+        border-style: var(--_ctm-dn-im-tt-cr-dn-br-se, var(--_tst-dn-im-tt-cr-dn-br-se));
+        border-width: var(--_ctm-dn-im-tt-cr-dn-br-wh, var(--_tst-dn-im-tt-cr-dn-br-wh));
+        border-radius: var(--_ctm-dn-im-tt-cr-dn-br-rs, var(--_tst-dn-im-tt-cr-dn-br-rs));
+        box-shadow: var(
+          --_show-shadow,
+          var(--_ctm-dn-im-tt-cr-dn-sw-ae, var(--_tst-dn-im-tt-cr-dn-sw-ae))
+            var(--_ctm-dn-im-tt-cr-dn-sw-br, var(--_tst-dn-im-tt-cr-dn-sw-br))
+            var(--_ctm-dn-im-tt-cr-dn-sw-sd, var(--_tst-dn-im-tt-cr-dn-sw-sd))
+            var(--_ctm-dn-im-tt-cr-dn-sw-cr, var(--_tst-dn-gy-wt-sw-cr))
+        );
 
-      &[data-text-layout="On Image"] {
-        .item__details {
-          position: absolute;
-          bottom: 0;
+        & h3 {
+          color: var(--_ctm-dn-im-se-cr, var(--_tst-dn-im-se-cr));
+          font-family: var(--_ctm-dn-im-se-ft-fy, var(--_tst-dn-im-se-ft-fy)), sans-serif;
+          font-size: var(--_ctm-dn-im-se-ft-se, var(--_tst-dn-im-se-ft-se));
+          font-weight: var(--_ctm-dn-im-se-ft-wt, var(--_tst-dn-im-se-ft-wt));
+          font-style: var(--_ctm-dn-im-se-ft-se-ic, var(--_tst-dn-im-se-ft-se-ic));
+          text-align: var(--_ctm-dn-im-se-tt-an, var(--_tst-dn-im-se-se-an));
+          letter-spacing: var(--_ctm-dn-im-se-lr-sg, var(--_tst-dn-im-se-lr-sg));
+          line-height: var(--_ctm-dn-im-se-le-ht, var(--_tst-dn-im-se-le-ht));
+          text-decoration: var(--_ctm-dn-im-se-ue,);
+        }
+        & p {
+          color: var(--_ctm-dn-im-se-cr-dc, var(--_tst-dn-im-se-cr-dc));
+          font-family: var(--_ctm-dn-im-se-ft-fy-dc, var(--_tst-dn-im-se-ft-fy-dc)), sans-serif;
+          font-size: var(--_ctm-dn-im-se-ft-se-dc, var(--_tst-dn-im-se-ft-se-dc));
+          font-weight: var(--_ctm-dn-im-se-ft-wt-dc, var(--_tst-dn-im-se-ft-wt-dc));
+          font-style: var(--_ctm-dn-im-se-ft-se-ic-dc, var(--_tst-dn-im-se-ft-se-ic-dc));
+          text-align: var(--_ctm-dn-im-se-tt-an-dc, var(--_tst-dn-im-se-se-an-dc));
+          letter-spacing: var(--_ctm-dn-im-se-lr-sg-dc, var(--_tst-dn-im-se-lr-sg-dc));
+          line-height: var(--_ctm-dn-im-se-le-ht-dc, var(--_tst-dn-im-se-le-ht-dc));
+          text-decoration: var(--_ctm-dn-im-se-ue-dc,);
         }
+        // h3 {
+        //   margin-bottom: var(--_mb-4);
+        // }
       }
-      &[data-text-layout="Image Hover"] {
-        .item__details {
+
+      &[data-text-position="On Image"] {
+        .gallery-header {
+          width: 100%;
+          // height: 100%;
           position: absolute;
-          bottom: 0;
-          // display: none;
-          opacity: 0;
         }
+
+        &[data-widget-alignment="top"] {
+          // align-items: flex-start;
+
+          .gallery-header {
+            top: 0;
+
+            justify-content: flex-start;
+          }
+        }
+        &[data-widget-alignment="center"] {
+          // align-items: center;
+
+          .gallery-header {
+            top: 50%;
+            transform: translateY(-50%);
+            justify-content: center;
+          }
+        }
+        &[data-widget-alignment="bottom"] {
+          // align-items: flex-end;
+          .gallery-header {
+            bottom: 0;
+
+            justify-content: flex-end;
+          }
+        }
+      }
+
+      &[data-text-position="top"] {
+        flex-direction: column;
       }
-      &:hover {
-        .item__details {
-          opacity: 1;
+
+      &[data-text-position="bottom"] {
+        flex-direction: column-reverse;
+      }
+      &[data-text-position="left"] {
+        flex-direction: row;
+
+        .gallery-header {
+          width: fit-content;
+          height: 100%;
+        }
+        &[data-widget-alignment="top"] {
+          align-items: flex-start;
+
+          .gallery-header {
+            justify-content: flex-start;
+          }
+        }
+        &[data-widget-alignment="center"] {
+          align-items: center;
+
+          .gallery-header {
+            justify-content: center;
+          }
+        }
+        &[data-widget-alignment="bottom"] {
+          align-items: flex-end;
+
+          .gallery-header {
+            justify-content: flex-end;
+          }
         }
       }
-    }
+      &[data-text-position="right"] {
+        flex-direction: row-reverse;
+        .gallery-header {
+          width: fit-content;
+          height: 100%;
+        }
 
-    .embla__slide > img {
-      width: 100%;
-      height: 100%;
-      //   object-fit: cover;
+        &[data-widget-alignment="top"] {
+          align-items: flex-start;
+
+          .gallery-header {
+            justify-content: flex-start;
+          }
+        }
+        &[data-widget-alignment="center"] {
+          align-items: center;
 
-      object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));
-      margin-bottom: 12px;
+          .gallery-header {
+            justify-content: center;
+          }
+        }
+        &[data-widget-alignment="bottom"] {
+          align-items: flex-end;
 
-      &[data-has-title="true"] {
-        height: 85%;
+          .gallery-header {
+            justify-content: flex-end;
+          }
+        }
       }
 
-      /* display: block; */
+      & > img {
+        width: 100%;
+        height: 100%;
+        //   object-fit: cover;
+
+        object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));
+        margin-bottom: 12px;
+
+        &[data-has-title="true"] {
+          height: 85%;
+        }
+
+        /* display: block; */
+      }
     }
 
     .embla-thumbs {
@@ -398,13 +570,5 @@
       padding-left: var(--thumbs-slide-spacing);
       cursor: pointer;
     }
-    // @media (min-width: 576px) {
-    //   .embla-thumbs__slide {
-    //     flex: 0 0 15%;
-    //   }
-    // }
-    // .embla-thumbs__slide img {
-    //   width: 100%;
-    // }
   }
 }