@use "sass:map";
@use "sass:list";
[data-div-type="element"] {
  &[data-element-type="spotlight"] {
    // 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;
      }
    }

    // &[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;
    }

    .spotlight-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))
          )
      );

      .spotlight-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))
        );

        width: 100%;

        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))
          );
          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))
          );
          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))
          );
          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))
          );
          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))
          );
        }

        & 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))
          );
          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))
          );
          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))
          );
          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))
          );
          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))
          );
        }

        // h3 {
        //   margin-bottom: var(--_mb-4);
        // }
      }
    }

    &[data-text-position="top"] {
      .spotlight-element {
        flex-direction: column;
      }
    }

    &[data-text-position="bottom"] {
      .spotlight-element {
        flex-direction: column-reverse;
      }
    }
    &[data-text-position="left"] {
      .spotlight-element {
        flex-direction: row;
      }
      .spotlight-header {
        // width: fit-content;
        height: 100%;
      }
      &[data-widget-alignment="top"] {
        .spotlight-element {
          align-items: flex-start;
        }
        .spotlight-header {
          justify-content: flex-start;
        }
      }
      &[data-widget-alignment="center"] {
        .spotlight-element {
          align-items: center;
        }
        .spotlight-header {
          justify-content: center;
        }
      }
      &[data-widget-alignment="bottom"] {
        .spotlight-element {
          align-items: flex-end;
        }
        .spotlight-header {
          justify-content: flex-end;
        }
      }
    }
    &[data-text-position="right"] {
      .spotlight-header {
        // width: fit-content;
        height: 100%;
      }
      .spotlight-element {
        flex-direction: row-reverse;
      }

      &[data-widget-alignment="top"] {
        .spotlight-element {
          align-items: flex-start;
        }
        .spotlight-header {
          justify-content: flex-start;
        }
      }
      &[data-widget-alignment="center"] {
        .spotlight-element {
          align-items: center;
        }
        .spotlight-header {
          justify-content: center;
        }
      }
      &[data-widget-alignment="bottom"] {
        .spotlight-element {
          align-items: flex-end;
        }
        .spotlight-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-spo-lt-pn-ds-se,
                      var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
                    ) +
                    20px
                )
            );
          }

          &[data-control-type="Bottom"][data-slider-control="Dots"] {
            height: calc(
              100% - calc(
                  var(
                      --_ctm-mob-spo-lt-pn-ds-se,
                      var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
                    ) +
                    20px
                )
            );
          }

          .embla__slide {
            width: 100%;
            height: 100%;
          }
        }
      }
      &: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, 1))
          );
        }
      }

      &[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(
              var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
              1fr
            );
            grid-template-rows: unset;
            grid-auto-flow: row;
          }
        }
      }

      &[data-display-style="Column"] {
        // overflow: unset;

        .embla__viewport {
          .embla__container {
            display: flex;
            .embla__slide {
              width: unset;
              height: 100%;
              aspect-ratio: 1 / 2;
            }
          }
        }
      }
      &[data-display-style="Masonry"] {
        // overflow: unset;

        .embla__viewport {
          overflow: hidden;
          height: 80%;
          flex-grow: 1;

          &:not([data-is-builder-type="true"]) {
            height: var(--_ctm-height);
          }

          .embla__container {
            overflow: unset;
            display: block;

            column-count: var(
              --_ctm-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;

              .spotlight__slide {
                height: unset;
              }
            }
          }
        }
      }

      .arrow-navigation {
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        justify-content: space-between;
        transform: translate(-50%, -50%);
        //   padding-left: 20px;
        &[data-control-type="Side"] {
          .left-button,
          .right-button {
            background-color: transparent;
          }
        }
        &[data-background-shape="Round"] {
          .left-button,
          .right-button {
            background-color: #f2f5f5;
            box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
          }
        }
        &[data-control-type="Bottom-Overflow"] {
          transform: translateX(-50%);
          width: 100%;
          justify-content: center;
          gap: 12px;
          top: unset;
          bottom: 6px;
        }
        &[data-control-type="Bottom"] {
          transform: unset;
          position: static;
          width: 100%;
          justify-content: center;
          gap: 12px;
          margin-top: 10px;
        }
        .left-button {
          padding: 10px;
          border-radius: 50%;
          border: none;
          width: var(
            --_ctm-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-spo-lt-sr-nn-cs-se,
                  var(--_ctm-tab-spo-lt-sr-nn-cs-se, var(--_ctm-spo-lt-sr-nn-cs-se))
                ) *
                0.5
            );
            height: calc(
              var(
                  --_ctm-mob-spo-lt-sr-nn-cs-se,
                  var(--_ctm-tab-spo-lt-sr-nn-cs-se, var(--_ctm-spo-lt-sr-nn-cs-se))
                ) *
                0.5
            );

            path {
              stroke: var(--_ctm-mob-dn-pn-as-aw-cr, var(--_ctm-tab-dn-pn-as-aw-cr, blue));
            }
          }
        }
      }

      &[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-thumbnail-placement="top"] {
        flex-direction: column-reverse;
      }
      &[data-thumbnail-placement="bottom"] {
        flex-direction: column;
      }
      &[data-thumbnail-placement="left"] {
        flex-direction: row-reverse;

        .embla__thumbs {
          width: var(--_ctm-lt-tl-se);
          height: 100%;

          & .embla__thumbs__container {
            flex-direction: column;
            height: 100%;
          }
        }
      }
      &[data-thumbnail-placement="right"] {
        flex-direction: row;
        .embla__thumbs {
          width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));

          height: 100%;

          & .embla__thumbs__container {
            flex-direction: column;
            height: 100%;
          }
        }
      }
      .embla__dots {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
        gap: 6px;
        margin-top: 16px;

        &[data-control-type="Bottom-Overflow"] {
          position: absolute;
          bottom: 10px;
          left: 50%;
          transform: translateX(-50%);
          width: 75%;
        }
        .embla__dot {
          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
          -webkit-appearance: none;
          appearance: none;
          background-color: var(
            --_ctm-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-spo-lt-pn-ds-se,
            var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
          );
          height: var(
            --_ctm-mob-spo-lt-pn-ds-se,
            var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-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-spo-lt-pn-ds-se,
            var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
          );
          height: var(
            --_ctm-mob-spo-lt-pn-ds-se,
            var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
          );

          border-radius: 50%;
          display: flex;
          align-items: center;
          content: "";
        }
        .embla__dot--selected:after {
          box-shadow: inset 0 0 0 1px var(--text-body);
          background-color: var(
            --_ctm-mob-dn-pn-ds-ct-dt-cr,
            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
          );
        }
        &[data-slider-control="Pagination Line"] {
          .embla__dot {
            width: var(
              --_ctm-mob-spo-lt-pn-ds-se,
              var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
            );
            height: var(
              --_ctm-mob-spo-lt-pn-ds-se,
              var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
            );
            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-radius: 6px;
          }

          .embla__dot--selected:after {
            box-shadow: inset 0 0 0 1px var(--text-body);
            border-radius: 6px;
            width: var(
              --_ctm-mob-spo-lt-pn-ds-se,
              var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
            );
            height: var(
              --_ctm-mob-spo-lt-pn-ds-se,
              var(--_ctm-tab-spo-lt-pn-ds-se, var(--_ctm-spo-lt-pn-ds-se))
            );
            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-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));

        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        overflow: hidden;
        // margin: 10px;
        padding: 10px;

        .embla__thumbs__viewport {
          width: 100%;
          height: 100%;
          position: relative;
          display: flex;
          flex-direction: column;

          overflow: hidden;
        }
        .embla__thumbs__container {
          display: flex;
          flex-direction: row;
          margin-left: calc(var(--thumbs-slide-spacing) * -1);
          gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));

          width: 100%;
          // justify-content: center;
          // height: 200px;

          .embla__thumbs__slide {
            min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
            max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
            height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));

            & img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .spotlight__slide {
      width: 100%;
      height: 100%;
      display: flex;
      // 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))
      );

      .spotlight-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%;

        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))
          );

          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))
          );

          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"] {
        .spotlight-header {
          width: 100%;
          // height: 100%;
          position: absolute;
        }

        &[data-widget-alignment="top"] {
          // align-items: flex-start;

          .spotlight-header {
            top: 0;

            justify-content: flex-start;
          }
        }
        &[data-widget-alignment="center"] {
          // align-items: center;

          .spotlight-header {
            top: 50%;
            transform: translateY(-50%);
            justify-content: center;
          }
        }
        &[data-widget-alignment="bottom"] {
          // align-items: flex-end;
          .spotlight-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;

        .spotlight-header {
          width: fit-content;
          height: 100%;
        }
        &[data-widget-alignment="top"] {
          align-items: flex-start;

          .spotlight-header {
            justify-content: flex-start;
          }
        }
        &[data-widget-alignment="center"] {
          align-items: center;

          .spotlight-header {
            justify-content: center;
          }
        }
        &[data-widget-alignment="bottom"] {
          align-items: flex-end;

          .spotlight-header {
            justify-content: flex-end;
          }
        }
      }
      &[data-text-position="right"] {
        flex-direction: row-reverse;
        .spotlight-header {
          width: fit-content;
          height: 100%;
        }

        &[data-widget-alignment="top"] {
          align-items: flex-start;

          .spotlight-header {
            justify-content: flex-start;
          }
        }
        &[data-widget-alignment="center"] {
          align-items: center;

          .spotlight-header {
            justify-content: center;
          }
        }
        &[data-widget-alignment="bottom"] {
          align-items: flex-end;

          .spotlight-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;
      }
    }
    .embla__slide {
      flex: 0 0 100%;
    }

    .spotlight__container {
      display: flex;
      width: 80%;
      margin: 0 auto;
      justify-content: center;
      padding: 30px 24px;

      .spotlight__leftsection {
        background: linear-gradient(90deg, #ffffff 0.05%, #f5f5f5 99.95%);
        align-self: center;
        padding: 30px 24px;
      }

      .spotlight__title {
        font-weight: 600;
        font-size: 20px;
        line-height: 125%;
        color: #000000;
      }

      .spotlight__start {
        font-weight: 500;
        font-size: 12px;
        line-height: 150%;
        letter-spacing: -0.02em;
        color: #303234;
        padding-top: 16px;
      }

      .spotlight__price {
        font-style: normal;
        font-weight: 800;
        font-size: 24px;
        line-height: 150%;
        letter-spacing: -0.02em;
        color: #303234;
        padding-top: 4px;
      }

      .spotlight__deal {
        font-style: italic;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: -0.02em;
        color: #303234;

        span {
          font-weight: 700;
        }
      }

      .spotlight__swatchimages {
        padding-top: 24px;
        display: flex;
        gap: 6px;

        li {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: #c2a893;
          list-style: none;
        }

        .active {
          border: 2px solid #fff;
          width: 28px;
          border-radius: 100px;
          height: 20px;
          outline: 2px solid #626262;
        }
      }

      .spotlight__cart {
        cursor: pointer;
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        text-align: center;
        letter-spacing: -0.02em;
        color: #ffffff;
        padding: 12px 24px;
        background: #243dc6;
        border: 0;
        border-radius: 4px;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 24px;

        span {
          svg {
            vertical-align: middle;
          }
        }
      }
    }

    .connector__wrapper[data-line-style="dotted"] .line-horizontal {
      border-top-style: dotted !important;
    }
    .connector__wrapper[data-line-style="dashed"] .line-horizontal {
      border-top-style: dashed !important;
    }

    .connector__wrapper[data-line-style="dashed"] .line-vertical {
      border-right-style: dashed !important;
    }

    .connector__wrapper[data-line-style="dotted"] .line-vertical {
      border-right-style: dotted !important;
    }

    .connector__wrapper[data-line-type="straight"] .line-vertical {
      transform: rotate(0deg) !important;
    }

    .connector__wrapper[data-line-bend="Straight"] .line-vertical {
      transform: rotate(0deg) !important;
    }
    .connector__wrapper[data-line-bend="UP"] .line-vertical {
      top: -16px !important;
      left: -10px !important;
      transform: rotate(-27deg) !important;
    }

    .spotlight__img__container {
      position: relative;
      width: 400px;
      margin: 0 auto;
      // border: 1px solid #333;
      background-image: url("https://sellerscommerce.sirv.com/00000000-0000-0000-0000-000000000000/media/spotlight_element.png");
      height: 500px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    // Top Left point container
    .spotlight__pointTopLeft {
      position: absolute;
      top: 0px;
      left: 0px;

      .spotlight__points {
        display: flex;
        align-items: center;
        z-index: 2;

        .label__box {
          position: absolute;
          left: -68px;
          top: 54px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          width: 77.82px;
          height: auto;
          background: #ffffff;
          border: 0.659236px solid #243dc6;
          border-radius: 2.63694px;
          padding: var(--_ctm-spo-lt-st-bx-pg, var(--_ctm-spo-lt-st-tt-pg));
          font-weight: 400;
          font-size: var(--_ctm-spo-lt-st-tt-ft-se);
          line-height: var(--_ctm-spo-lt-st-tt-le-ht);
          letter-spacing: var(--_ctm-spo-lt-st-tt-lr-sg, var(--_ctm-spo-lt-st-im-sg));
          text-align: center;
          color: #667085;

          svg {
            width: var(--_ctm-spo-lt-st-in-se);
            height: var(--_ctm-spo-lt-st-in-se);
            padding: var(--_ctm-spo-lt-st-in-pg);
          }
        }

        .connector__wrapper {
          .line-horizontal {
            width: var(--_ctm-spo-lt-br-bd-le-de, 85px);
            height: 1px;
            border-top: var(--_ctm-spo-lt-le-ts) solid #243dc6;
            top: -18px;
            position: relative;
            right: 0px;
          }

          &[data-line-style="dotted"] {
            .line-horizontal {
              border-top-style: dotted;
            }
          }

          .line-vertical {
            width: 1px;
            height: var(--_ctm-spo-lt-ar-bd-le-de, 38px);
            border-right: var(--_ctm-spo-lt-le-ts) solid #243dc6;
            position: relative;
            top: 18px;
            left: -10px;
            transform: rotate(27deg);
            border-radius: 31px;
          }
        }

        .circle-marker {
          background-color: white;
          border: 4px solid #0000001a;
          border-radius: 50%;
          width: var(
            --_ctm-mob-spo-lt-ht-in-se,
            var(--_ctm-tab-spo-lt-ht-in-se, var(--_ctm-spo-lt-ht-in-se))
          );
          height: var(
            --_ctm-mob-spo-lt-ht-in-se,
            var(--_ctm-tab-spo-lt-ht-in-se, var(--_ctm-spo-lt-ht-in-se))
          );
        }
      }
    }

    // Top Right point container
    .spotlight__pointTopRight {
      position: absolute;
      top: 0px;
      right: 0px;

      .spotlight__points {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        z-index: 2;

        .label__box {
          position: absolute;
          right: -68px;
          top: 54px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          width: 77.82px;
          height: auto;
          background: #ffffff;
          border: 0.659236px solid #243dc6;
          border-radius: 2.63694px;
          padding: 8px 14px 6px 14px;
          font-weight: 400;
          font-size: 10.5478px;
          text-align: center;
          color: #667085;
        }

        .connector__wrapper {
          .line-horizontal {
            width: var(--_ctm-spo-lt-br-bd-le-de, 85px);
            height: 1px;
            border-top: var(--_ctm-spo-lt-le-ts) solid #243dc6;
            top: -18px;
            position: relative;
            right: 0px;
          }

          .line-vertical {
            width: 1px;
            height: var(--_ctm-spo-lt-ar-bd-le-de, 38px);
            border-right: var(--_ctm-spo-lt-le-ts) solid #243dc6;
            position: relative;
            top: 18px;
            right: -92px;
            transform: rotate(-27deg);
            border-radius: 31px;
          }
        }

        .circle-marker {
          background-color: white;
          border: 4px solid #0000001a;
          border-radius: 50%;
          width: 18px;
          height: 18px;
        }
      }
    }

    // Bottom Left point container
    .spotlight__pointBottomLeft {
      position: absolute;
      bottom: 0px;
      left: 0px;

      .spotlight__points {
        display: flex;
        align-items: center;
        z-index: 2;

        .label__box {
          position: absolute;
          left: -68px;
          top: -44px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          width: 77.82px;
          height: auto;
          background: #ffffff;
          border: 0.659236px solid #243dc6;
          border-radius: 2.63694px;
          padding: 8px 14px 6px 14px;
          font-weight: 400;
          font-size: 10.5478px;
          text-align: center;
          color: #667085;
        }

        .connector__wrapper {
          .line-horizontal {
            width: var(--_ctm-spo-lt-br-bd-le-de, 85px);
            height: 1px;
            border-top: var(--_ctm-spo-lt-le-ts) solid #243dc6;
            top: -18px;
            position: relative;
            right: 0px;
          }

          .line-vertical {
            width: 1px;
            height: var(--_ctm-spo-lt-ar-bd-le-de, 38px);
            border-right: var(--_ctm-spo-lt-le-ts) solid #243dc6;
            position: relative;
            top: -16px;
            left: -10px;
            transform: rotate(-27deg);
            border-radius: 31px;
          }
        }

        .circle-marker {
          background-color: white;
          border: 4px solid #0000001a;
          border-radius: 50%;
          width: 18px;
          height: 18px;
        }
      }
    }

    // Bottom Right point container
    .spotlight__pointBottomRight {
      position: absolute;
      bottom: 0px;
      right: 0px;

      .spotlight__points {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        z-index: 2;

        .label__box {
          position: absolute;
          right: -68px;
          top: -44px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          width: 77.82px;
          height: auto;
          background: #ffffff;
          border: 0.659236px solid #243dc6;
          border-radius: 2.63694px;
          padding: 8px 14px 6px 14px;
          font-weight: 400;
          font-size: 10.5478px;
          text-align: center;
          color: #667085;
        }

        .connector__wrapper {
          .line-horizontal {
            width: var(--_ctm-spo-lt-br-bd-le-de, 85px);
            height: 1px;
            border-top: var(--_ctm-spo-lt-le-ts) solid #243dc6;
            top: -18px;
            position: relative;
            right: 0px;
          }

          .line-vertical {
            width: 1px;
            height: var(--_ctm-spo-lt-ar-bd-le-de, 38px);
            border-right: var(--_ctm-spo-lt-le-ts) solid #243dc6;
            position: relative;
            top: -15.3px;
            right: -92px;
            transform: rotate(-153deg);
            border-radius: 31px;
          }
        }

        .circle-marker {
          background-color: white;
          border: 4px solid #0000001a;
          border-radius: 50%;
          width: 18px;
          height: 18px;
        }
      }
    }

    .embla__customControls {
      // position: absolute;
      .custom__arrowsPosition {
        .embla__button--prev {
          position: absolute !important;
          left: 0 !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
        }

        .embla__button--next {
          position: absolute !important;
          right: 0 !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
        }
      }
    }
  }
}