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

package/dist/product-image copy.scss

@@ -0,0 +1,788 @@
+@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)), sans-serif;
+          font-size: var(--_ctm-dn-gy-wt-se-ft-se, var(--_tst-dn-gy-wt-se-ft-se));
+          font-weight: var(--_ctm-dn-gy-wt-se-ft-wt, var(--_tst-dn-gy-wt-se-ft-wt));
+          font-style: var(--_ctm-dn-gy-wt-se-ft-se-ic, var(--_tst-dn-gy-wt-se-ft-se-ic));
+          text-align: var(--_ctm-dn-gy-wt-se-tt-an, var(--_tst-dn-gy-wt-se-se-an));
+          letter-spacing: var(--_ctm-dn-gy-wt-se-lr-sg, var(--_tst-dn-gy-wt-se-lr-sg));
+          line-height: var(--_ctm-dn-gy-wt-se-le-ht, var(--_tst-dn-gy-wt-se-le-ht));
+          text-decoration: var(--_ctm-dn-gy-wt-se-ue,);
+        }
+        & p {
+          color: var(--_ctm-dn-gy-wt-se-cr-dc, var(--_tst-dn-gy-wt-se-cr-dc));
+          font-family: var(--_ctm-dn-gy-wt-se-ft-fy-dc, var(--_tst-dn-gy-wt-se-ft-fy-dc)),
+            sans-serif;
+          font-size: var(--_ctm-dn-gy-wt-se-ft-se-dc, var(--_tst-dn-gy-wt-se-ft-se-dc));
+          font-weight: var(--_ctm-dn-gy-wt-se-ft-wt-dc, var(--_tst-dn-gy-wt-se-ft-wt-dc));
+          font-style: var(--_ctm-dn-gy-wt-se-ft-se-ic-dc, var(--_tst-dn-gy-wt-se-ft-se-ic-dc));
+          text-align: var(--_ctm-dn-gy-wt-se-tt-an-dc, var(--_tst-dn-gy-wt-se-se-an-dc));
+          letter-spacing: var(--_ctm-dn-gy-wt-se-lr-sg-dc, var(--_tst-dn-gy-wt-se-lr-sg-dc));
+          line-height: var(--_ctm-dn-gy-wt-se-le-ht-dc, var(--_tst-dn-gy-wt-se-le-ht-dc));
+          text-decoration: var(--_ctm-dn-gy-wt-se-ue-dc,);
+        }
+        // h3 {
+        //   margin-bottom: var(--_mb-4);
+        // }
+      }
+    }
+
+    &[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)), 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;
+        }
+
+        &[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;
+      }
+    }
+  }
+}