_includes/infographics/infographics.html in appscms-tools-theme-4.6.3 vs _includes/infographics/infographics.html in appscms-tools-theme-4.6.4

@@ -63,16 +63,19 @@
 
   .slide {
     flex: 0 0 calc(100% / 3);
     scroll-snap-align: start;
     padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
   }
 
   .carousel img {
-    width: 100%;
     object-fit: contain;
-    max-width: 100%;
+
     height: auto;
     border-radius: 8px;
   }
 
   .carousel-inner p {
@@ -157,12 +160,12 @@
   const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
 
   if (numImages > 3) {
     arrowIcons[1].style.display = "block";
   } else {
-    arrowIcons[0].style.display = "none";
-    arrowIcons[1].style.display = "none";
+    // arrowIcons[0].style.display = "none";
+    // arrowIcons[1].style.display = "none";
   }
 
   let isDragStart = false,
     isDragging = false,
     prevPageX,
@@ -178,10 +181,10 @@
   arrowIcons.forEach((icon) => {
     icon.addEventListener("click", () => {
       let firstImgWidth = firstImg.clientWidth + 40;
       const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
       carousel.scrollBy({
-        left: scrollAmount,
+        left: "100vw",
         behavior: "smooth",
       });
       setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
     });
   });