<========================================== CB Transformations Html =============================================>


<div class="transformation-wrapper">
  {% if  module.heading %}
  <div class="top-section">
    <div class="top-section-content">
      <h3>
        {{ module.heading }}
      </h3>
    </div>
  </div>
  {% endif %}
  <div class="advanced-gallery-wrapper with-overlay">
    <button class="fullscreen-icon">

    </button>
    <button class="close-fullscreen-icon">

    </button>

    <div class="advanced-gallery-inner">
      <div class="prevArrow">
        <img alt="Preview" src="{{ get_asset_url('../../images/popup-prev-Icon.svg') }}">
        <img alt="Preview" src="{{ get_asset_url('../../images/slick-slider-Icon.svg') }}" class="normal-slider prev-icon">
      </div>
      <div class="nextArrow">
        <img alt="Next" src="{{ get_asset_url('../../images/popup-next-Icon.svg') }}">
        <img alt="Next" src="{{ get_asset_url('../../images/slick-slider-Icon.svg') }}" class="normal-slider next-icon">
      </div>

      <div class="advanced-gallery-slider">
        {% for item in module.transformation %}
        <div class="advanced-gallery-item media-type-image">
          <div class="advanced-gallery-item-inner-wrapper with-content">
            <div class="advanced-gallery-item-inner">
              {% if item.image_field.src %}
              <div class="advanced-gallery-item-media">
                <div class="advanced-gallery-item-image" style="background-image: url('{{ item.image_field.src }}');"></div>
                <img src="{{ item.image_field.src }}" alt="{{ item.title }}" class="advanced-gallery-item-image-open" />
              </div>
              {% endif %}
              {% if item.title %}
              <div class="advanced-gallery-item-content">
                <div class="advanced-gallery-item-content-inner">
                  <div class="advanced-gallery-item-content-title">{{ item.title }}</div>
                </div>
              </div>
              {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>

    </div>
   
  </div>
  {% if  module.bottom_text %}
  <div class="bottom-section clearfix">
    <div class="bottom-section-content">
      <h3>
        {{ module.bottom_text }}
      </h3>
    </div>
  </div>
  {% endif %}
</div>



<========================================== CB Transformations css =============================================>

.transformation-wrapper .top-section-content h3 {
  font: italic normal bold 120px/1.4em dinneuzeitgroteskltw01-_812426,sans-serif;
  margin-top: 3px;
  text-align: center;
  font-size: 48px;
  font-style: normal;
  color: #E81947;
  font-weight: normal;
  margin-bottom: 0;
}

.transformation-wrapper .top-section-content {
  background: #000;
  width: 100%;
  float: left;
  padding-left: 15px;
}

/* Gallery Styles */
.transformation-wrapper .advanced-gallery-wrapper {
  padding: 0;
  position: relative;
  width: 100%;
}
.transformation-wrapper .advanced-gallery-inner {
  position: relative;
}
.transformation-wrapper .advanced-gallery-wrapper .advanced-gallery-slider {
  margin-bottom: 0;
}

.transformation-wrapper .advanced-gallery-item-media {
  position: relative;
  padding-bottom: 100%;
  overflow: hidden;
  width: 100%;
  cursor: pointer;
}
.transformation-wrapper .advanced-gallery-item-video,
.transformation-wrapper .advanced-gallery-item-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  object-fit: cover;
}
.transformation-wrapper .advanced-gallery-item-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.transformation-wrapper .advanced-gallery-item-inner-wrapper {
  padding: 6px 5px 10px;
}

.transformation-wrapper .advanced-gallery-item-media:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 1;
}

/* overlay */
.transformation-wrapper .advanced-gallery-wrapper.with-overlay
.advanced-gallery-item-media:hover:before {
  background: rgba(153, 153, 151, 0.6);
}

.transformation-wrapper .advanced-gallery-wrapper .slick-arrow {
  position: absolute;
  padding: 0;
  top: 50%;
  left: 0;
  z-index: 99;
  cursor: pointer;
  width: 23px;
  height: 39px !important;
}
.transformation-wrapper .advanced-gallery-wrapper .prevArrow svg *,
.transformation-wrapper .advanced-gallery-wrapper .nextArrow svg * {
  display: none;
}
.transformation-wrapper .advanced-gallery-wrapper .slick-arrow.slick-disabled {
  opacity: 0;
  pointer-events: none;
}
.transformation-wrapper .advanced-gallery-wrapper .slick-arrow svg {
  -webkit-filter: drop-shadow(0px 1px 0.15px #b2b2b2);
  filter: drop-shadow(0px 1px 0.15px #b2b2b2);
  vertical-align: middle;
  margin: 0 auto;
}
.transformation-wrapper .advanced-gallery-wrapper .slick-arrow svg path {
  fill: #ffffff;
}
.transformation-wrapper .advanced-gallery-wrapper .nextArrow {
  right: 24px;
  left: auto;
}

.transformation-wrapper .advanced-gallery-wrapper .slick-arrow.prevArrow {
  left: 24px;
}

.transformation-wrapper .advanced-gallery-item-image-open,
.transformation-wrapper .advanced-gallery-wrapper .close-fullscreen-icon,
.transformation-wrapper .advanced-gallery-wrapper .fullscreen-icon {
  display: none !important;
}

.transformation-wrapper button.fullscreen-icon {
  background-color: #ffffff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
  outline: none;
  background: rgba(255, 255, 255, 1);
  margin-left: 35px;
  font-size: 26px;
  margin-top: -4px;
  margin-right: 45px;
  z-index: 100;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: 38px;
  height: 44px !important;
  line-height: 44px;
  text-align: center;
  top: 30px;
  transition: opacity 0.8s ease;
  display: inline;
  border: none;
  position: fixed;
  left: 0;
  color: rgb(0, 0, 0);
}
.transformation-wrapper button.close-fullscreen-icon {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
  color: rgb(0, 0, 0);
  background: rgba(255, 255, 255, 1);
  font-size: 26px;
  z-index: 100;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: 38px;
  height: 44px !important;
  line-height: 44px;
  text-align: center;
  top: 30px;
  transition: opacity 0.8s ease;
  outline: none;
  padding: 0;
  right: 0;
  position: fixed;
  margin-right: 30px;
  border: none;
}
.transformation-wrapper .fullscreen-icon svg,
.transformation-wrapper .close-fullscreen-icon svg {
  width: 30px;
}

.transformation-wrapper .advanced-gallery-wrapper .slick-arrow svg:last-child {
  display: none !important;
}

/* dots styles */
.transformation-wrapper .advanced-gallery-slider ul.slick-dots {
  position: relative;
  bottom: 0;
  margin-top: 20px;
}
.transformation-wrapper .advanced-gallery-slider ul.slick-dots li button {
  display: none;
}
.transformation-wrapper .advanced-gallery-slider ul.slick-dots li {
  background-color: #f1f1f1;
  border-radius: 50%;
  width: 15px;
  height: 15px;
}
.transformation-wrapper .advanced-gallery-slider ul.slick-dots li.slick-active {
  background-color: rgba(153, 153, 151, 0.6);
}

/* start center mode with left */
/* @media (min-width: 768px) {
body:not(.gallery-open)
.advanced-gallery-inner
> .prevArrow.slick-disabled
~ .advanced-gallery-slider
> .slick-list {
padding-left: 0 !important;
padding-right: 48.8% !important;
margin-left: -10px;
}
body:not(.gallery-open)
.advanced-gallery-inner
> .nextArrow.slick-disabled
~ .advanced-gallery-slider
> .slick-list {
padding-right: 0 !important;
padding-left: 48.8% !important;
margin-right: -10px;
}
} */



@media (max-width: 991px) {
  .transformation-wrapper .advanced-gallery-item-media {
    padding-bottom: 68%;
  }
}

@media (max-width: 767px) {
  .transformation-wrapper .advanced-gallery-wrapper {
    padding: 0 20px;
  }
  .transformation-wrapper .advanced-gallery-item-inner-wrapper {
    padding: 0;
  }
  .transformation-wrapper .advanced-gallery-item-media {
    padding-bottom: 68%;
  }

  .transformation-wrapper button.close-fullscreen-icon {
    top: 5px;
    right: 5px;
    margin-right: 0;
    font-size: 14px;
  }
  .transformation-wrapper button.fullscreen-icon {
    top: 5px;
    left: 5px;
    margin-left: 0;
    font-size: 20px;
  }
}

/* With Content Styles */
.transformation-wrapper .advanced-gallery-item-content {
  display: none;
}

.transformation-wrapper .advanced-gallery-item-content * {
  height: auto !important;
}

.transformation-wrapper .advanced-gallery-item-content-desc {
  margin-bottom: 18px;
  font-family: helvetica-w01-bold, sans-serif;
  font-size: 40px;
  line-height: 1.4;
  color: #000000;
}

.transformation-wrapper .advanced-gallery-item-content-title {
  color: rgba(65,65,65,1);
  font: italic normal bold 120px/1.4em dinneuzeitgroteskltw01-_812426,sans-serif;
  outline: none;
  font-size: 5.46875vw;
}

.transformation-wrapper .advanced-gallery-item-content-inner {
  padding-top: 30px;
}

.transformation-wrapper .bottom-section h3 {
  font: normal normal normal 50px/1.4em dinneuzeitgroteskltw01-_812426,sans-serif;
  font-size: 30px;
  color: #FFFFFF;
  text-align: center;
  margin: 0;
  padding-top: 1px;
}

.transformation-wrapper .bottom-section {
  background-color: #e81947;
  padding-left: 14px;
}

.transformation-wrapper .advanced-gallery-inner .slick-arrow img:not(.normal-slider) {
  display: none;
}

.transformation-wrapper .advanced-gallery-inner .slick-arrow img.normal-slider.prev-icon {
  transform: rotate(180deg);
}


@media (min-width: 768px) {
  .transformation-wrapper .advanced-gallery-inner.button-right .nextArrow.slick-arrow {
    right: 0;
  }
  .transformation-wrapper .advanced-gallery-inner.button-right
  .advanced-gallery-item.media-type-video
  .advanced-gallery-item-media {
    width: 100%;
    padding-right: 0;
  }
}

@media (min-width: 1601px) and (max-height: 640px) {

  .transformation-wrapper .advanced-gallery-item-content-title,
  .transformation-wrapper .advanced-gallery-item-content-desc {
    font-size: 6.25vh;
  }
}

@media (min-width: 1200px) and (max-width: 1600px) {
  .transformation-wrapper .advanced-gallery-item-content-desc {
    font-size: 30px;
  }

}
@media (min-width: 1200px) and (max-height: 640px) {
  .transformation-wrapper .advanced-gallery-item-content-title,
  .transformation-wrapper .advanced-gallery-item-content-desc {
    font-size: 3.5vh;
  }

}

@media (min-width: 768px) and (max-width: 1600px) {
  .transformation-wrapper .advanced-gallery-item-content-desc {
    font-size: 26px;
  }

}

@media (min-width: 768px) and (max-width: 1199px) {
  .transformation-wrapper .advanced-gallery-item-content-desc {
    font-size: 20px;
  }

}

@media (min-width: 768px) and (max-height: 640px) {
  .transformation-wrapper .advanced-gallery-item-content-title,
  .transformation-wrapper .advanced-gallery-item-content-desc {
    font-size: 3.8vh;
  }

}


@media (max-width: 767px) {
  .transformation-wrapper .top-section-content h3 {
    font-size: 25px;
    margin: 10px 0px 10px 0;
  }
  .transformation-wrapper .top-section-content {
    padding-left: 0;
  }
  .transformation-wrapper .bottom-section h3 {
    font-size: 21px;
    margin: 10px 0px 10px 0;
  }
  .transformation-wrapper .bottom-section {
    padding-left: 0;
  }
  .transformation-wrapper .advanced-gallery-item-content-desc {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .transformation-wrapper .advanced-gallery-item-content {
    text-align: center;
  }
  .transformation-wrapper .advanced-gallery-slider ul.slick-dots li {
    width: 10px;
    height: 10px;
  }

  .advanced-gallery-wrapper .slick-slider .slick-list {
    width: 100%;
  }

}

@media (max-width: 480px) {
  .transformation-wrapper .advanced-gallery-item-content-desc {
    font-size: 12px;
    margin-bottom: 5px;
  }
}


@media(max-width:767px){

  .transformation-wrapper .advanced-gallery-wrapper {
    padding: 0;
  }

  .transformation-wrapper .advanced-gallery-item-media {
    padding-bottom: 100%;
  }

  .transformation-wrapper .advanced-gallery-wrapper img.normal-slider {
    display: none;
  }

  .transformation-wrapper .advanced-gallery-item-content-title {
    font: italic normal bold 120px/1.4em dinneuzeitgroteskltw01-_812426,sans-serif !important;
  }

  .transformation-wrapper .advanced-gallery-item-content-inner {
    padding-top: 0;
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 100px;
  }

  .transformation-wrapper .advanced-gallery-item-content {
    text-align: left;
  }

.transformation-wrapper .advanced-gallery-item-content-title {
    font-size: 35px !important;
    text-align: center;
}
 
}


<========================================== CB Transformations JS =============================================>


(function () {
  // Slick Init
  var curOptions = 0,
      arrOptions = [
        {
          centerMode: true,
          centerPadding: "12.7%",
          slidesToShow: 3,
          fade: false,
          infinite: true,
          dots: false,
        },
        {
          centerMode: false,
          centerPadding: "0px",
          slidesToShow: 1,
          fade: true,
          dots: false,
          infinite: false
        }
      ];
  var myCarousel = $(".advanced-gallery-slider").slick(
    $.extend(
      {
        dots: true,
        infinite: false,
        draggable: false,
        slidesToShow: 3,
        centerMode: true,
        centerPadding: "10px",
        nextArrow: $(".nextArrow"),
        prevArrow: $(".prevArrow"),
        responsive: [
          {
            breakpoint: 768,
            settings: {
              //                 unslick: true,
              centerMode: false,
              centerPadding: "0px",
              slidesToShow: 1,
              fade: true,
              dots: false
            }
          }
        ]
      },
      arrOptions[curOptions]

    )
  );

  // toggle slick center mode and normal mode
  function switchOptions() {
    curOptions = curOptions ? 0 : 1;
    if (document.body.classList.contains("gallery-open")) {
      curOptions = 1;
      myCarousel.slick("slickSetOption", arrOptions[curOptions], true);

      setTimeout(function () {
        myCarousel.slick("refresh");
      }, 500);

      $(".advanced-gallery-wrapper").one("click", function () {
        setTimeout(function () {
          myCarousel.slick("refresh");
        }, 500);
      });
    } else {
      curOptions = 0;
      myCarousel.slick("slickSetOption", arrOptions[curOptions], true);
    }
  }

  window.addEventListener("load", function () {
    document.body.classList.add("gallery-loaded");
  });

  // Active video play js
  var sliderWrapper = document.querySelector(".advanced-gallery-wrapper");
  var slides = document.querySelectorAll(".advanced-gallery-item");
  var videoSlidesVideos = document.querySelectorAll(
    ".advanced-gallery-item.media-type-video iframe"
  );
  var sliderArrows = document.querySelectorAll(
    ".gallery-open .advanced-gallery-wrapper .slick-arrow"
  );

  var withContentSlides = document.querySelectorAll(
    ".advanced-gallery-item-inner-wrapper"
  );
  Array.prototype.slice.call(withContentSlides).forEach(function (slide) {
    if (slide.classList.contains("with-content")) {
      sliderWrapper.classList.add("with-content");
    }
  });

  var currentPos = 0;
  var previousPos = 0;
  sliderWrapper.addEventListener("click", function () {
    function myFunction(x) {
      if (x.matches) {
        switchOptions();
      }
    }
    var x = window.matchMedia("(min-width: 768px)");
    myFunction(x);
    x.addListener(myFunction);

    if (document.body.classList.contains("gallery-open")) {
      Array.prototype.slice.call(slides).forEach(function (slide, index) {
        if (slide.classList.contains("media-type-video")) {
          currentPos = index;

          Array.prototype.slice
            .call(videoSlidesVideos)
            .forEach(function (video) {
            video.setAttribute(
              "src",
              video.getAttribute("src").split("?")[0]
            );
            var symbol = video.src.indexOf("?") > -1 ? "&" : "?";
            if (slide.classList.contains("slick-active")) {
              if (currentPos != previousPos) {
                video.src += symbol + "rel=0&amp;autoplay=1&controls=0";
              } else {
                video.src += symbol + "rel=0&amp;autoplay=1";
//                 setTimeout(function () {
//                   slide.parentElement.parentElement.parentElement.parentElement.classList.add(
//                     "button-right"
//                   );
//                 }, 100);
              }
            }
          });
          previousPos = currentPos;
        } else {
//           slide.parentElement.parentElement.parentElement.parentElement.classList.remove(
//             "button-right"
//           );
        }
      });
    } else {
      Array.prototype.slice.call(videoSlidesVideos).forEach(function (video) {
        if (
          video.src.indexOf("rel=0&amp;autoplay=") > -1 ||
          video.src.indexOf("?") > -1
        ) {
        } else {
          video.setAttribute("src", video.getAttribute("src").split("?")[0]);
          var symbol = video.src.indexOf("?") > -1 ? "&" : "?";
          video.src += symbol + "rel=0&amp;autoplay=1&mute=1&controls=0";
        }
        if (
          video.src.indexOf("?rel=0&amp;autoplay=1") > -1 &&
          video.src.indexOf("rel=0&amp;autoplay=1&mute=1&controls=0") < 0
        ) {
          video.setAttribute("src", video.getAttribute("src").split("?")[0]);
          var symbol = video.src.indexOf("?") > -1 ? "&" : "?";
          video.src += symbol + "rel=0&amp;autoplay=1&mute=1&controls=0";
        }
      });
    }
  });

  // popup js
  var sliderItems = document.querySelectorAll(".advanced-gallery-item-media");
  Array.prototype.slice.call(sliderItems).forEach(function (item) {
    item.addEventListener("click", function (e) {
      if (document.body.classList.contains("gallery-open")) {
      } else {
        document.body.classList.add("gallery-open");
        // imulator scroll
        Array.prototype.slice.call(slides).forEach(function (slide, index) {
          var b = window.innerHeight;
          var c = slide.offsetHeight;
          if (c > b) {
            sliderWrapper.classList.add("top_space");
          } else {
            sliderWrapper.classList.remove("top_space");
          }
        });
      }
    });
  });

  // imulator scroll
  window.addEventListener("resize", function () {
    Array.prototype.slice.call(slides).forEach(function (slide, index) {
      var b = window.innerHeight;
      var c = slide.offsetHeight;
      if (c > b) {
        sliderWrapper.classList.add("top_space");
      } else {
        sliderWrapper.classList.remove("top_space");
      }
    });
  });

  // Full Screen Functionality
  var elem = document.querySelector(".advanced-gallery-wrapper");
  var fullscreenBtn = document.querySelector(".fullscreen-icon");
  var closeFullscreenBtn = document.querySelector(".close-fullscreen-icon");



  fullscreenBtn.addEventListener("click", function () {
    document.body.classList.remove("fullscreen-open");
    toggleFullscreen(elem);
  });
  closeFullscreenBtn.addEventListener("click", function () {
    document.body.classList.remove("fullscreen-open");
    document.body.classList.remove("gallery-open");
    closeFullscreen();

    myCarousel.slick("slickSetOption", arrOptions[0], true);
    myCarousel.slick("refresh");
  });

  // toggleFullscreen
  function toggleFullscreen(elem) {
    elem = elem || document.documentElement;
    if (
      !document.fullscreenElement &&
      !document.mozFullScreenElement &&
      !document.webkitFullscreenElement &&
      !document.msFullscreenElement
    ) {
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
        document.body.classList.add("fullscreen-open");
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
        document.body.classList.add("fullscreen-open");
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
        document.body.classList.add("fullscreen-open");
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        document.body.classList.add("fullscreen-open");
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
        document.body.classList.remove("fullscreen-open");
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
        document.body.classList.remove("fullscreen-open");
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
        document.body.classList.remove("fullscreen-open");
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
        document.body.classList.remove("fullscreen-open");
      }
    }
  }
  // closeFullscreen
  function closeFullscreen() {
    if (
      document.fullscreenElement ||
      document.mozFullScreenElement ||
      document.webkitFullscreenElement ||
      document.msFullscreenElement
    ) {
      if (document.exitFullscreen) {
        document.exitFullscreen();
        document.body.classList.remove("fullscreen-open");
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
        document.body.classList.remove("fullscreen-open");
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
        document.body.classList.remove("fullscreen-open");
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
        document.body.classList.remove("fullscreen-open");
      }
    }
  }

  // exit fullscreen
  document.body.addEventListener("keyup", function (e) {
    if (e.which == 27) {
      document.body.classList.remove("fullscreen-open");
    }
  });

  // set image in background for IE
  if ("objectFit" in document.documentElement.style === false) {
    $(".advanced-gallery-item-media img").each(function () {
      var w = $(this).width();
      var h = $(this).height();
      var s = $(this).attr("src");
      var final =
          "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" +
          w +
          "' height='" +
          h +
          "'%3E%3C/svg%3E";
      $(this).css("background", "url(" + s + ") no-repeat 50% center /cover");
      $(this).attr("src", final);
    });
  }
})();

$('.advanced-gallery-item').click(function(e) {
  e.preventDefault();
  var slideno = $(this).attr('data-slick-index');
  $('.advanced-gallery-slider').slick('slickGoTo', slideno );
});



<========================== CB Transformations SS ===============================>

https://prnt.sc/ewf0tRsxH-6m
https://prnt.sc/FQ1kNYnePTmH