@sc-360-v2/storefront-cms-library 0.4.49 → 0.4.51

package/dist/product-image copy.scss

@@ -1,787 +1,787 @@
-@use "sass:map";
-@use "sass:list";
-[data-div-type="element"] {
-  &[data-element-type="gallerySlider"] {
-    // 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: 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;
-    }
-
-    .gallery-slider-element {
-      --text-high-contrast-rgb-value: 49, 49, 49;
-      --detail-medium-contrast: rgb(234, 234, 234);
-      --text-body: rgb(54, 49, 61);
-
-      position: relative;
-      background-color: var(--_ctm-dn-gy-wt-se-bd-cr, var(--_tst-dn-gy-wt-se-bd-cr));
-      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
-      display: flex;
-      flex-direction: column;
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-
-      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%;
-      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));
-      border-radius: var(--_ctm-dn-gy-wt-se-br-rs, var(--_tst-dn-gy-wt-se-br-rs));
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-dn-gy-wt-se-sw-ae, var(--_tst-dn-gy-wt-se-sw-ae))
-          var(--_ctm-dn-gy-wt-se-sw-br, var(--_tst-dn-gy-wt-se-sw-br))
-          var(--_ctm-dn-gy-wt-se-sw-sd, var(--_tst-dn-gy-wt-se-sw-sd))
-          var(--_ctm-dn-gy-wt-se-sw-cr, var(--_tst-dn-gy-wt-se-sw-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));
-        display: flex;
-        flex-direction: column;
-
-        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-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));
-        border-width: var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh, var(--_tst-dn-gy-wt-tt-cr-dn-br-wh));
-        border-radius: var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs, var(--_tst-dn-gy-wt-tt-cr-dn-br-rs));
-        box-shadow: var(
-          --_show-shadow,
-          var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae, var(--_tst-dn-gy-wt-tt-cr-dn-sw-ae))
-            var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br, var(--_tst-dn-gy-wt-tt-cr-dn-sw-br))
-            var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd, var(--_tst-dn-gy-wt-tt-cr-dn-sw-sd))
-            var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr, var(--_tst-dn-gy-wt-sw-cr))
-        );
-
-        & h3 {
-          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));
-          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-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));
-          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);
-        // }
-      }
-    }
-
-    &[data-text-position="top"] {
-      .gallery-slider-element {
-        flex-direction: column;
-      }
-    }
-    &[data-text-position="bottom"] {
-      .gallery-slider-element {
-        flex-direction: column-reverse;
-      }
-    }
-    &[data-text-position="left"] {
-      .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 {
-      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 {
-          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__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__viewport {
-          overflow: unset;
-          height: 80%;
-          flex-grow: 1;
-          &:not([data-is-builder-type="true"]) {
-            height: var(--_ctm-height);
-          }
-
-          .embla__container {
-            overflow: unset;
-            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-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="Rows"] {
-        // overflow: unset;
-
-        .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);
-
-            grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
-            grid-template-rows: unset;
-
-            grid-auto-flow: row;
-          }
-        }
-      }
-
-      &[data-display-style="Column"] {
-        // overflow: unset;
-
-        .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;
-              }
-            }
-          }
-        }
-      }
-
-      .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: 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));
-            }
-          }
-        }
-      }
-
-      &[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;
-
-        .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__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));
-          }
-        }
-      }
-
-      .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))
-        );
-
-        & 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));
-          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));
-          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;
-        }
-
-        &[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%;
-        }
-        &[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%;
-        }
-
-        &[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;
-          }
-        }
-      }
-      & > 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;
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+[data-div-type="element"] {
+  &[data-element-type="gallerySlider"] {
+    // 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: 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;
+    }
+
+    .gallery-slider-element {
+      --text-high-contrast-rgb-value: 49, 49, 49;
+      --detail-medium-contrast: rgb(234, 234, 234);
+      --text-body: rgb(54, 49, 61);
+
+      position: relative;
+      background-color: var(--_ctm-dn-gy-wt-se-bd-cr, var(--_tst-dn-gy-wt-se-bd-cr));
+      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      display: flex;
+      flex-direction: column;
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+
+      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%;
+      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));
+      border-radius: var(--_ctm-dn-gy-wt-se-br-rs, var(--_tst-dn-gy-wt-se-br-rs));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-dn-gy-wt-se-sw-ae, var(--_tst-dn-gy-wt-se-sw-ae))
+          var(--_ctm-dn-gy-wt-se-sw-br, var(--_tst-dn-gy-wt-se-sw-br))
+          var(--_ctm-dn-gy-wt-se-sw-sd, var(--_tst-dn-gy-wt-se-sw-sd))
+          var(--_ctm-dn-gy-wt-se-sw-cr, var(--_tst-dn-gy-wt-se-sw-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));
+        display: flex;
+        flex-direction: column;
+
+        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-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));
+        border-width: var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh, var(--_tst-dn-gy-wt-tt-cr-dn-br-wh));
+        border-radius: var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs, var(--_tst-dn-gy-wt-tt-cr-dn-br-rs));
+        box-shadow: var(
+          --_show-shadow,
+          var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae, var(--_tst-dn-gy-wt-tt-cr-dn-sw-ae))
+            var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br, var(--_tst-dn-gy-wt-tt-cr-dn-sw-br))
+            var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd, var(--_tst-dn-gy-wt-tt-cr-dn-sw-sd))
+            var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr, var(--_tst-dn-gy-wt-sw-cr))
+        );
+
+        & h3 {
+          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));
+          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-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));
+          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);
+        // }
+      }
+    }
+
+    &[data-text-position="top"] {
+      .gallery-slider-element {
+        flex-direction: column;
+      }
+    }
+    &[data-text-position="bottom"] {
+      .gallery-slider-element {
+        flex-direction: column-reverse;
+      }
+    }
+    &[data-text-position="left"] {
+      .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 {
+      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 {
+          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__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__viewport {
+          overflow: unset;
+          height: 80%;
+          flex-grow: 1;
+          &:not([data-is-builder-type="true"]) {
+            height: var(--_ctm-height);
+          }
+
+          .embla__container {
+            overflow: unset;
+            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-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="Rows"] {
+        // overflow: unset;
+
+        .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);
+
+            grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
+            grid-template-rows: unset;
+
+            grid-auto-flow: row;
+          }
+        }
+      }
+
+      &[data-display-style="Column"] {
+        // overflow: unset;
+
+        .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;
+              }
+            }
+          }
+        }
+      }
+
+      .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: 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));
+            }
+          }
+        }
+      }
+
+      &[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;
+
+        .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__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));
+          }
+        }
+      }
+
+      .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))
+        );
+
+        & 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));
+          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));
+          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;
+        }
+
+        &[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%;
+        }
+        &[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%;
+        }
+
+        &[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;
+          }
+        }
+      }
+      & > 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;
+      }
+    }
+  }
+}