@sc-360-v2/storefront-cms-library 0.2.43 → 0.2.45

package/dist/product-image.scss

@@ -4,7 +4,7 @@
   &[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);
     // height: var(--_ctm-lt-ht);
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
 
@@ -13,14 +13,14 @@
       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;
-    }
+    // &[data-view-state="full"] {
+    //   width: auto;
+    //   // height: 100%;
+    //   margin: 0;
+    //   justify-self: stretch !important;
+    //   align-self: stretch !important;
+    //   cursor: auto;
+    // }
 
     & > .wrapper {
       width: 100%;
@@ -192,517 +192,602 @@
         }
       }
     }
-  }
-}
-.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__container {
+    .embla {
       width: 100%;
       height: 100%;
-      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);
-
-      .embla__slide {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      // overflow: hidden;
+
+      .embla__viewport {
         width: 100%;
         height: 100%;
-      }
-    }
-  }
-  &:not([data-display-style="Column"]) {
-    .embla__container {
-      grid-auto-columns: calc(100% / var(--_ctm-lt-is-pr-se));
-    }
-  }
+        position: relative;
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
 
-  &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
-    // overflow: unset;
+        .embla__container {
+          width: 100%;
+          height: 100%;
+          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);
+          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
+            height: calc(100% - calc(var(--_ctm-dn-pn-as-aw-se) + 10px));
+          }
+          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
+            height: calc(100% - calc(var(--_ctm-dn-pn-le-le-ht) + 20px));
+          }
+          &[data-control-type="Bottom"][data-slider-control="Dots"] {
+            height: calc(100% - calc(var(--_ctm-dn-pn-ds-dt-se) + 20px));
+          }
 
-    .embla__viewport {
-      overflow: unset;
-      height: 80%;
-      flex-grow: 1;
-      &:not([data-is-builder-type="true"]) {
-        height: var(--_ctm-height);
+          .embla__slide {
+            width: 100%;
+            height: 100%;
+          }
+        }
       }
+      &:not([data-display-style="Column"]) {
+        .embla__container {
+          grid-auto-columns: calc(100% / var(--_ctm-lt-is-pr-se));
+        }
+      }
+
+      &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
+        // overflow: unset;
 
-      .embla__container {
-        overflow: unset;
-        height: var(--_ctm-height);
-        // min-height: var(--_ctm-height);
+        .embla__viewport {
+          overflow: unset;
+          height: 80%;
+          flex-grow: 1;
+          &:not([data-is-builder-type="true"]) {
+            height: var(--_ctm-height);
+          }
 
-        grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
-        grid-template-rows: unset;
+          .embla__container {
+            overflow: unset;
+            height: var(--_ctm-height);
+            // min-height: var(--_ctm-height);
 
-        grid-auto-flow: row;
-        &[data-overflow-hidden="true"] {
-          overflow: hidden;
+            grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
+            grid-template-rows: unset;
+
+            grid-auto-flow: row;
+            &[data-overflow-hidden="true"] {
+              overflow: hidden;
+            }
+          }
         }
       }
-    }
-  }
 
-  &[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)));
+      &[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))
+            );
+          }
+        }
       }
-    }
-  }
 
-  &[data-display-style="Rows"] {
-    // overflow: unset;
+      &[data-display-style="Rows"] {
+        // overflow: unset;
 
-    .embla__viewport {
-      overflow: unset;
-      height: 80%;
-      flex-grow: 1;
-      &:not([data-is-builder-type="true"]) {
-        height: var(--_ctm-height);
-      }
+        .embla__viewport {
+          overflow: unset;
+          height: 80%;
+          flex-grow: 1;
+          &:not([data-is-builder-type="true"]) {
+            height: var(--_ctm-height);
+          }
 
-      .embla__container {
-        overflow: hidden;
-        height: var(--_ctm-height);
-        // min-height: var(--_ctm-height);
+          .embla__container {
+            overflow: hidden;
+            height: var(--_ctm-height);
+            // min-height: var(--_ctm-height);
 
-        grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
-        grid-template-rows: unset;
+            grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
+            grid-template-rows: unset;
 
-        grid-auto-flow: row;
+            grid-auto-flow: row;
+          }
+        }
       }
-    }
-  }
 
-  &[data-display-style="Column"] {
-    // overflow: unset;
+      &[data-display-style="Column"] {
+        // overflow: unset;
 
-    .embla__viewport {
-      .embla__container {
-        display: flex;
-        .embla__slide {
-          width: unset;
-          height: 100%;
-          aspect-ratio: 1 / 2;
+        .embla__viewport {
+          .embla__container {
+            display: flex;
+            .embla__slide {
+              width: unset;
+              height: 100%;
+              aspect-ratio: 1 / 2;
+            }
+          }
         }
       }
-    }
-  }
-  &[data-display-style="Masonry"] {
-    // overflow: unset;
-
-    .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-display-style="Masonry"] {
+        // overflow: unset;
+
+        .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;
+              }
+            }
           }
         }
       }
-    }
-  }
 
-  .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);
+      .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;
           }
         }
-      }
-    }
-    .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-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: 10px;
+          border-radius: 50%;
+          border: none;
+          width: var(--_ctm-dn-pn-as-aw-se);
+          height: var(--_ctm-dn-pn-as-aw-se);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
+          margin-left: 12px;
+          &:disabled {
+            & svg {
+              path {
+                stroke: rgb(192, 192, 192);
+              }
+            }
+          }
+        }
+        .right-button {
+          border-radius: 50%;
+          border: none;
+          width: var(--_ctm-dn-pn-as-aw-se);
+          height: var(--_ctm-dn-pn-as-aw-se);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
+          margin-right: 12px;
+          padding: 10px;
+
+          &:disabled {
+            & svg {
+              path {
+                stroke: rgb(192, 192, 192);
+              }
+            }
+          }
+        }
+        .icon {
+          display: flex;
+          svg {
+            width: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
+            height: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
+            path {
+              stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
+            }
           }
         }
       }
-    }
-    .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-control-type="Side"] {
+        .embla__viewport {
+          width: calc(100% - 120px);
+          margin-inline: auto;
         }
       }
-    }
-  }
 
-  &[data-control-type="Side"] {
-    .embla__viewport {
-      width: calc(100% - 120px);
-      margin-inline: auto;
-    }
-  }
+      &[data-thumbnail-placement="top"] {
+        flex-direction: column-reverse;
+      }
+      &[data-thumbnail-placement="bottom"] {
+        flex-direction: column;
+      }
+      &[data-thumbnail-placement="left"] {
+        flex-direction: row-reverse;
 
-  &[data-thumbnail-placement="top"] {
-    flex-direction: column-reverse;
-  }
-  &[data-thumbnail-placement="bottom"] {
-    flex-direction: column;
-  }
-  &[data-thumbnail-placement="left"] {
-    flex-direction: row-reverse;
+        .embla__thumbs {
+          width: var(--_ctm-lt-tl-se);
+          height: 100%;
 
-    .embla__thumbs {
-      width: var(--_ctm-lt-tl-se);
-      height: 100%;
+          & .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__container {
+            flex-direction: column;
+            height: 100%;
+          }
+        }
       }
-    }
-  }
-  &[data-thumbnail-placement="right"] {
-    flex-direction: row;
-    .embla__thumbs {
-      width: var(--_ctm-lt-tl-se);
-      height: 100%;
+      .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));
 
-      & .embla__thumbs__container {
-        flex-direction: column;
-        height: 100%;
+            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));
+          }
+        }
+      }
+
+      .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%;
+            }
+          }
+        }
       }
     }
-  }
 
-  .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 {
+    .gallery__slide {
       width: 100%;
       height: 100%;
-      position: relative;
       display: flex;
-      flex-direction: column;
+      // 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;
+      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;
 
-      .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%;
+        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))
+        );
+
+        & 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);
+        // }
       }
-    }
-  }
-}
+      > img {
+        object-fit: cover;
+      }
+      &[data-text-position="On Image"] {
+        .gallery-header {
+          width: 100%;
+          // height: 100%;
+          position: absolute;
+        }
 
-.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))
-    );
+        &[data-widget-alignment="top"] {
+          // align-items: flex-start;
 
-    & 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);
-    // }
-  }
-  > img {
-    object-fit: cover;
-  }
-  &[data-text-position="On Image"] {
-    .gallery-header {
-      width: 100%;
-      // height: 100%;
-      position: absolute;
-    }
+          .gallery-header {
+            top: 0;
 
-    &[data-widget-alignment="top"] {
-      // align-items: flex-start;
+            justify-content: flex-start;
+          }
+        }
+        &[data-widget-alignment="center"] {
+          // align-items: center;
 
-      .gallery-header {
-        top: 0;
+          .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-start;
+            justify-content: flex-end;
+          }
+        }
       }
-    }
-    &[data-widget-alignment="center"] {
-      // align-items: center;
 
-      .gallery-header {
-        top: 50%;
-        transform: translateY(-50%);
-        justify-content: center;
+      &[data-text-position="top"] {
+        flex-direction: column;
       }
-    }
-    &[data-widget-alignment="bottom"] {
-      // align-items: flex-end;
-      .gallery-header {
-        bottom: 0;
 
-        justify-content: flex-end;
+      &[data-text-position="bottom"] {
+        flex-direction: column-reverse;
       }
-    }
-  }
+      &[data-text-position="left"] {
+        flex-direction: row;
 
-  &[data-text-position="top"] {
-    flex-direction: column;
-  }
+        .gallery-header {
+          width: fit-content;
+          height: 100%;
+        }
+        &[data-widget-alignment="top"] {
+          align-items: flex-start;
 
-  &[data-text-position="bottom"] {
-    flex-direction: column-reverse;
-  }
-  &[data-text-position="left"] {
-    flex-direction: row;
+          .gallery-header {
+            justify-content: flex-start;
+          }
+        }
+        &[data-widget-alignment="center"] {
+          align-items: center;
 
-    .gallery-header {
-      width: fit-content;
-      height: 100%;
-    }
-    &[data-widget-alignment="top"] {
-      align-items: flex-start;
+          .gallery-header {
+            justify-content: center;
+          }
+        }
+        &[data-widget-alignment="bottom"] {
+          align-items: flex-end;
 
-      .gallery-header {
-        justify-content: flex-start;
+          .gallery-header {
+            justify-content: flex-end;
+          }
+        }
       }
-    }
-    &[data-widget-alignment="center"] {
-      align-items: center;
+      &[data-text-position="right"] {
+        flex-direction: row-reverse;
+        .gallery-header {
+          width: fit-content;
+          height: 100%;
+        }
 
-      .gallery-header {
-        justify-content: center;
-      }
-    }
-    &[data-widget-alignment="bottom"] {
-      align-items: flex-end;
+        &[data-widget-alignment="top"] {
+          align-items: flex-start;
 
-      .gallery-header {
-        justify-content: flex-end;
-      }
-    }
-  }
-  &[data-text-position="right"] {
-    flex-direction: row-reverse;
-    .gallery-header {
-      width: fit-content;
-      height: 100%;
-    }
+          .gallery-header {
+            justify-content: flex-start;
+          }
+        }
+        &[data-widget-alignment="center"] {
+          align-items: center;
 
-    &[data-widget-alignment="top"] {
-      align-items: flex-start;
+          .gallery-header {
+            justify-content: center;
+          }
+        }
+        &[data-widget-alignment="bottom"] {
+          align-items: flex-end;
 
-      .gallery-header {
-        justify-content: flex-start;
+          .gallery-header {
+            justify-content: flex-end;
+          }
+        }
       }
-    }
-    &[data-widget-alignment="center"] {
-      align-items: center;
+      & > img {
+        width: 100%;
+        height: 100%;
+        //   object-fit: cover;
 
-      .gallery-header {
-        justify-content: center;
-      }
-    }
-    &[data-widget-alignment="bottom"] {
-      align-items: flex-end;
+        // object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));
+        // object-fit: cover;
 
-      .gallery-header {
-        justify-content: flex-end;
+        &[data-has-title="true"] {
+          height: 85%;
+        }
+
+        /* 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));
-    // object-fit: cover;
-
-    &[data-has-title="true"] {
-      height: 85%;
+    .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;
+      }
     }
-
-    /* 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;
   }
 }