@sc-360-v2/storefront-cms-library 0.1.93 → 0.1.95

package/dist/product-image.scss

@@ -1,20 +1,30 @@
 @use "sass:map";
 @use "sass:list";
-
 [data-div-type="element"] {
   &[data-element-type="productImage"] {
     // 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);
     // height: var(--_ctm-lt-ht);
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
 
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // 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)))
     );
 
+    &[data-view-state="full"] {
+      width: auto;
+      // height: 100%;
+      margin: 0;
+      justify-self: stretch !important;
+      align-self: stretch !important;
+      cursor: auto;
+    }
+
     & > .wrapper {
       width: 100%;
+      height: 100%;
     }
     &[data-show-shadow="false"] {
       --_show-shadow: none;
@@ -48,75 +58,6 @@
           var(--_ctm-dn-gy-wt-se-sw-cr, var(--_tst-dn-gy-wt-se-sw-cr))
       );
 
-      .embla__dots {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        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;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 75%;
-        }
-        .embla__dot {
-          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
-          -webkit-appearance: none;
-          appearance: none;
-          background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
-          touch-action: manipulation;
-          display: inline-flex;
-          text-decoration: none;
-          cursor: pointer;
-          border: 0;
-          padding: 0;
-          margin: 0;
-          // width: 0.6rem;
-          // height: 0.6rem;
-          width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
-          height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 50%;
-        }
-        .embla__dot:after {
-          // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
-          width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
-          height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          content: "";
-        }
-        .embla__dot--selected:after {
-          box-shadow: inset 0 0 0 1px var(--text-body);
-          background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
-        }
-        &[data-slider-control="Pagination Line"] {
-          .embla__dot {
-            width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
-            height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
-            background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
-
-            border-radius: 6px;
-          }
-          .embla__dot--selected:after {
-            box-shadow: inset 0 0 0 1px var(--text-body);
-            border-radius: 6px;
-            width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
-            height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
-            // background-color: #fff;
-            background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
-          }
-        }
-      }
-
       .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));
@@ -167,79 +108,6 @@
         //   margin-bottom: var(--_mb-4);
         // }
       }
-      .arrow-navigation {
-        display: flex;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 100%;
-        justify-content: space-between;
-        transform: translate(-50%, -50%);
-        //   padding-left: 20px;
-        &[data-control-type="Side"] {
-          .left-button,
-          .right-button {
-            background-color: transparent;
-          }
-        }
-        &[data-background-shape="Round"] {
-          .left-button,
-          .right-button {
-            background-color: #f2f5f5;
-            box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
-          }
-        }
-        &[data-control-type="Bottom-Overflow"] {
-          transform: translateX(-50%);
-          width: 100%;
-          justify-content: center;
-          gap: 12px;
-          top: unset;
-          bottom: 6px;
-        }
-        &[data-control-type="Bottom"] {
-          transform: unset;
-          position: static;
-          width: 100%;
-          justify-content: center;
-          gap: 12px;
-        }
-        .left-button {
-          padding: 20px;
-          border-radius: 50%;
-          border: none;
-          width: 40px;
-          height: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          outline: none;
-          margin-left: 12px;
-        }
-        .right-button {
-          border-radius: 50%;
-          border: none;
-          width: 40px;
-          height: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          outline: none;
-          margin-right: 12px;
-        }
-        .icon {
-          display: flex;
-          svg {
-            width: var(--_ctm-dn-pn-as-aw-se, var(--_tst-dn-pn-as-aw-se));
-            height: var(--_ctm-dn-pn-as-aw-se, var(--_tst-dn-pn-as-aw-se));
-            path {
-              stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
-            }
-          }
-        }
-      }
     }
 
     &[data-text-position="top"] {
@@ -319,254 +187,514 @@
         }
       }
     }
+  }
+}
+.embla {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  // overflow: hidden;
+
+  .embla__viewport {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    overflow: hidden;
 
-    .embla__viewport {
+    .embla__container {
       width: 100%;
       height: 100%;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-
-      overflow: hidden;
-      &[data-control-type="Side"] {
-        width: 70%;
-        margin: 0 auto;
+      display: grid;
+      grid-template-rows: 100%;
+      // grid-template-columns: 100%;
+      grid-template-columns: repeat(var(--_ctm-lt-is-pr-se), calc(100% / var(--_ctm-lt-is-pr-se)));
+      grid-auto-flow: column;
+      gap: var(--_ctm-lt-im-gp);
 
-        .left-button,
-        .right-button {
-          background-color: transparent;
-        }
+      .embla__slide {
+        width: 100%;
+        height: 100%;
       }
     }
-    .embla {
-      width: 100%;
-    }
+  }
+  &:not([data-display-style="Column"]) {
     .embla__container {
-      width: "100%";
-      height: 100%;
-      display: grid;
+      grid-auto-columns: calc(100% / var(--_ctm-lt-is-pr-se));
+    }
+  }
 
-      grid-auto-flow: column;
-      gap: calc(var(--_embla-gap) * 1px);
-      //   grid-auto-columns: calc(100%);
-      grid-auto-columns: calc((100% / var(--_ctm-lt-is-pr-se)) - var(--_ctm-lt-im-gp));
-      // gap: var(--_ctm-lt-im-gp);
-
-      //   &[data-control-type="Side"] {
-      //     .left-button {
-      //       background-color: transparent;
-      //     }
-      //   }
-    }
-    .embla__slide {
-      width: 100%;
-      // height: 100%;
-      display: flex;
-      // flex-direction: column;
+  &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
+    // overflow: unset;
 
-      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));
-      .slider_macro_image {
-        width: 100%;
-        height: fit-content;
+    .embla__viewport {
+      overflow: unset;
+      height: 80%;
+      flex-grow: 1;
+      &:not([data-is-builder-type="true"]) {
+        height: var(--_ctm-height);
       }
-      .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;
 
-        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))
-        );
+      .embla__container {
+        overflow: unset;
+        height: var(--_ctm-height);
+        // min-height: var(--_ctm-height);
 
-        & 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);
-        // }
-      }
+        grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
+        grid-template-rows: unset;
 
-      &[data-text-position="On Image"] {
-        .gallery-header {
-          width: 100%;
-          // height: 100%;
-          position: absolute;
+        grid-auto-flow: row;
+        &[data-overflow-hidden="true"] {
+          overflow: hidden;
         }
+      }
+    }
+  }
 
-        &[data-widget-alignment="top"] {
-          // align-items: flex-start;
+  &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
+    .embla__viewport {
+      .embla__container {
+        grid-template-rows: repeat(var(--_ctm-lt-is-pr-cn), calc(100% / var(--_ctm-lt-is-pr-cn)));
+      }
+    }
+  }
 
-          .gallery-header {
-            top: 0;
+  &[data-display-style="Rows"] {
+    // overflow: unset;
 
-            justify-content: flex-start;
-          }
-        }
-        &[data-widget-alignment="center"] {
-          // align-items: center;
+    .embla__viewport {
+      overflow: unset;
+      height: 80%;
+      flex-grow: 1;
+      &:not([data-is-builder-type="true"]) {
+        height: var(--_ctm-height);
+      }
 
-          .gallery-header {
-            top: 50%;
-            transform: translateY(-50%);
-            justify-content: center;
-          }
-        }
-        &[data-widget-alignment="bottom"] {
-          // align-items: flex-end;
-          .gallery-header {
-            bottom: 0;
+      .embla__container {
+        overflow: hidden;
+        height: var(--_ctm-height);
+        // min-height: var(--_ctm-height);
 
-            justify-content: flex-end;
-          }
-        }
-      }
+        grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
+        grid-template-rows: unset;
 
-      &[data-text-position="top"] {
-        flex-direction: column;
+        grid-auto-flow: row;
       }
+    }
+  }
 
-      &[data-text-position="bottom"] {
-        flex-direction: column-reverse;
-      }
-      &[data-text-position="left"] {
-        flex-direction: row;
+  &[data-display-style="Column"] {
+    // overflow: unset;
 
-        .gallery-header {
-          width: fit-content;
+    .embla__viewport {
+      .embla__container {
+        display: flex;
+        .embla__slide {
+          width: unset;
           height: 100%;
+          aspect-ratio: 1 / 2;
         }
-        &[data-widget-alignment="top"] {
-          align-items: flex-start;
+      }
+    }
+  }
+  &[data-display-style="Masonry"] {
+    // overflow: unset;
 
-          .gallery-header {
-            justify-content: flex-start;
+    .embla__viewport {
+      overflow: hidden;
+      height: 80%;
+      flex-grow: 1;
+      &:not([data-is-builder-type="true"]) {
+        height: var(--_ctm-height);
+      }
+      .embla__container {
+        overflow: unset;
+
+        display: block;
+        column-count: var(--_ctm-lt-is-pr-rw);
+        gap: unset;
+        column-gap: var(--_ctm-lt-im-gp);
+        // height: auto;
+
+        height: auto;
+
+        .embla__slide {
+          // break-inside: avoid;
+          margin-bottom: var(--_ctm-lt-im-gp);
+          height: unset;
+          .gallery__slide {
+            height: unset;
           }
         }
-        &[data-widget-alignment="center"] {
-          align-items: center;
+      }
+    }
+  }
 
-          .gallery-header {
-            justify-content: center;
+  .arrow-navigation {
+    display: flex;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    justify-content: space-between;
+    transform: translate(-50%, -50%);
+    //   padding-left: 20px;
+    &[data-control-type="Side"] {
+      .left-button,
+      .right-button {
+        background-color: transparent;
+      }
+    }
+    &[data-background-shape="Round"] {
+      .left-button,
+      .right-button {
+        background-color: #f2f5f5;
+        box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+    }
+    &[data-control-type="Bottom-Overflow"] {
+      transform: translateX(-50%);
+      width: 100%;
+      justify-content: center;
+      gap: 12px;
+      top: unset;
+      bottom: 6px;
+    }
+    &[data-control-type="Bottom"] {
+      transform: unset;
+      position: static;
+      width: 100%;
+      justify-content: center;
+      gap: 12px;
+      margin-top: 10px;
+    }
+    .left-button {
+      padding: 20px;
+      border-radius: 50%;
+      border: none;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      outline: none;
+      margin-left: 12px;
+      &:disabled {
+        & svg {
+          path {
+            stroke: rgb(192, 192, 192);
           }
         }
-        &[data-widget-alignment="bottom"] {
-          align-items: flex-end;
-
-          .gallery-header {
-            justify-content: flex-end;
+      }
+    }
+    .right-button {
+      border-radius: 50%;
+      border: none;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      outline: none;
+      margin-right: 12px;
+      &:disabled {
+        & svg {
+          path {
+            stroke: rgb(192, 192, 192);
           }
         }
       }
-      &[data-text-position="right"] {
-        flex-direction: row-reverse;
-        .gallery-header {
-          width: fit-content;
-          height: 100%;
+    }
+    .icon {
+      display: flex;
+      svg {
+        width: var(--_ctm-dn-pn-as-aw-se, var(--_tst-dn-pn-as-aw-se));
+        height: var(--_ctm-dn-pn-as-aw-se, var(--_tst-dn-pn-as-aw-se));
+        path {
+          stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
         }
+      }
+    }
+  }
 
-        &[data-widget-alignment="top"] {
-          align-items: flex-start;
+  &[data-control-type="Side"] {
+    .embla__viewport {
+      width: calc(100% - 120px);
+      margin-inline: auto;
+    }
+  }
 
-          .gallery-header {
-            justify-content: flex-start;
-          }
-        }
-        &[data-widget-alignment="center"] {
-          align-items: center;
+  &[data-thumbnail-placement="top"] {
+    flex-direction: column-reverse;
+  }
+  &[data-thumbnail-placement="bottom"] {
+    flex-direction: column;
+  }
+  &[data-thumbnail-placement="left"] {
+    flex-direction: row-reverse;
 
-          .gallery-header {
-            justify-content: center;
-          }
-        }
-        &[data-widget-alignment="bottom"] {
-          align-items: flex-end;
+    .embla__thumbs {
+      width: var(--_ctm-lt-tl-se);
+      height: 100%;
 
-          .gallery-header {
-            justify-content: flex-end;
-          }
+      & .embla__thumbs__container {
+        flex-direction: column;
+        height: 100%;
+      }
+    }
+  }
+  &[data-thumbnail-placement="right"] {
+    flex-direction: row;
+    .embla__thumbs {
+      width: var(--_ctm-lt-tl-se);
+      height: 100%;
+
+      & .embla__thumbs__container {
+        flex-direction: column;
+        height: 100%;
+      }
+    }
+  }
+
+  .embla__thumbs {
+    width: 100%;
+    height: var(--_ctm-lt-tl-se);
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr;
+    overflow: hidden;
+    // margin: 10px;
+    padding: 10px;
+
+    .embla__thumbs__viewport {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      overflow: hidden;
+    }
+    .embla__thumbs__container {
+      display: flex;
+      flex-direction: row;
+      margin-left: calc(var(--thumbs-slide-spacing) * -1);
+      gap: var(--_ctm-lt-tl-sg);
+      width: 100%;
+      // justify-content: center;
+      // height: 200px;
+
+      .embla__thumbs__slide {
+        min-width: var(--_ctm-lt-tl-se);
+        max-width: var(--_ctm-lt-tl-se);
+        height: var(--_ctm-lt-tl-se);
+        > img {
+          width: 100%;
+          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;
+
+    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))
+    );
 
-    .embla__slide > img {
+    & 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-position="On Image"] {
+    .gallery-header {
       width: 100%;
+      // height: 100%;
+      position: absolute;
+    }
+
+    &[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;
+  }
+
+  &[data-text-position="bottom"] {
+    flex-direction: column-reverse;
+  }
+  &[data-text-position="left"] {
+    flex-direction: row;
+
+    .gallery-header {
+      width: fit-content;
       height: 100%;
-      //   object-fit: cover;
+    }
+    &[data-widget-alignment="top"] {
+      align-items: flex-start;
 
-      object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));
-      margin-bottom: 12px;
+      .gallery-header {
+        justify-content: flex-start;
+      }
+    }
+    &[data-widget-alignment="center"] {
+      align-items: center;
 
-      &[data-has-title="true"] {
-        height: 85%;
+      .gallery-header {
+        justify-content: center;
       }
+    }
+    &[data-widget-alignment="bottom"] {
+      align-items: flex-end;
 
-      /* display: block; */
+      .gallery-header {
+        justify-content: flex-end;
+      }
+    }
+  }
+  &[data-text-position="right"] {
+    flex-direction: row-reverse;
+    .gallery-header {
+      width: fit-content;
+      height: 100%;
     }
 
-    .embla-thumbs {
-      --thumbs-slide-spacing: 0.8rem;
-      --thumbs-slide-height: 6rem;
-      margin-top: var(--thumbs-slide-spacing);
+    &[data-widget-alignment="top"] {
+      align-items: flex-start;
+
+      .gallery-header {
+        justify-content: flex-start;
+      }
     }
-    .embla-thumbs__viewport {
-      overflow: hidden;
-      margin: 20px;
+    &[data-widget-alignment="center"] {
+      align-items: center;
+
+      .gallery-header {
+        justify-content: center;
+      }
     }
-    .embla-thumbs__container {
-      display: flex;
-      flex-direction: row;
-      margin-left: calc(var(--thumbs-slide-spacing) * -1);
+    &[data-widget-alignment="bottom"] {
+      align-items: flex-end;
+
+      .gallery-header {
+        justify-content: flex-end;
+      }
     }
-    .embla-thumbs__slide {
-      flex: 0 0 22%;
-      min-width: 0;
-      padding-left: var(--thumbs-slide-spacing);
-      cursor: pointer;
+  }
+  & > img {
+    width: 100%;
+    height: 100%;
+    //   object-fit: cover;
+
+    // object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));
+    // object-fit: cover;
+
+    &[data-has-title="true"] {
+      height: 85%;
     }
+
+    /* display: block; */
+  }
+}
+
+.load__more__div {
+  display: flex;
+  justify-content: center;
+  margin-block: 12px;
+  & > button {
+    padding-inline: 24px;
+    border: 1px solid gray;
+    padding-block: 12px;
+    border-radius: 6px;
   }
 }