@sc-360-v2/storefront-cms-library 0.5.71 → 0.5.73

package/dist/gallery-slider-temp.scss

@@ -1,1776 +1,1458 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-$overflowSelector: ".flex__overflow";
-
-[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-mob-ele-nw-wh-vl,
-            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
-          )
-      )
-    );
-    // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-    &:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
-      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-    }
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-
-    --_aspect-ratio: calc(
-      1 *
-        (
-          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
-            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
-        )
-    );
-    &[data-view-state="full"] {
-      // aspect-ratio: 1/0.01;
-      & > .wrapper {
-        & > div {
-          height: 100%;
-        }
-      }
-      img {
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    .arrow-navigation {
-      pointer-events: none;
-    }
-    .arrow-navigation > button {
-      pointer-events: all;
-    }
-
-    // &[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-mob-dn-gy-wt-se-bd-cr,
-        var(--_ctm-tab-dn-gy-wt-se-bd-cr, var(--_ctm-dn-gy-wt-se-bd-cr))
-      );
-
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-
-      display: flex;
-      flex-direction: column;
-
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-
-      gap: var(
-        --_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg,
-        var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg))
-      );
-
-      width: 100%;
-      height: 100%;
-
-      border-color: var(
-        --_ctm-mob-dn-gy-wt-se-br-cr,
-        var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr))
-      );
-
-      border-style: var(
-        --_ctm-mob-dn-gy-wt-se-br-se,
-        var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se))
-      );
-
-      border-width: var(
-        --_ctm-mob-dn-gy-wt-se-br-wh,
-        var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh))
-      );
-
-      border-radius: var(
-        --_ctm-mob-dn-gy-wt-se-br-rs,
-        var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs))
-      );
-
-      box-shadow: var(
-        --_show-shadow,
-        var(
-            --_ctm-mob-dn-gy-wt-se-sw-ae,
-            var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))
-          )
-          var(
-            --_ctm-mob-dn-gy-wt-se-sw-br,
-            var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))
-          )
-          var(
-            --_ctm-mob-dn-gy-wt-se-sw-sd,
-            var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))
-          )
-          var(
-            --_ctm-mob-dn-gy-wt-se-sw-cr,
-            var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-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-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg))
-        );
-
-        padding-block: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg))
-        );
-
-        padding-inline: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg))
-        );
-
-        background-color: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr))
-        );
-
-        // Text Container Width. 100% is the previous behaviour, so an unset width
-        // still spans the widget.
-        width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, 100%);
-        // Shrink to that width, and never below the height the wrapped text needs.
-        min-width: 0;
-        flex: 0 0 auto;
-
-        border-color: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr))
-        );
-
-        border-style: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-dn-br-se,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se))
-        );
-
-        border-width: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh))
-        );
-
-        border-radius: var(
-          --_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs,
-          var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs))
-        );
-
-        box-shadow: var(
-          --_show-shadow,
-          var(
-              --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae,
-              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))
-            )
-            var(
-              --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br,
-              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))
-            )
-            var(
-              --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd,
-              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))
-            )
-            var(
-              --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr,
-              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr))
-            )
-        );
-
-        & h3 {
-          color: var(
-            --_ctm-mob-dn-gy-wt-se-cr,
-            var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))
-          );
-          font-family: var(
-            --_ctm-mob-dn-gy-wt-se-ft-fy,
-            var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))
-          );
-          font-size: var(
-            --_ctm-mob-dn-gy-wt-se-ft-se,
-            var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se))
-          );
-          font-weight: var(
-            --_ctm-mob-dn-gy-wt-se-ft-wt,
-            var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt))
-          );
-          font-style: var(
-            --_ctm-mob-dn-gy-wt-se-ft-se-ic,
-            var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic))
-          );
-          text-align: var(
-            --_ctm-mob-dn-gy-wt-se-tt-an,
-            var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an))
-          );
-          letter-spacing: var(
-            --_ctm-mob-dn-gy-wt-se-lr-sg,
-            var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg))
-          );
-          line-height: var(
-            --_ctm-mob-dn-gy-wt-se-le-ht,
-            var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht))
-          );
-          text-decoration: var(
-            --_ctm-mob-dn-gy-wt-se-ue,
-            var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue))
-          );
-          text-transform: var(
-            --_ctm-mob-dn-gy-wt-se-tt-tm,
-            var(--_ctm-tab-dn-gy-wt-se-tt-tm, var(--_ctm-dn-gy-wt-se-tt-tm, none))
-          );
-          word-wrap: var(
-            --_ctm-mob-dn-gy-wt-se-wd-wp,
-            var(--_ctm-tab-dn-gy-wt-se-wd-wp, var(--_ctm-dn-gy-wt-se-wd-wp, normal))
-          );
-          word-break: var(
-            --_ctm-mob-dn-gy-wt-se-wd-bk,
-            var(--_ctm-tab-dn-gy-wt-se-wd-bk, var(--_ctm-dn-gy-wt-se-wd-bk, normal))
-          );
-
-          // Text Overflow toggle in the typography panel; the line count rides in on
-          // --_sf-line-clamp from the element.
-          &#{$overflowSelector} {
-            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-          }
-        }
-
-        & p {
-          color: var(
-            --_ctm-mob-dn-gy-wt-se-cr-dc,
-            var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))
-          );
-          font-family: var(
-            --_ctm-mob-dn-gy-wt-se-ft-fy-dc,
-            var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))
-          );
-          font-size: var(
-            --_ctm-mob-dn-gy-wt-se-ft-se-dc,
-            var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc))
-          );
-          font-weight: var(
-            --_ctm-mob-dn-gy-wt-se-ft-wt-dc,
-            var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc))
-          );
-          font-style: var(
-            --_ctm-mob-dn-gy-wt-se-ft-se-ic-dc,
-            var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc))
-          );
-          text-align: var(
-            --_ctm-mob-dn-gy-wt-se-tt-an-dc,
-            var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc))
-          );
-          letter-spacing: var(
-            --_ctm-mob-dn-gy-wt-se-lr-sg-dc,
-            var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc))
-          );
-          line-height: var(
-            --_ctm-mob-dn-gy-wt-se-le-ht-dc,
-            var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc))
-          );
-          text-decoration: var(
-            --_ctm-mob-dn-gy-wt-se-ue-dc,
-            var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc))
-          );
-          text-transform: var(
-            --_ctm-mob-dn-gy-wt-se-tt-tm-dc,
-            var(--_ctm-tab-dn-gy-wt-se-tt-tm-dc, var(--_ctm-dn-gy-wt-se-tt-tm-dc, none))
-          );
-          word-wrap: var(
-            --_ctm-mob-dn-gy-wt-se-wd-wp-dc,
-            var(--_ctm-tab-dn-gy-wt-se-wd-wp-dc, var(--_ctm-dn-gy-wt-se-wd-wp-dc, normal))
-          );
-          word-break: var(
-            --_ctm-mob-dn-gy-wt-se-wd-bk-dc,
-            var(--_ctm-tab-dn-gy-wt-se-wd-bk-dc, var(--_ctm-dn-gy-wt-se-wd-bk-dc, normal))
-          );
-
-          &#{$overflowSelector} {
-            @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
-          }
-        }
-
-        // 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;
-      }
-    }
-    // Gallery Text and Item Alignment places the text container horizontally when
-    // it is stacked above/below the gallery — only visible once its width is under
-    // 100%. Left/right positions use [data-widget-alignment] for the cross axis.
-    &:not([data-text-position="left"]):not([data-text-position="right"]) {
-      &[data-text-alignment="left"] .gallery-header {
-        margin-right: auto;
-      }
-      &[data-text-alignment="center"] .gallery-header {
-        margin-inline: auto;
-      }
-      &[data-text-alignment="right"] .gallery-header {
-        margin-left: auto;
-      }
-    }
-
-    &[data-text-position="left"] {
-      .gallery-slider-element {
-        flex-direction: row;
-      }
-      // Child combinator: as a plain descendant this also matched the per-item captions
-      // inside the slides, so the widget's text position resized those too.
-      .gallery-slider-element > .gallery-header {
-        // Beside the slider, Text Container Width is a ceiling rather than a fixed width
-        // (what the schema comment describes). It is always emitted as 100%, so used as
-        // `width` it made the header's flex basis the whole row: no free space for the
-        // slider to grow into and no overflow to shrink anyone, leaving the slider 0px.
-        width: fit-content;
-        max-width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, 100%);
-        min-width: 0;
-        flex-shrink: 1;
-        height: 100%;
-      }
-      // The slider takes whatever the caption leaves.
-      .gallery-slider-element > .embla {
-        flex: 1 1 0;
-        min-width: 0;
-      }
-      &[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"] {
-      // Same pair as the "left" block above — see the comments there.
-      .gallery-slider-element > .gallery-header {
-        width: fit-content;
-        max-width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, 100%);
-        min-width: 0;
-        flex-shrink: 1;
-        height: 100%;
-      }
-      .gallery-slider-element > .embla {
-        flex: 1 1 0;
-        min-width: 0;
-      }
-      .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: repeat(
-            var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
-            calc(
-              100% /
-                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
-            )
-          );
-
-          grid-auto-flow: column;
-          gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
-
-          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-dn-pn-as-aw-se,
-                      var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-                    ) +
-                    10px
-                )
-            );
-          }
-
-          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-dn-pn-le-le-ht,
-                      var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
-                    ) +
-                    20px
-                )
-            );
-          }
-
-          &[data-control-type="Bottom"][data-slider-control="Dots"] {
-            height: calc(
-              100% - calc(
-                  var(
-                      --_ctm-mob-dn-pn-ds-dt-se,
-                      var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-                    ) +
-                    20px
-                )
-            );
-          }
-
-          .embla__slide {
-            width: 100%;
-            height: 100%;
-            // Grid item: without this it cannot shrink below its longest word, so a long
-            // caption widens the whole track past the widget.
-            min-width: 0;
-          }
-        }
-      }
-      &:not([data-display-style="Column"]) {
-        .embla__container {
-          grid-auto-columns: calc(
-            100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, 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-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
-          }
-
-          .embla__container {
-            overflow: unset;
-            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
-            // min-height: var(--_ctm-mob-height, var(--_ctm-tab-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-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
-              calc(
-                100% /
-                  var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, 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(1, 1fr);
-            grid-template-rows: unset;
-            grid-auto-flow: row;
-            .embla__slide {
-              aspect-ratio: 7 / 2;
-            }
-          }
-        }
-      }
-
-      &[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-mob-lt-is-pr-rw,
-              var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
-            );
-            gap: unset;
-
-            column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
-
-            height: auto;
-
-            .embla__slide {
-              margin-bottom: var(
-                --_ctm-mob-lt-im-gp,
-                var(--_ctm-tab-lt-im-gp, 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="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;
-        }
-      }
-      :is(.left-button, .right-button) {
-        // background: prepareMediaVariable(--_ctm-dn-pn-as-bd-cr);
-        @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 10%);
-
-        &:not(:disabled):hover {
-          @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 20%);
-        }
-      }
-      .left-button {
-        padding: 10px;
-        border-radius: 50%;
-        border: none;
-        width: var(
-          --_ctm-mob-dn-pn-as-aw-se,
-          var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-        );
-        height: var(
-          --_ctm-mob-dn-pn-as-aw-se,
-          var(--_ctm-tab-dn-pn-as-aw-se, 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-mob-dn-pn-as-aw-se,
-          var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-        );
-        height: var(
-          --_ctm-mob-dn-pn-as-aw-se,
-          var(--_ctm-tab-dn-pn-as-aw-se, 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-mob-dn-pn-as-aw-se,
-                var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-              ) *
-              0.5
-          );
-          height: calc(
-            var(
-                --_ctm-mob-dn-pn-as-aw-se,
-                var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
-              ) *
-              0.5
-          );
-
-          path {
-            stroke: var(
-              --_ctm-mob-dn-pn-as-aw-cr,
-              var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
-            );
-          }
-        }
-      }
-
-      &[data-control-type="Side"] {
-        .left-button,
-        .right-button {
-          // background-color: transparent;
-        }
-      }
-      &[data-background-shape="Round"] {
-        .left-button,
-        .right-button {
-          // background-color: #f2f5f5;
-          // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-      }
-      &[data-background-shape="None"] {
-        .left-button,
-        .right-button {
-          border-radius: 0;
-        }
-      }
-      &[data-background-shape="Square"] {
-        .left-button,
-        .right-button {
-          border-radius: 4px;
-        }
-      }
-
-      &[data-control-type="Side"] {
-        .embla__viewport {
-          width: calc(100% - 120px);
-          margin-inline: auto;
-        }
-        .left-button {
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-        .right-button {
-          position: absolute;
-
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
-
-      &[data-display-style="Thumbnail"] {
-        .embla__viewport {
-          flex: 1;
-          min-height: 0;
-          height: 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-mob-lt-tl-wh, var(--_ctm-tab-lt-tl-wh, var(--_ctm-lt-tl-wh)));
-          height: 100%;
-          flex-direction: column;
-          margin-top: 0;
-          margin-right: var(
-            --_ctm-mob-lt-sr-ad-tl-gp,
-            var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))
-          );
-
-          & .embla__thumbs__container {
-            flex-direction: column;
-            height: 100%;
-            justify-content: prepareMediaVariable(--_ctm-lt-an-is);
-          }
-
-          .thumb-prev-button,
-          .thumb-next-button {
-            span {
-              transform: rotate(90deg);
-            }
-          }
-
-          .embla__thumbs__viewport {
-            min-height: 0;
-          }
-        }
-      }
-      &[data-thumbnail-placement="right"] {
-        flex-direction: row;
-        .embla__thumbs {
-          width: var(--_ctm-mob-lt-tl-wh, var(--_ctm-tab-lt-tl-wh, var(--_ctm-lt-tl-wh)));
-          height: 100%;
-          flex-direction: column;
-          margin-top: 0;
-          margin-left: var(
-            --_ctm-mob-lt-sr-ad-tl-gp,
-            var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))
-          );
-
-          & .embla__thumbs__container {
-            flex-direction: column;
-            height: 100%;
-            justify-content: prepareMediaVariable(--_ctm-lt-an-is);
-          }
-
-          .thumb-prev-button,
-          .thumb-next-button {
-            span {
-              transform: rotate(90deg);
-            }
-          }
-
-          .embla__thumbs__viewport {
-            min-height: 0;
-          }
-        }
-      }
-      .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%;
-        }
-        // Pagination Dots (design > Pagination Dots). Border and shadow go on the
-        // ::after overlay — that pseudo-element is the visible dot, the button behind it
-        // is only the hit area. There is deliberately no radius control: dots stay
-        // circles, so the 50% is fixed. The Pagination Line variant overrides these.
-        &[data-dots-show-border="false"] {
-          --_show-pn-ds-border: none;
-        }
-        // A transparent shadow rather than `none`, so the selected dot can list this
-        // next to its inset ring without the whole declaration going invalid.
-        &[data-dots-show-shadow="false"] {
-          --_show-pn-ds-shadow: 0 0 0 0 transparent;
-        }
-
-        $pnDsShadow: var(
-          --_show-pn-ds-shadow,
-          var(--_ctm-mob-dn-pn-ds-sw-ae, var(--_ctm-tab-dn-pn-ds-sw-ae, var(--_ctm-dn-pn-ds-sw-ae)))
-            var(
-              --_ctm-mob-dn-pn-ds-sw-br,
-              var(--_ctm-tab-dn-pn-ds-sw-br, var(--_ctm-dn-pn-ds-sw-br))
-            )
-            var(
-              --_ctm-mob-dn-pn-ds-sw-sd,
-              var(--_ctm-tab-dn-pn-ds-sw-sd, var(--_ctm-dn-pn-ds-sw-sd))
-            )
-            var(
-              --_ctm-mob-dn-pn-ds-sw-cr,
-              var(--_ctm-tab-dn-pn-ds-sw-cr, var(--_ctm-dn-pn-ds-sw-cr))
-            )
-        );
-
-        .embla__dot {
-          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
-          -webkit-appearance: none;
-          appearance: none;
-          background-color: var(
-            --_ctm-mob-dn-pn-ds-or-dt-cr,
-            var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-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-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-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-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-          height: var(
-            --_ctm-mob-dn-pn-ds-dt-se,
-            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
-          );
-
-          // The overlay is sized to the button, so the border has to grow inwards or the
-          // dot would render larger than its configured Dot Size.
-          box-sizing: border-box;
-          border-color: var(
-            --_show-pn-ds-border,
-            var(
-              --_ctm-mob-dn-pn-ds-br-cr,
-              var(--_ctm-tab-dn-pn-ds-br-cr, var(--_ctm-dn-pn-ds-br-cr))
-            )
-          );
-          border-style: var(
-            --_show-pn-ds-border,
-            var(
-              --_ctm-mob-dn-pn-ds-br-se,
-              var(--_ctm-tab-dn-pn-ds-br-se, var(--_ctm-dn-pn-ds-br-se))
-            )
-          );
-          border-width: var(
-            --_show-pn-ds-border,
-            var(
-              --_ctm-mob-dn-pn-ds-br-wh,
-              var(--_ctm-tab-dn-pn-ds-br-wh, var(--_ctm-dn-pn-ds-br-wh))
-            )
-          );
-          box-shadow: $pnDsShadow;
-
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          content: "";
-        }
-        .embla__dot--selected:after {
-          // Keeps the existing 1px ring on the active dot and still honours a configured
-          // shadow — this rule would otherwise shadow the one above it entirely.
-          box-shadow: $pnDsShadow;
-          background-color: var(
-            --_ctm-mob-dn-pn-ds-ct-dt-cr,
-            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
-          );
-        }
-        // Pagination Line (design > Pagination Line). Border, border radius and shadow
-        // sit on the line itself. The two toggles arrive as data attributes from the
-        // element; `none` short-circuits the whole var chain the way Item Style does.
-        // The 6px radius fallback keeps pages saved before Border Radius existed
-        // looking as they did.
-        &[data-slider-control="Pagination Line"] {
-          &[data-line-show-border="false"] {
-            --_show-pn-le-border: none;
-          }
-          &[data-line-show-shadow="false"] {
-            --_show-pn-le-shadow: none;
-          }
-
-          .embla__dot {
-            width: var(
-              --_ctm-mob-dn-pn-le-le-wh,
-              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
-            );
-            height: var(
-              --_ctm-mob-dn-pn-le-le-ht,
-              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
-            );
-            // Draw the border inside the configured Line Width / Height rather than
-            // adding to it, so the track stays the size set in the panel.
-            box-sizing: border-box;
-            background-color: var(
-              --_ctm-mob-dn-pn-le-or-le-cr,
-              var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
-            );
-
-            border-color: var(
-              --_show-pn-le-border,
-              var(
-                --_ctm-mob-dn-pn-le-br-cr,
-                var(--_ctm-tab-dn-pn-le-br-cr, var(--_ctm-dn-pn-le-br-cr))
-              )
-            );
-            border-style: var(
-              --_show-pn-le-border,
-              var(
-                --_ctm-mob-dn-pn-le-br-se,
-                var(--_ctm-tab-dn-pn-le-br-se, var(--_ctm-dn-pn-le-br-se))
-              )
-            );
-            border-width: var(
-              --_show-pn-le-border,
-              var(
-                --_ctm-mob-dn-pn-le-br-wh,
-                var(--_ctm-tab-dn-pn-le-br-wh, var(--_ctm-dn-pn-le-br-wh))
-              )
-            );
-            border-radius: var(
-              --_ctm-mob-dn-pn-le-br-rs,
-              var(--_ctm-tab-dn-pn-le-br-rs, var(--_ctm-dn-pn-le-br-rs, 6px))
-            );
-
-            box-shadow: var(
-              --_show-pn-le-shadow,
-              var(
-                  --_ctm-mob-dn-pn-le-sw-ae,
-                  var(--_ctm-tab-dn-pn-le-sw-ae, var(--_ctm-dn-pn-le-sw-ae))
-                )
-                var(
-                  --_ctm-mob-dn-pn-le-sw-br,
-                  var(--_ctm-tab-dn-pn-le-sw-br, var(--_ctm-dn-pn-le-sw-br))
-                )
-                var(
-                  --_ctm-mob-dn-pn-le-sw-sd,
-                  var(--_ctm-tab-dn-pn-le-sw-sd, var(--_ctm-dn-pn-le-sw-sd))
-                )
-                var(
-                  --_ctm-mob-dn-pn-le-sw-cr,
-                  var(--_ctm-tab-dn-pn-le-sw-cr, var(--_ctm-dn-pn-le-sw-cr))
-                )
-            );
-          }
-
-          // The Pagination Dots rules above style `.embla__dot:after` unscoped, so the
-          // line's overlay would otherwise inherit the Dots' border, circular radius and
-          // shadow — a second, wrongly-shaped outline on top of the line's own border.
-          // The line carries its border on the track, so the overlay just fills whatever
-          // the border leaves.
-          .embla__dot:after {
-            width: 100%;
-            height: 100%;
-            border: 0;
-            box-shadow: none;
-            border-radius: inherit;
-          }
-
-          .embla__dot--selected:after {
-            background-color: var(
-              --_ctm-mob-dn-pn-le-ct-le-cr,
-              var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
-            );
-          }
-        }
-      }
-
-      .embla__thumbs {
-        width: 100%;
-        height: var(--_ctm-mob-lt-tl-ht, var(--_ctm-tab-lt-tl-ht, var(--_ctm-lt-tl-ht)));
-        margin-top: var(
-          --_ctm-mob-lt-sr-ad-tl-gp,
-          var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))
-        );
-
-        position: relative;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        overflow: hidden;
-
-        // Thumbnail arrow shared styles
-        .thumb-prev-button,
-        .thumb-next-button {
-          flex-shrink: 0;
-          padding: 6px;
-          border-radius: 50%;
-          border: none;
-          cursor: pointer;
-          outline: none;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background-color: transparent;
-          z-index: 1;
-
-          width: var(
-            --_ctm-mob-dn-tl-as-aw-se,
-            var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
-          );
-          height: var(
-            --_ctm-mob-dn-tl-as-aw-se,
-            var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
-          );
-
-          span {
-            display: flex;
-            svg {
-              width: calc(
-                var(
-                    --_ctm-mob-dn-tl-as-aw-se,
-                    var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
-                  ) *
-                  0.5
-              );
-              height: calc(
-                var(
-                    --_ctm-mob-dn-tl-as-aw-se,
-                    var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
-                  ) *
-                  0.5
-              );
-              path {
-                stroke: var(
-                  --_ctm-mob-dn-tl-as-aw-cr,
-                  var(--_ctm-tab-dn-tl-as-aw-cr, var(--_ctm-dn-tl-as-aw-cr))
-                );
-              }
-            }
-          }
-
-          &:disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-          }
-        }
-
-        &[data-background-shape="Round"] {
-          .thumb-prev-button,
-          .thumb-next-button {
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            &:not(:disabled):hover {
-              @include BgColorLighter(var(--_ctm-dn-tl-as-bd-cr), 5%);
-            }
-          }
-        }
-        &[data-background-shape="None"] {
-          .thumb-prev-button,
-          .thumb-next-button {
-            border-radius: 0;
-          }
-        }
-        &[data-background-shape="Square"] {
-          .thumb-prev-button,
-          .thumb-next-button {
-            border-radius: 4px;
-          }
-        }
-
-        .embla__thumbs__viewport {
-          width: 100%;
-          height: 100%;
-          flex: 1;
-          min-width: 0;
-          position: relative;
-          display: flex;
-          flex-direction: column;
-
-          overflow: hidden;
-        }
-        .embla__thumbs__container {
-          display: flex;
-          flex-direction: row;
-          justify-content: prepareMediaVariable(--_ctm-lt-an-is);
-          gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
-
-          width: 100%;
-
-          .embla__thumbs__slide {
-            flex-shrink: 0;
-            box-sizing: border-box;
-            max-width: var(--_ctm-mob-lt-tl-wh, var(--_ctm-tab-lt-tl-wh, var(--_ctm-lt-tl-wh)));
-            height: var(--_ctm-mob-lt-tl-ht, var(--_ctm-tab-lt-tl-ht, var(--_ctm-lt-tl-ht)));
-            cursor: pointer;
-            overflow: hidden;
-            padding: var(--_ctm-mob-lt-tl-pg, var(--_ctm-tab-lt-tl-pg, var(--_ctm-lt-tl-pg)));
-
-            // thumbnailStyle - hoverState
-            &:hover {
-              --_sf-hr-bd-cr: var(
-                --_ctm-mob-dn-tl-se-hr-se-bd-cr,
-                var(--_ctm-tab-dn-tl-se-hr-se-bd-cr, var(--_ctm-dn-tl-se-hr-se-bd-cr))
-              );
-              --_sf-hr-br-cr: var(
-                --_ctm-mob-dn-tl-se-hr-se-br-cr,
-                var(--_ctm-tab-dn-tl-se-hr-se-br-cr, var(--_ctm-dn-tl-se-hr-se-br-cr))
-              );
-              --_sf-hr-br-se: var(
-                --_ctm-mob-dn-tl-se-hr-se-br-se,
-                var(--_ctm-tab-dn-tl-se-hr-se-br-se, var(--_ctm-dn-tl-se-hr-se-br-se))
-              );
-              --_sf-hr-br-wh: var(
-                --_ctm-mob-dn-tl-se-hr-se-br-wh,
-                var(--_ctm-tab-dn-tl-se-hr-se-br-wh, var(--_ctm-dn-tl-se-hr-se-br-wh))
-              );
-              --_sf-hr-br-rs: var(
-                --_ctm-mob-dn-tl-se-hr-se-br-rs,
-                var(--_ctm-tab-dn-tl-se-hr-se-br-rs, var(--_ctm-dn-tl-se-hr-se-br-rs))
-              );
-              --_sf-hr-sw-ae: var(
-                --_ctm-mob-dn-tl-se-hr-se-sw-ae,
-                var(--_ctm-tab-dn-tl-se-hr-se-sw-ae, var(--_ctm-dn-tl-se-hr-se-sw-ae))
-              );
-              --_sf-hr-sw-br: var(
-                --_ctm-mob-dn-tl-se-hr-se-sw-br,
-                var(--_ctm-tab-dn-tl-se-hr-se-sw-br, var(--_ctm-dn-tl-se-hr-se-sw-br))
-              );
-              --_sf-hr-sw-sd: var(
-                --_ctm-mob-dn-tl-se-hr-se-sw-sd,
-                var(--_ctm-tab-dn-tl-se-hr-se-sw-sd, var(--_ctm-dn-tl-se-hr-se-sw-sd))
-              );
-              --_sf-hr-sw-cr: var(
-                --_ctm-mob-dn-tl-se-hr-se-sw-cr,
-                var(--_ctm-tab-dn-tl-se-hr-se-sw-cr, var(--_ctm-dn-tl-se-hr-se-sw-cr))
-              );
-            }
-
-            // thumbnailStyle - defaultState
-            background-color: var(
-              --_sf-hr-bd-cr,
-              prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr)
-            );
-            border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-cr));
-            border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-se));
-            border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-wh));
-            border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-rs));
-            box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae))
-              var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br))
-              var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd))
-              var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
-
-            // thumbnailStyle - selectedState
-            &[data-selected="true"] {
-              --_sf-sd-bd-cr: var(
-                --_ctm-mob-dn-tl-se-sd-se-bd-cr,
-                var(--_ctm-tab-dn-tl-se-sd-se-bd-cr, var(--_ctm-dn-tl-se-sd-se-bd-cr))
-              );
-              --_sf-sd-br-cr: var(
-                --_ctm-mob-dn-tl-se-sd-se-br-cr,
-                var(--_ctm-tab-dn-tl-se-sd-se-br-cr, var(--_ctm-dn-tl-se-sd-se-br-cr))
-              );
-              --_sf-sd-br-se: var(
-                --_ctm-mob-dn-tl-se-sd-se-br-se,
-                var(--_ctm-tab-dn-tl-se-sd-se-br-se, var(--_ctm-dn-tl-se-sd-se-br-se))
-              );
-              --_sf-sd-br-wh: var(
-                --_ctm-mob-dn-tl-se-sd-se-br-wh,
-                var(--_ctm-tab-dn-tl-se-sd-se-br-wh, var(--_ctm-dn-tl-se-sd-se-br-wh))
-              );
-              --_sf-sd-br-rs: var(
-                --_ctm-mob-dn-tl-se-sd-se-br-rs,
-                var(--_ctm-tab-dn-tl-se-sd-se-br-rs, var(--_ctm-dn-tl-se-sd-se-br-rs))
-              );
-              --_sf-sd-sw-ae: var(
-                --_ctm-mob-dn-tl-se-sd-se-sw-ae,
-                var(--_ctm-tab-dn-tl-se-sd-se-sw-ae, var(--_ctm-dn-tl-se-sd-se-sw-ae))
-              );
-              --_sf-sd-sw-br: var(
-                --_ctm-mob-dn-tl-se-sd-se-sw-br,
-                var(--_ctm-tab-dn-tl-se-sd-se-sw-br, var(--_ctm-dn-tl-se-sd-se-sw-br))
-              );
-              --_sf-sd-sw-sd: var(
-                --_ctm-mob-dn-tl-se-sd-se-sw-sd,
-                var(--_ctm-tab-dn-tl-se-sd-se-sw-sd, var(--_ctm-dn-tl-se-sd-se-sw-sd))
-              );
-              --_sf-sd-sw-cr: var(
-                --_ctm-mob-dn-tl-se-sd-se-sw-cr,
-                var(--_ctm-tab-dn-tl-se-sd-se-sw-cr, var(--_ctm-dn-tl-se-sd-se-sw-cr))
-              );
-
-              background-color: var(
-                --_sf-sd-bd-cr,
-                prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr)
-              );
-              border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-cr));
-              border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-se));
-              border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-wh));
-              border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-rs));
-              box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae))
-                var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br))
-                var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd))
-                var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
-            }
-
-            & img {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-            }
-          }
-        }
-      }
-    }
-
-    .gallery__slide {
-      // Containing block for the item header. With text position "On Image" that header
-      // is `position: absolute`; without this it resolved against `.embla__viewport`, so
-      // `width: 100%` spanned the whole slider and it sat centred across every slide
-      // instead of over its own image. It also puts the slide back in the containing
-      // block chain, so the `overflow: hidden` below actually clips the header.
-      position: relative;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      // Same reason as the slide above — let the caption wrap to the slide.
-      min-width: 0;
-      // flex-direction: column;
-
-      background-color: var(
-        --_ctm-mob-dn-im-se-bd-cr,
-        var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
-      );
-
-      border-color: var(
-        --_ctm-mob-dn-im-se-br-cr,
-        var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
-      );
-
-      border-style: var(
-        --_ctm-mob-dn-im-se-br-se,
-        var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
-      );
-
-      border-width: var(
-        --_ctm-mob-dn-im-se-br-wh,
-        var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
-      );
-
-      border-radius: var(
-        --_ctm-mob-dn-im-se-br-rs,
-        var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
-      );
-
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
-          var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br)))
-          var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd)))
-          var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr)))
-      );
-
-      gap: var(
-        --_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
-        var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg))
-      );
-
-      // Clip the image to the item's border radius; without this the img's
-      // square corners paint over the rounded container.
-      overflow: hidden;
-
-      .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-mob-dn-im-tt-cr-lt-te-ad-dn-sg,
-          var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg))
-        );
-
-        padding-block: var(
-          --_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg,
-          var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg))
-        );
-
-        padding-inline: var(
-          --_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg,
-          var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg))
-        );
-
-        background-color: var(
-          --_ctm-mob-dn-im-tt-cr-dn-bd-cr,
-          var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr))
-        );
-
-        width: 100%;
-        // Shrink to the slide, and never below the height the wrapped caption needs —
-        // the same pair the widget-level header uses.
-        min-width: 0;
-        flex: 0 0 auto;
-
-        border-color: var(
-          --_ctm-mob-dn-im-tt-cr-dn-br-cr,
-          var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr))
-        );
-
-        border-style: var(
-          --_ctm-mob-dn-im-tt-cr-dn-br-se,
-          var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se))
-        );
-
-        border-width: var(
-          --_ctm-mob-dn-im-tt-cr-dn-br-wh,
-          var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh))
-        );
-
-        border-radius: var(
-          --_ctm-mob-dn-im-tt-cr-dn-br-rs,
-          var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs))
-        );
-
-        box-shadow: var(
-          --_show-shadow,
-          var(
-              --_ctm-mob-dn-im-tt-cr-dn-sw-ae,
-              var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))
-            )
-            var(
-              --_ctm-mob-dn-im-tt-cr-dn-sw-br,
-              var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))
-            )
-            var(
-              --_ctm-mob-dn-im-tt-cr-dn-sw-sd,
-              var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))
-            )
-            var(
-              --_ctm-mob-dn-im-tt-cr-dn-sw-cr,
-              var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr))
-            )
-        );
-
-        & h3 {
-          color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
-
-          font-family: var(
-            --_ctm-mob-dn-im-se-ft-fy,
-            var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
-          );
-          text-transform: var(
-            --_ctm-mob-dn-im-se-tt-tm,
-            var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm))
-          );
-          word-wrap: var(
-            --_ctm-mob-dn-im-se-wd-wp,
-            var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp))
-          );
-          word-break: var(
-            --_ctm-mob-dn-im-se-wd-bk,
-            var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk))
-          );
-
-          &#{$overflowSelector} {
-            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
-          }
-
-          font-size: var(
-            --_ctm-mob-dn-im-se-ft-se,
-            var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
-          );
-
-          font-weight: var(
-            --_ctm-mob-dn-im-se-ft-wt,
-            var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))
-          );
-
-          font-style: var(
-            --_ctm-mob-dn-im-se-ft-se-ic,
-            var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))
-          );
-
-          text-align: var(
-            --_ctm-mob-dn-im-se-tt-an,
-            var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))
-          );
-
-          letter-spacing: var(
-            --_ctm-mob-dn-im-se-lr-sg,
-            var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))
-          );
-
-          line-height: var(
-            --_ctm-mob-dn-im-se-le-ht,
-            var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))
-          );
-
-          text-decoration: var(
-            --_ctm-mob-dn-im-se-ue,
-            var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue))
-          );
-        }
-
-        & p {
-          color: var(
-            --_ctm-mob-dn-im-se-cr-dc,
-            var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))
-          );
-
-          font-family: var(
-            --_ctm-mob-dn-im-se-ft-fy-dc,
-            var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
-          );
-          text-transform: var(
-            --_ctm-mob-dn-im-se-tt-tm-dc,
-            var(--_ctm-tab-dn-im-se-tt-tm-dc, var(--_ctm-dn-im-se-tt-tm-dc))
-          );
-          word-wrap: var(
-            --_ctm-mob-dn-im-se-wd-wp-dc,
-            var(--_ctm-tab-dn-im-se-wd-wp-dc, var(--_ctm-dn-im-se-wd-wp-dc))
-          );
-          word-break: var(
-            --_ctm-mob-dn-im-se-wd-bk-dc,
-            var(--_ctm-tab-dn-im-se-wd-bk-dc, var(--_ctm-dn-im-se-wd-bk-dc))
-          );
-
-          &#{$overflowSelector} {
-            @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
-          }
-
-          font-size: var(
-            --_ctm-mob-dn-im-se-ft-se-dc,
-            var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc))
-          );
-
-          font-weight: var(
-            --_ctm-mob-dn-im-se-ft-wt-dc,
-            var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc))
-          );
-
-          font-style: var(
-            --_ctm-mob-dn-im-se-ft-se-ic-dc,
-            var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc))
-          );
-
-          text-align: var(
-            --_ctm-mob-dn-im-se-tt-an-dc,
-            var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc))
-          );
-
-          letter-spacing: var(
-            --_ctm-mob-dn-im-se-lr-sg-dc,
-            var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc))
-          );
-
-          line-height: var(
-            --_ctm-mob-dn-im-se-le-ht-dc,
-            var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc))
-          );
-
-          text-decoration: var(
-            --_ctm-mob-dn-im-se-ue-dc,
-            var(--_ctm-tab-dn-im-se-ue-dc, 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 {
-          // The item's own Text Container Width, not the widget's. This read
-          // --_ctm-dn-gy-wt-lt-tt-cr-wh, which is always emitted as 100%; combined with
-          // the header's `flex: 0 0 auto` it never gave any of that width back, so the
-          // image was squeezed to 0px and vanished. There is no item-level control yet,
-          // so this falls back to fit-content and the caption sizes to its own text.
-          width: fit-content;
-          max-width: prepareMediaVariable(--_ctm-dn-im-lt-tt-cr-wh, 100%);
-          min-width: 0;
-          // Beside the image the caption has to be able to give way. The base rule's
-          // flex-shrink 0 is right for the stacked positions, not for these.
-          flex-shrink: 1;
-          height: 100%;
-        }
-
-        // The image takes whatever the caption leaves. Scoped to the row directions —
-        // in top/bottom the main axis is vertical and a flex-basis here would break it.
-        > img {
-          flex: 1 1 0;
-          min-width: 0;
-        }
-        &[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 {
-          // The item's own Text Container Width, not the widget's. This read
-          // --_ctm-dn-gy-wt-lt-tt-cr-wh, which is always emitted as 100%; combined with
-          // the header's `flex: 0 0 auto` it never gave any of that width back, so the
-          // image was squeezed to 0px and vanished. There is no item-level control yet,
-          // so this falls back to fit-content and the caption sizes to its own text.
-          width: fit-content;
-          max-width: prepareMediaVariable(--_ctm-dn-im-lt-tt-cr-wh, 100%);
-          min-width: 0;
-          // Beside the image the caption has to be able to give way. The base rule's
-          // flex-shrink 0 is right for the stacked positions, not for these.
-          flex-shrink: 1;
-          height: 100%;
-        }
-
-        // The image takes whatever the caption leaves. Scoped to the row directions —
-        // in top/bottom the main axis is vertical and a flex-basis here would break it.
-        > img {
-          flex: 1 1 0;
-          min-width: 0;
-        }
-
-        &[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";
+@use "./functions.scss" as *;
+
+$overflowSelector: ".flex__overflow";
+
+[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-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
+
+    // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+    &:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
+      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+    }
+
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+    --_aspect-ratio: calc(1 * (var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) / var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))));
+
+    &[data-view-state="full"] {
+
+      // aspect-ratio: 1/0.01;
+      &>.wrapper {
+        &>div {
+          height: 100%;
+        }
+      }
+
+      img {
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .arrow-navigation {
+      pointer-events: none;
+    }
+
+    .arrow-navigation>button {
+      pointer-events: all;
+    }
+
+    // &[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-mob-dn-gy-wt-se-bd-cr,
+          var(--_ctm-tab-dn-gy-wt-se-bd-cr, var(--_ctm-dn-gy-wt-se-bd-cr)));
+
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+
+      display: flex;
+      flex-direction: column;
+
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+
+      gap: var(--_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg,
+          var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg)));
+
+      width: 100%;
+      height: 100%;
+
+      border-color: var(--_ctm-mob-dn-gy-wt-se-br-cr,
+          var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr)));
+
+      border-style: var(--_ctm-mob-dn-gy-wt-se-br-se,
+          var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se)));
+
+      border-width: var(--_ctm-mob-dn-gy-wt-se-br-wh,
+          var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh)));
+
+      border-radius: var(--_ctm-mob-dn-gy-wt-se-br-rs,
+          var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs)));
+
+      box-shadow: var(--_show-shadow,
+          var(--_ctm-mob-dn-gy-wt-se-sw-ae,
+            var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))) var(--_ctm-mob-dn-gy-wt-se-sw-br,
+            var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))) var(--_ctm-mob-dn-gy-wt-se-sw-sd,
+            var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))) var(--_ctm-mob-dn-gy-wt-se-sw-cr,
+            var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-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-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
+            var(--_ctm-tab-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg)));
+
+        padding-block: var(--_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg,
+            var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg)));
+
+        padding-inline: var(--_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg,
+            var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg)));
+
+        background-color: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr,
+            var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr)));
+
+        // Text Container Width. 100% is the previous behaviour, so an unset width
+        // still spans the widget.
+        width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, 100%);
+        // Shrink to that width, and never below the height the wrapped text needs.
+        min-width: 0;
+        flex: 0 0 auto;
+
+        border-color: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
+            var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr)));
+
+        border-style: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-se,
+            var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se)));
+
+        border-width: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh,
+            var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh)));
+
+        border-radius: var(--_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs,
+            var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs)));
+
+        box-shadow: var(--_show-shadow,
+            var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae,
+              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))) var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br,
+              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))) var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd,
+              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))) var(--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr,
+              var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr))));
+
+        & h3 {
+          color: var(--_ctm-mob-dn-gy-wt-se-cr,
+              var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr)));
+          font-family: var(--_ctm-mob-dn-gy-wt-se-ft-fy,
+              var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy)));
+          font-size: var(--_ctm-mob-dn-gy-wt-se-ft-se,
+              var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se)));
+          font-weight: var(--_ctm-mob-dn-gy-wt-se-ft-wt,
+              var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt)));
+          font-style: var(--_ctm-mob-dn-gy-wt-se-ft-se-ic,
+              var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic)));
+          text-align: var(--_ctm-mob-dn-gy-wt-se-tt-an,
+              var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an)));
+          letter-spacing: var(--_ctm-mob-dn-gy-wt-se-lr-sg,
+              var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg)));
+          line-height: var(--_ctm-mob-dn-gy-wt-se-le-ht,
+              var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht)));
+          text-decoration: var(--_ctm-mob-dn-gy-wt-se-ue,
+              var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue)));
+          text-transform: var(--_ctm-mob-dn-gy-wt-se-tt-tm,
+              var(--_ctm-tab-dn-gy-wt-se-tt-tm, var(--_ctm-dn-gy-wt-se-tt-tm, none)));
+          word-wrap: var(--_ctm-mob-dn-gy-wt-se-wd-wp,
+              var(--_ctm-tab-dn-gy-wt-se-wd-wp, var(--_ctm-dn-gy-wt-se-wd-wp, normal)));
+          word-break: var(--_ctm-mob-dn-gy-wt-se-wd-bk,
+              var(--_ctm-tab-dn-gy-wt-se-wd-bk, var(--_ctm-dn-gy-wt-se-wd-bk, normal)));
+
+          // Text Overflow toggle in the typography panel; the line count rides in on
+          // --_sf-line-clamp from the element.
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
+        }
+
+        & p {
+          color: var(--_ctm-mob-dn-gy-wt-se-cr-dc,
+              var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc)));
+          font-family: var(--_ctm-mob-dn-gy-wt-se-ft-fy-dc,
+              var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc)));
+          font-size: var(--_ctm-mob-dn-gy-wt-se-ft-se-dc,
+              var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc)));
+          font-weight: var(--_ctm-mob-dn-gy-wt-se-ft-wt-dc,
+              var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc)));
+          font-style: var(--_ctm-mob-dn-gy-wt-se-ft-se-ic-dc,
+              var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc)));
+          text-align: var(--_ctm-mob-dn-gy-wt-se-tt-an-dc,
+              var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc)));
+          letter-spacing: var(--_ctm-mob-dn-gy-wt-se-lr-sg-dc,
+              var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc)));
+          line-height: var(--_ctm-mob-dn-gy-wt-se-le-ht-dc,
+              var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc)));
+          text-decoration: var(--_ctm-mob-dn-gy-wt-se-ue-dc,
+              var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc)));
+          text-transform: var(--_ctm-mob-dn-gy-wt-se-tt-tm-dc,
+              var(--_ctm-tab-dn-gy-wt-se-tt-tm-dc, var(--_ctm-dn-gy-wt-se-tt-tm-dc, none)));
+          word-wrap: var(--_ctm-mob-dn-gy-wt-se-wd-wp-dc,
+              var(--_ctm-tab-dn-gy-wt-se-wd-wp-dc, var(--_ctm-dn-gy-wt-se-wd-wp-dc, normal)));
+          word-break: var(--_ctm-mob-dn-gy-wt-se-wd-bk-dc,
+              var(--_ctm-tab-dn-gy-wt-se-wd-bk-dc, var(--_ctm-dn-gy-wt-se-wd-bk-dc, normal)));
+
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+          }
+        }
+
+        // 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;
+      }
+    }
+
+    // Gallery Text and Item Alignment places the text container horizontally when
+    // it is stacked above/below the gallery — only visible once its width is under
+    // 100%. Left/right positions use [data-widget-alignment] for the cross axis.
+    &:not([data-text-position="left"]):not([data-text-position="right"]) {
+      &[data-text-alignment="left"] .gallery-header {
+        margin-right: auto;
+      }
+
+      &[data-text-alignment="center"] .gallery-header {
+        margin-inline: auto;
+      }
+
+      &[data-text-alignment="right"] .gallery-header {
+        margin-left: auto;
+      }
+    }
+
+    &[data-text-position="left"] {
+      .gallery-slider-element {
+        flex-direction: row;
+      }
+
+      // Child combinator: as a plain descendant this also matched the per-item captions
+      // inside the slides, so the widget's text position resized those too.
+      .gallery-slider-element>.gallery-header {
+        // Beside the slider, Text Container Width is a ceiling rather than a fixed width
+        // (what the schema comment describes). It is always emitted as 100%, so used as
+        // `width` it made the header's flex basis the whole row: no free space for the
+        // slider to grow into and no overflow to shrink anyone, leaving the slider 0px.
+        width: fit-content;
+        max-width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, 100%);
+        min-width: 0;
+        flex-shrink: 1;
+        height: 100%;
+      }
+
+      // The slider takes whatever the caption leaves.
+      .gallery-slider-element>.embla {
+        flex: 1 1 0;
+        min-width: 0;
+      }
+
+      &[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"] {
+
+      // Same pair as the "left" block above — see the comments there.
+      .gallery-slider-element>.gallery-header {
+        width: fit-content;
+        max-width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, 100%);
+        min-width: 0;
+        flex-shrink: 1;
+        height: 100%;
+      }
+
+      .gallery-slider-element>.embla {
+        flex: 1 1 0;
+        min-width: 0;
+      }
+
+      .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: repeat(var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
+              calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))));
+
+          grid-auto-flow: column;
+          gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
+
+          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
+            height: calc(100% - calc(var(--_ctm-mob-dn-pn-as-aw-se,
+                    var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) + 10px));
+          }
+
+          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
+            height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht,
+                    var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px));
+          }
+
+          &[data-control-type="Bottom"][data-slider-control="Dots"] {
+            height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
+                    var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
+          }
+
+          .embla__slide {
+            width: 100%;
+            height: 100%;
+            // Grid item: without this it cannot shrink below its longest word, so a long
+            // caption widens the whole track past the widget.
+            min-width: 0;
+          }
+        }
+      }
+
+      &:not([data-display-style="Column"]) {
+        .embla__container {
+          grid-auto-columns: calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, 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-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+          }
+
+          .embla__container {
+            overflow: unset;
+            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
+            // min-height: var(--_ctm-mob-height, var(--_ctm-tab-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-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
+                calc(100% / var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, 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(1, 1fr);
+            grid-template-rows: unset;
+            grid-auto-flow: row;
+
+            .embla__slide {
+              aspect-ratio: 7 / 2;
+            }
+          }
+        }
+      }
+
+      &[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-mob-lt-is-pr-rw,
+                var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw)));
+            gap: unset;
+
+            column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
+
+            height: auto;
+
+            .embla__slide {
+              margin-bottom: var(--_ctm-mob-lt-im-gp,
+                  var(--_ctm-tab-lt-im-gp, 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="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;
+        }
+      }
+
+      :is(.left-button, .right-button) {
+        // background: prepareMediaVariable(--_ctm-dn-pn-as-bd-cr);
+        @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 10%);
+
+        &:not(:disabled):hover {
+          @include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 20%);
+        }
+      }
+
+      .left-button {
+        padding: 10px;
+        border-radius: 50%;
+        border: none;
+        width: var(--_ctm-mob-dn-pn-as-aw-se,
+            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
+        height: var(--_ctm-mob-dn-pn-as-aw-se,
+            var(--_ctm-tab-dn-pn-as-aw-se, 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-mob-dn-pn-as-aw-se,
+            var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
+        height: var(--_ctm-mob-dn-pn-as-aw-se,
+            var(--_ctm-tab-dn-pn-as-aw-se, 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-mob-dn-pn-as-aw-se,
+                var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
+          height: calc(var(--_ctm-mob-dn-pn-as-aw-se,
+                var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
+
+          path {
+            stroke: var(--_ctm-mob-dn-pn-as-aw-cr,
+                var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)));
+          }
+        }
+      }
+
+      &[data-control-type="Side"] {
+
+        .left-button,
+        .right-button {
+          // background-color: transparent;
+        }
+      }
+
+      &[data-background-shape="Round"] {
+
+        .left-button,
+        .right-button {
+          // background-color: #f2f5f5;
+          // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+      }
+
+      &[data-background-shape="None"] {
+
+        .left-button,
+        .right-button {
+          border-radius: 0;
+        }
+      }
+
+      &[data-background-shape="Square"] {
+
+        .left-button,
+        .right-button {
+          border-radius: 4px;
+        }
+      }
+
+      &[data-control-type="Side"] {
+        .embla__viewport {
+          width: calc(100% - 120px);
+          margin-inline: auto;
+        }
+
+        .left-button {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        .right-button {
+          position: absolute;
+
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+
+      &[data-display-style="Thumbnail"] {
+        .embla__viewport {
+          flex: 1;
+          min-height: 0;
+          height: 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-mob-lt-tl-wh, var(--_ctm-tab-lt-tl-wh, var(--_ctm-lt-tl-wh)));
+          height: 100%;
+          flex-direction: column;
+          margin-top: 0;
+          margin-right: var(--_ctm-mob-lt-sr-ad-tl-gp,
+              var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp)));
+
+          & .embla__thumbs__container {
+            flex-direction: column;
+            height: 100%;
+            justify-content: prepareMediaVariable(--_ctm-lt-an-is);
+          }
+
+          .thumb-prev-button,
+          .thumb-next-button {
+            span {
+              transform: rotate(90deg);
+            }
+          }
+
+          .embla__thumbs__viewport {
+            min-height: 0;
+          }
+        }
+      }
+
+      &[data-thumbnail-placement="right"] {
+        flex-direction: row;
+
+        .embla__thumbs {
+          width: var(--_ctm-mob-lt-tl-wh, var(--_ctm-tab-lt-tl-wh, var(--_ctm-lt-tl-wh)));
+          height: 100%;
+          flex-direction: column;
+          margin-top: 0;
+          margin-left: var(--_ctm-mob-lt-sr-ad-tl-gp,
+              var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp)));
+
+          & .embla__thumbs__container {
+            flex-direction: column;
+            height: 100%;
+            justify-content: prepareMediaVariable(--_ctm-lt-an-is);
+          }
+
+          .thumb-prev-button,
+          .thumb-next-button {
+            span {
+              transform: rotate(90deg);
+            }
+          }
+
+          .embla__thumbs__viewport {
+            min-height: 0;
+          }
+        }
+      }
+
+      .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%;
+        }
+
+        // Pagination Dots (design > Pagination Dots). Border and shadow go on the
+        // ::after overlay — that pseudo-element is the visible dot, the button behind it
+        // is only the hit area. There is deliberately no radius control: dots stay
+        // circles, so the 50% is fixed. The Pagination Line variant overrides these.
+        &[data-dots-show-border="false"] {
+          --_show-pn-ds-border: none;
+        }
+
+        // A transparent shadow rather than `none`, so the selected dot can list this
+        // next to its inset ring without the whole declaration going invalid.
+        &[data-dots-show-shadow="false"] {
+          --_show-pn-ds-shadow: 0 0 0 0 transparent;
+        }
+
+        $pnDsShadow: var(--_show-pn-ds-shadow,
+            var(--_ctm-mob-dn-pn-ds-sw-ae, var(--_ctm-tab-dn-pn-ds-sw-ae, var(--_ctm-dn-pn-ds-sw-ae))) var(--_ctm-mob-dn-pn-ds-sw-br,
+              var(--_ctm-tab-dn-pn-ds-sw-br, var(--_ctm-dn-pn-ds-sw-br))) var(--_ctm-mob-dn-pn-ds-sw-sd,
+              var(--_ctm-tab-dn-pn-ds-sw-sd, var(--_ctm-dn-pn-ds-sw-sd))) var(--_ctm-mob-dn-pn-ds-sw-cr,
+              var(--_ctm-tab-dn-pn-ds-sw-cr, var(--_ctm-dn-pn-ds-sw-cr))));
+
+        .embla__dot {
+          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+          -webkit-appearance: none;
+          appearance: none;
+          background-color: var(--_ctm-mob-dn-pn-ds-or-dt-cr,
+              var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-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-mob-dn-pn-ds-dt-se,
+              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
+          height: var(--_ctm-mob-dn-pn-ds-dt-se,
+              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-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-mob-dn-pn-ds-dt-se,
+              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
+          height: var(--_ctm-mob-dn-pn-ds-dt-se,
+              var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
+
+          // The overlay is sized to the button, so the border has to grow inwards or the
+          // dot would render larger than its configured Dot Size.
+          box-sizing: border-box;
+          border-color: var(--_show-pn-ds-border,
+              var(--_ctm-mob-dn-pn-ds-br-cr,
+                var(--_ctm-tab-dn-pn-ds-br-cr, var(--_ctm-dn-pn-ds-br-cr))));
+          border-style: var(--_show-pn-ds-border,
+              var(--_ctm-mob-dn-pn-ds-br-se,
+                var(--_ctm-tab-dn-pn-ds-br-se, var(--_ctm-dn-pn-ds-br-se))));
+          border-width: var(--_show-pn-ds-border,
+              var(--_ctm-mob-dn-pn-ds-br-wh,
+                var(--_ctm-tab-dn-pn-ds-br-wh, var(--_ctm-dn-pn-ds-br-wh))));
+          box-shadow: $pnDsShadow;
+
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          content: "";
+        }
+
+        .embla__dot--selected:after {
+          // Keeps the existing 1px ring on the active dot and still honours a configured
+          // shadow — this rule would otherwise shadow the one above it entirely.
+          box-shadow: $pnDsShadow;
+          background-color: var(--_ctm-mob-dn-pn-ds-ct-dt-cr,
+              var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr)));
+        }
+
+        // Pagination Line (design > Pagination Line). Border, border radius and shadow
+        // sit on the line itself. The two toggles arrive as data attributes from the
+        // element; `none` short-circuits the whole var chain the way Item Style does.
+        // The 6px radius fallback keeps pages saved before Border Radius existed
+        // looking as they did.
+        &[data-slider-control="Pagination Line"] {
+          &[data-line-show-border="false"] {
+            --_show-pn-le-border: none;
+          }
+
+          &[data-line-show-shadow="false"] {
+            --_show-pn-le-shadow: none;
+          }
+
+          .embla__dot {
+            width: var(--_ctm-mob-dn-pn-le-le-wh,
+                var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
+            height: var(--_ctm-mob-dn-pn-le-le-ht,
+                var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
+            // Draw the border inside the configured Line Width / Height rather than
+            // adding to it, so the track stays the size set in the panel.
+            box-sizing: border-box;
+            background-color: var(--_ctm-mob-dn-pn-le-or-le-cr,
+                var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr)));
+
+            border-color: var(--_show-pn-le-border,
+                var(--_ctm-mob-dn-pn-le-br-cr,
+                  var(--_ctm-tab-dn-pn-le-br-cr, var(--_ctm-dn-pn-le-br-cr))));
+            border-style: var(--_show-pn-le-border,
+                var(--_ctm-mob-dn-pn-le-br-se,
+                  var(--_ctm-tab-dn-pn-le-br-se, var(--_ctm-dn-pn-le-br-se))));
+            border-width: var(--_show-pn-le-border,
+                var(--_ctm-mob-dn-pn-le-br-wh,
+                  var(--_ctm-tab-dn-pn-le-br-wh, var(--_ctm-dn-pn-le-br-wh))));
+            border-radius: var(--_ctm-mob-dn-pn-le-br-rs,
+                var(--_ctm-tab-dn-pn-le-br-rs, var(--_ctm-dn-pn-le-br-rs, 6px)));
+
+            box-shadow: var(--_show-pn-le-shadow,
+                var(--_ctm-mob-dn-pn-le-sw-ae,
+                  var(--_ctm-tab-dn-pn-le-sw-ae, var(--_ctm-dn-pn-le-sw-ae))) var(--_ctm-mob-dn-pn-le-sw-br,
+                  var(--_ctm-tab-dn-pn-le-sw-br, var(--_ctm-dn-pn-le-sw-br))) var(--_ctm-mob-dn-pn-le-sw-sd,
+                  var(--_ctm-tab-dn-pn-le-sw-sd, var(--_ctm-dn-pn-le-sw-sd))) var(--_ctm-mob-dn-pn-le-sw-cr,
+                  var(--_ctm-tab-dn-pn-le-sw-cr, var(--_ctm-dn-pn-le-sw-cr))));
+          }
+
+          // The Pagination Dots rules above style `.embla__dot:after` unscoped, so the
+          // line's overlay would otherwise inherit the Dots' border, circular radius and
+          // shadow — a second, wrongly-shaped outline on top of the line's own border.
+          // The line carries its border on the track, so the overlay just fills whatever
+          // the border leaves.
+          .embla__dot:after {
+            width: 100%;
+            height: 100%;
+            border: 0;
+            box-shadow: none;
+            border-radius: inherit;
+          }
+
+          .embla__dot--selected:after {
+            background-color: var(--_ctm-mob-dn-pn-le-ct-le-cr,
+                var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr)));
+          }
+        }
+      }
+
+      .embla__thumbs {
+        width: 100%;
+        height: var(--_ctm-mob-lt-tl-ht, var(--_ctm-tab-lt-tl-ht, var(--_ctm-lt-tl-ht)));
+        margin-top: var(--_ctm-mob-lt-sr-ad-tl-gp,
+            var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp)));
+
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        overflow: hidden;
+
+        // Thumbnail arrow shared styles
+        .thumb-prev-button,
+        .thumb-next-button {
+          flex-shrink: 0;
+          padding: 6px;
+          border-radius: 50%;
+          border: none;
+          cursor: pointer;
+          outline: none;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: transparent;
+          z-index: 1;
+
+          width: var(--_ctm-mob-dn-tl-as-aw-se,
+              var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px)));
+          height: var(--_ctm-mob-dn-tl-as-aw-se,
+              var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px)));
+
+          span {
+            display: flex;
+
+            svg {
+              width: calc(var(--_ctm-mob-dn-tl-as-aw-se,
+                    var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))) * 0.5);
+              height: calc(var(--_ctm-mob-dn-tl-as-aw-se,
+                    var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))) * 0.5);
+
+              path {
+                stroke: var(--_ctm-mob-dn-tl-as-aw-cr,
+                    var(--_ctm-tab-dn-tl-as-aw-cr, var(--_ctm-dn-tl-as-aw-cr)));
+              }
+            }
+          }
+
+          &:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+          }
+        }
+
+        &[data-background-shape="Round"] {
+
+          .thumb-prev-button,
+          .thumb-next-button {
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+            &:not(:disabled):hover {
+              @include BgColorLighter(var(--_ctm-dn-tl-as-bd-cr), 5%);
+            }
+          }
+        }
+
+        &[data-background-shape="None"] {
+
+          .thumb-prev-button,
+          .thumb-next-button {
+            border-radius: 0;
+          }
+        }
+
+        &[data-background-shape="Square"] {
+
+          .thumb-prev-button,
+          .thumb-next-button {
+            border-radius: 4px;
+          }
+        }
+
+        .embla__thumbs__viewport {
+          width: 100%;
+          height: 100%;
+          flex: 1;
+          min-width: 0;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+
+          overflow: hidden;
+        }
+
+        .embla__thumbs__container {
+          display: flex;
+          flex-direction: row;
+          justify-content: prepareMediaVariable(--_ctm-lt-an-is);
+          gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
+
+          width: 100%;
+
+          .embla__thumbs__slide {
+            flex-shrink: 0;
+            box-sizing: border-box;
+            max-width: var(--_ctm-mob-lt-tl-wh, var(--_ctm-tab-lt-tl-wh, var(--_ctm-lt-tl-wh)));
+            height: var(--_ctm-mob-lt-tl-ht, var(--_ctm-tab-lt-tl-ht, var(--_ctm-lt-tl-ht)));
+            cursor: pointer;
+            overflow: hidden;
+            padding: var(--_ctm-mob-lt-tl-pg, var(--_ctm-tab-lt-tl-pg, var(--_ctm-lt-tl-pg)));
+
+            // thumbnailStyle - hoverState
+            &:hover {
+              --_sf-hr-bd-cr: var(--_ctm-mob-dn-tl-se-hr-se-bd-cr,
+                  var(--_ctm-tab-dn-tl-se-hr-se-bd-cr, var(--_ctm-dn-tl-se-hr-se-bd-cr)));
+              --_sf-hr-br-cr: var(--_ctm-mob-dn-tl-se-hr-se-br-cr,
+                  var(--_ctm-tab-dn-tl-se-hr-se-br-cr, var(--_ctm-dn-tl-se-hr-se-br-cr)));
+              --_sf-hr-br-se: var(--_ctm-mob-dn-tl-se-hr-se-br-se,
+                  var(--_ctm-tab-dn-tl-se-hr-se-br-se, var(--_ctm-dn-tl-se-hr-se-br-se)));
+              --_sf-hr-br-wh: var(--_ctm-mob-dn-tl-se-hr-se-br-wh,
+                  var(--_ctm-tab-dn-tl-se-hr-se-br-wh, var(--_ctm-dn-tl-se-hr-se-br-wh)));
+              --_sf-hr-br-rs: var(--_ctm-mob-dn-tl-se-hr-se-br-rs,
+                  var(--_ctm-tab-dn-tl-se-hr-se-br-rs, var(--_ctm-dn-tl-se-hr-se-br-rs)));
+              --_sf-hr-sw-ae: var(--_ctm-mob-dn-tl-se-hr-se-sw-ae,
+                  var(--_ctm-tab-dn-tl-se-hr-se-sw-ae, var(--_ctm-dn-tl-se-hr-se-sw-ae)));
+              --_sf-hr-sw-br: var(--_ctm-mob-dn-tl-se-hr-se-sw-br,
+                  var(--_ctm-tab-dn-tl-se-hr-se-sw-br, var(--_ctm-dn-tl-se-hr-se-sw-br)));
+              --_sf-hr-sw-sd: var(--_ctm-mob-dn-tl-se-hr-se-sw-sd,
+                  var(--_ctm-tab-dn-tl-se-hr-se-sw-sd, var(--_ctm-dn-tl-se-hr-se-sw-sd)));
+              --_sf-hr-sw-cr: var(--_ctm-mob-dn-tl-se-hr-se-sw-cr,
+                  var(--_ctm-tab-dn-tl-se-hr-se-sw-cr, var(--_ctm-dn-tl-se-hr-se-sw-cr)));
+            }
+
+            // thumbnailStyle - defaultState
+            background-color: var(--_sf-hr-bd-cr,
+              prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr));
+            border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-cr));
+            border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-se));
+            border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-wh));
+            border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-rs));
+            box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
+
+            // thumbnailStyle - selectedState
+            &[data-selected="true"] {
+              --_sf-sd-bd-cr: var(--_ctm-mob-dn-tl-se-sd-se-bd-cr,
+                  var(--_ctm-tab-dn-tl-se-sd-se-bd-cr, var(--_ctm-dn-tl-se-sd-se-bd-cr)));
+              --_sf-sd-br-cr: var(--_ctm-mob-dn-tl-se-sd-se-br-cr,
+                  var(--_ctm-tab-dn-tl-se-sd-se-br-cr, var(--_ctm-dn-tl-se-sd-se-br-cr)));
+              --_sf-sd-br-se: var(--_ctm-mob-dn-tl-se-sd-se-br-se,
+                  var(--_ctm-tab-dn-tl-se-sd-se-br-se, var(--_ctm-dn-tl-se-sd-se-br-se)));
+              --_sf-sd-br-wh: var(--_ctm-mob-dn-tl-se-sd-se-br-wh,
+                  var(--_ctm-tab-dn-tl-se-sd-se-br-wh, var(--_ctm-dn-tl-se-sd-se-br-wh)));
+              --_sf-sd-br-rs: var(--_ctm-mob-dn-tl-se-sd-se-br-rs,
+                  var(--_ctm-tab-dn-tl-se-sd-se-br-rs, var(--_ctm-dn-tl-se-sd-se-br-rs)));
+              --_sf-sd-sw-ae: var(--_ctm-mob-dn-tl-se-sd-se-sw-ae,
+                  var(--_ctm-tab-dn-tl-se-sd-se-sw-ae, var(--_ctm-dn-tl-se-sd-se-sw-ae)));
+              --_sf-sd-sw-br: var(--_ctm-mob-dn-tl-se-sd-se-sw-br,
+                  var(--_ctm-tab-dn-tl-se-sd-se-sw-br, var(--_ctm-dn-tl-se-sd-se-sw-br)));
+              --_sf-sd-sw-sd: var(--_ctm-mob-dn-tl-se-sd-se-sw-sd,
+                  var(--_ctm-tab-dn-tl-se-sd-se-sw-sd, var(--_ctm-dn-tl-se-sd-se-sw-sd)));
+              --_sf-sd-sw-cr: var(--_ctm-mob-dn-tl-se-sd-se-sw-cr,
+                  var(--_ctm-tab-dn-tl-se-sd-se-sw-cr, var(--_ctm-dn-tl-se-sd-se-sw-cr)));
+
+              background-color: var(--_sf-sd-bd-cr,
+                  prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr));
+              border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-cr));
+              border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-se));
+              border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-wh));
+              border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-rs));
+              box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
+            }
+
+            & img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+          }
+        }
+      }
+    }
+
+    .gallery__slide {
+      // Containing block for the item header. With text position "On Image" that header
+      // is `position: absolute`; without this it resolved against `.embla__viewport`, so
+      // `width: 100%` spanned the whole slider and it sat centred across every slide
+      // instead of over its own image. It also puts the slide back in the containing
+      // block chain, so the `overflow: hidden` below actually clips the header.
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      // Same reason as the slide above — let the caption wrap to the slide.
+      min-width: 0;
+      // flex-direction: column;
+
+      background-color: var(--_ctm-mob-dn-im-se-bd-cr,
+          var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr)));
+
+      border-color: var(--_ctm-mob-dn-im-se-br-cr,
+          var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr)));
+
+      border-style: var(--_ctm-mob-dn-im-se-br-se,
+          var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se)));
+
+      border-width: var(--_ctm-mob-dn-im-se-br-wh,
+          var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh)));
+
+      border-radius: var(--_ctm-mob-dn-im-se-br-rs,
+          var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs)));
+
+      box-shadow: var(--_show-shadow,
+          var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))) var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))) var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))) var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))));
+
+      gap: var(--_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
+          var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg)));
+
+      // Clip the image to the item's border radius; without this the img's
+      // square corners paint over the rounded container.
+      overflow: hidden;
+
+      .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-mob-dn-im-tt-cr-lt-te-ad-dn-sg,
+            var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg)));
+
+        padding-block: var(--_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg,
+            var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg)));
+
+        padding-inline: var(--_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg,
+            var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg)));
+
+        background-color: var(--_ctm-mob-dn-im-tt-cr-dn-bd-cr,
+            var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr)));
+
+        width: 100%;
+        // Shrink to the slide, and never below the height the wrapped caption needs —
+        // the same pair the widget-level header uses.
+        min-width: 0;
+        flex: 0 0 auto;
+
+        border-color: var(--_ctm-mob-dn-im-tt-cr-dn-br-cr,
+            var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr)));
+
+        border-style: var(--_ctm-mob-dn-im-tt-cr-dn-br-se,
+            var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se)));
+
+        border-width: var(--_ctm-mob-dn-im-tt-cr-dn-br-wh,
+            var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh)));
+
+        border-radius: var(--_ctm-mob-dn-im-tt-cr-dn-br-rs,
+            var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs)));
+
+        box-shadow: var(--_show-shadow,
+            var(--_ctm-mob-dn-im-tt-cr-dn-sw-ae,
+              var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))) var(--_ctm-mob-dn-im-tt-cr-dn-sw-br,
+              var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))) var(--_ctm-mob-dn-im-tt-cr-dn-sw-sd,
+              var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))) var(--_ctm-mob-dn-im-tt-cr-dn-sw-cr,
+              var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr))));
+
+        & h3 {
+          color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
+
+          font-family: var(--_ctm-mob-dn-im-se-ft-fy,
+              var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy)));
+          text-transform: var(--_ctm-mob-dn-im-se-tt-tm,
+              var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm)));
+          word-wrap: var(--_ctm-mob-dn-im-se-wd-wp,
+              var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp)));
+          word-break: var(--_ctm-mob-dn-im-se-wd-bk,
+              var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk)));
+
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+          }
+
+          font-size: var(--_ctm-mob-dn-im-se-ft-se,
+            var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se)));
+
+          font-weight: var(--_ctm-mob-dn-im-se-ft-wt,
+            var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt)));
+
+          font-style: var(--_ctm-mob-dn-im-se-ft-se-ic,
+            var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic)));
+
+          text-align: var(--_ctm-mob-dn-im-se-tt-an,
+            var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an)));
+
+          letter-spacing: var(--_ctm-mob-dn-im-se-lr-sg,
+            var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg)));
+
+          line-height: var(--_ctm-mob-dn-im-se-le-ht,
+            var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht)));
+
+          text-decoration: var(--_ctm-mob-dn-im-se-ue,
+            var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue)));
+        }
+
+        & p {
+          color: var(--_ctm-mob-dn-im-se-cr-dc,
+              var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc)));
+
+          font-family: var(--_ctm-mob-dn-im-se-ft-fy-dc,
+              var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc)));
+          text-transform: var(--_ctm-mob-dn-im-se-tt-tm-dc,
+              var(--_ctm-tab-dn-im-se-tt-tm-dc, var(--_ctm-dn-im-se-tt-tm-dc)));
+          word-wrap: var(--_ctm-mob-dn-im-se-wd-wp-dc,
+              var(--_ctm-tab-dn-im-se-wd-wp-dc, var(--_ctm-dn-im-se-wd-wp-dc)));
+          word-break: var(--_ctm-mob-dn-im-se-wd-bk-dc,
+              var(--_ctm-tab-dn-im-se-wd-bk-dc, var(--_ctm-dn-im-se-wd-bk-dc)));
+
+          &#{$overflowSelector} {
+            @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+          }
+
+          font-size: var(--_ctm-mob-dn-im-se-ft-se-dc,
+            var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc)));
+
+          font-weight: var(--_ctm-mob-dn-im-se-ft-wt-dc,
+            var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc)));
+
+          font-style: var(--_ctm-mob-dn-im-se-ft-se-ic-dc,
+            var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc)));
+
+          text-align: var(--_ctm-mob-dn-im-se-tt-an-dc,
+            var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc)));
+
+          letter-spacing: var(--_ctm-mob-dn-im-se-lr-sg-dc,
+            var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc)));
+
+          line-height: var(--_ctm-mob-dn-im-se-le-ht-dc,
+            var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc)));
+
+          text-decoration: var(--_ctm-mob-dn-im-se-ue-dc,
+            var(--_ctm-tab-dn-im-se-ue-dc, 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 {
+          // The item's own Text Container Width, not the widget's. This read
+          // --_ctm-dn-gy-wt-lt-tt-cr-wh, which is always emitted as 100%; combined with
+          // the header's `flex: 0 0 auto` it never gave any of that width back, so the
+          // image was squeezed to 0px and vanished. There is no item-level control yet,
+          // so this falls back to fit-content and the caption sizes to its own text.
+          width: fit-content;
+          max-width: prepareMediaVariable(--_ctm-dn-im-lt-tt-cr-wh, 100%);
+          min-width: 0;
+          // Beside the image the caption has to be able to give way. The base rule's
+          // flex-shrink 0 is right for the stacked positions, not for these.
+          flex-shrink: 1;
+          height: 100%;
+        }
+
+        // The image takes whatever the caption leaves. Scoped to the row directions —
+        // in top/bottom the main axis is vertical and a flex-basis here would break it.
+        >img {
+          flex: 1 1 0;
+          min-width: 0;
+        }
+
+        &[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 {
+          // The item's own Text Container Width, not the widget's. This read
+          // --_ctm-dn-gy-wt-lt-tt-cr-wh, which is always emitted as 100%; combined with
+          // the header's `flex: 0 0 auto` it never gave any of that width back, so the
+          // image was squeezed to 0px and vanished. There is no item-level control yet,
+          // so this falls back to fit-content and the caption sizes to its own text.
+          width: fit-content;
+          max-width: prepareMediaVariable(--_ctm-dn-im-lt-tt-cr-wh, 100%);
+          min-width: 0;
+          // Beside the image the caption has to be able to give way. The base rule's
+          // flex-shrink 0 is right for the stacked positions, not for these.
+          flex-shrink: 1;
+          height: 100%;
+        }
+
+        // The image takes whatever the caption leaves. Scoped to the row directions —
+        // in top/bottom the main axis is vertical and a flex-basis here would break it.
+        >img {
+          flex: 1 1 0;
+          min-width: 0;
+        }
+
+        &[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;
+      }
+    }
+  }
+}