@dcodegroup-au/page-builder 0.7.9 → 0.8.0

package/dist/page-builder.css

@@ -1087,9 +1087,6 @@ select {
 .w-12 {
   width: 3rem;
 }
-.w-2\/3 {
-  width: 66.666667%;
-}
 .w-3 {
   width: 0.75rem;
 }
@@ -1175,9 +1172,6 @@ select {
 .min-w-\[24px\] {
   min-width: 24px;
 }
-.min-w-\[300px\] {
-  min-width: 300px;
-}
 .min-w-\[400px\] {
   min-width: 400px;
 }
@@ -1202,24 +1196,15 @@ select {
 .max-w-\[1640px\] {
   max-width: 1640px;
 }
-.max-w-\[324px\] {
-  max-width: 324px;
-}
 .max-w-\[356px\] {
   max-width: 356px;
 }
-.max-w-\[480px\] {
-  max-width: 480px;
-}
 .max-w-\[48px\] {
   max-width: 48px;
 }
 .max-w-\[51\.25rem\] {
   max-width: 51.25rem;
 }
-.max-w-\[536px\] {
-  max-width: 536px;
-}
 .max-w-\[768px\] {
   max-width: 768px;
 }
@@ -1895,9 +1880,6 @@ select {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
-.text-\[13px\] {
-  font-size: 13px;
-}
 .text-\[16px\] {
   font-size: 16px;
 }
@@ -3197,6 +3179,10 @@ select {
     width: 560px;
   }
 
+  .md\:max-w-\[324px\] {
+    max-width: 324px;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3361,6 +3347,10 @@ select {
     width: 50%;
   }
 
+  .lg\:w-2\/3 {
+    width: 66.666667%;
+  }
+
   .lg\:w-2\/5 {
     width: 40%;
   }
@@ -3373,10 +3363,22 @@ select {
     width: 350px;
   }
 
+  .lg\:min-w-\[300px\] {
+    min-width: 300px;
+  }
+
   .lg\:max-w-\[33\.3\%\] {
     max-width: 33.3%;
   }
 
+  .lg\:max-w-\[480px\] {
+    max-width: 480px;
+  }
+
+  .lg\:max-w-\[536px\] {
+    max-width: 536px;
+  }
+
   .lg\:max-w-\[882px\] {
     max-width: 882px;
   }

package/dist/page-builder.es.js

@@ -452,7 +452,7 @@ const _hoisted_12$d = { class: "flex flex-col gap-3" };
 const _hoisted_13$b = ["onClick"];
 const _hoisted_14$9 = ["onClick"];
 const _hoisted_15$7 = { class: "text-xs text-gray-600" };
-const _hoisted_16$5 = { class: "text-sm font-medium text-gray-900" };
+const _hoisted_16$4 = { class: "text-sm font-medium text-gray-900" };
 const _sfc_main$Q = {
   __name: "Items",
   props: {
@@ -542,7 +542,7 @@ const _sfc_main$Q = {
                         onClick: ($event) => edit(item, index)
                       }, [
                         createElementVNode("div", _hoisted_15$7, toDisplayString(unref(singularize)(unref(parseName)(unref(type)))) + " #" + toDisplayString(index + 1), 1),
-                        createElementVNode("div", _hoisted_16$5, toDisplayString(item.title), 1)
+                        createElementVNode("div", _hoisted_16$4, toDisplayString(item.title), 1)
                       ], 8, _hoisted_14$9),
                       createVNode(_sfc_main$S, {
                         onRemoveItem: ($event) => handleDeleteItem(index),
@@ -45234,8 +45234,8 @@ const _hoisted_15$6 = {
   key: 1,
   class: "flex flex-col gap-1.5"
 };
-const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
-const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
+const _hoisted_16$3 = ["onUpdate:modelValue", "maxlength"];
+const _hoisted_17$2 = ["onUpdate:modelValue", "maxlength"];
 const _hoisted_18$2 = { key: 2 };
 const _sfc_main$C = {
   __name: "Links",
@@ -45405,7 +45405,7 @@ const _sfc_main$C = {
                             placeholder: "Title",
                             maxlength: ((_a3 = componentData.value) == null ? void 0 : _a3.max_title) ?? 200,
                             class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                          }, null, 8, _hoisted_16$4)), [
+                          }, null, 8, _hoisted_16$3)), [
                             [vModelText, item.title]
                           ]) : createCommentVNode("", true),
                           isBulletPoint.value ? withDirectives((openBlock(), createElementBlock("textarea", {
@@ -45416,7 +45416,7 @@ const _sfc_main$C = {
                             maxlength: ((_b2 = componentData.value) == null ? void 0 : _b2.max_title) ?? 200,
                             rows: "4",
                             class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                          }, null, 8, _hoisted_17$3)), [
+                          }, null, 8, _hoisted_17$2)), [
                             [vModelText, item.title]
                           ]) : createCommentVNode("", true)
                         ];
@@ -46171,8 +46171,8 @@ const _hoisted_15$5 = {
   key: 0,
   class: "mb-4 px-6 py-5 rounded-xl bg-gray-50"
 };
-const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
-const _hoisted_17$2 = ["value"];
+const _hoisted_16$2 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
+const _hoisted_17$1 = ["value"];
 const _hoisted_18$1 = {
   key: 1,
   class: "rounded-xl bg-gray-50 px-6 py-5"
@@ -46314,7 +46314,7 @@ const _sfc_main$t = {
           createElementVNode("div", _hoisted_14$7, [
             !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_15$5, [
               _cache[3] || (_cache[3] = createElementVNode("div", { class: "text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200" }, "Settings", -1)),
-              createElementVNode("div", _hoisted_16$3, [
+              createElementVNode("div", _hoisted_16$2, [
                 createVNode(_sfc_main$P, {
                   field: "breadcrumb",
                   "label-text": "Breadcrumb section",
@@ -46327,7 +46327,7 @@ const _sfc_main$t = {
                       name: "url"
                     }, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(__props.breadcrumbs, (b) => {
-                        return openBlock(), createElementBlock("option", { value: b }, toDisplayString(b), 9, _hoisted_17$2);
+                        return openBlock(), createElementBlock("option", { value: b }, toDisplayString(b), 9, _hoisted_17$1);
                       }), 256))
                     ], 512), [
                       [vModelSelect, __props.modelValue.breadcrumb]
@@ -48459,7 +48459,7 @@ const _hoisted_15$4 = {
   key: 0,
   class: "flex sm:justify-center mb-6 lg:mb-10"
 };
-const _hoisted_16$2 = ["href", "target"];
+const _hoisted_16$1 = ["href", "target"];
 const _sfc_main$j = {
   __name: "CarouselPresenter",
   props: {
@@ -48613,7 +48613,7 @@ const _sfc_main$j = {
           }, [
             createTextVNode(toDisplayString(__props.component.button.title) + " ", 1),
             createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-          ], 8, _hoisted_16$2)
+          ], 8, _hoisted_16$1)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -48993,7 +48993,7 @@ const _sfc_main$e = {
       return ((_a = component.value) == null ? void 0 : _a.button) || {};
     });
     onMounted(() => {
-      if (leftColumn.value && rightColumn.value) {
+      if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
         rightColumn.value.style.height = `${leftColumn.value.offsetHeight}px`;
       }
     });
@@ -49014,7 +49014,11 @@ const _sfc_main$e = {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       return openBlock(), createElementBlock("div", _hoisted_1$r, [
         createElementVNode("div", {
-          class: normalizeClass(["pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row", { "[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10": (_a = section.value) == null ? void 0 : _a.revert, "justify-center": (_b = section.value) == null ? void 0 : _b.center, "md:!px-0 !ml-0 justify-end": (_c = section.value) == null ? void 0 : _c.align_left }])
+          class: normalizeClass(["pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row", {
+            "[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10": (_a = section.value) == null ? void 0 : _a.revert,
+            "justify-center": (_b = section.value) == null ? void 0 : _b.center,
+            "md:!px-0 !ml-0 justify-end": (_c = section.value) == null ? void 0 : _c.align_left
+          }])
         }, [
           ((_d = component.value) == null ? void 0 : _d.title) || ((_e = component.value) == null ? void 0 : _e.paragraph) ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -49040,9 +49044,9 @@ const _sfc_main$e = {
           ], 2)) : createCommentVNode("", true),
           ((_i = component.value) == null ? void 0 : _i.featured_image) ? (openBlock(), createElementBlock("div", {
             key: 1,
-            class: "w-full min-w-[300px] max-w-[536px] rounded-xl md:rounded-3xl overflow-hidden",
             ref_key: "rightColumn",
-            ref: rightColumn
+            ref: rightColumn,
+            class: "w-full lg:min-w-[300px] lg:max-w-[536px] rounded-xl md:rounded-3xl overflow-hidden"
           }, [
             ((_j = component.value) == null ? void 0 : _j.source_type) === "video" ? (openBlock(), createElementBlock("div", _hoisted_7$d, [
               createElementVNode("video", {
@@ -49077,31 +49081,26 @@ const _hoisted_1$q = { class: "overflow-hidden" };
 const _hoisted_2$c = { class: "pb-container mt-4" };
 const _hoisted_3$c = { class: "text-[20px] text-gray-900 font-semibold" };
 const _hoisted_4$c = ["innerHTML"];
-const _hoisted_5$c = {
-  key: 1,
-  class: "rounded-xl md:rounded-3xl overflow-hidden relative"
-};
-const _hoisted_6$c = ["src", "alt"];
-const _hoisted_7$c = ["innerHTML"];
-const _hoisted_8$b = {
+const _hoisted_5$c = ["src", "alt"];
+const _hoisted_6$c = {
   key: 1,
   class: "my-[44px]"
 };
-const _hoisted_9$b = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
-const _hoisted_10$8 = ["innerHTML"];
-const _hoisted_11$7 = {
+const _hoisted_7$c = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
+const _hoisted_8$b = ["innerHTML"];
+const _hoisted_9$b = {
   key: 0,
   class: "max-w-[48px] min-w-[48px] w-full max-h-[48px] min-h-[48px] h-full bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center"
 };
-const _hoisted_12$5 = { class: "font-semibold text-[20px] text-gray-900" };
-const _hoisted_13$5 = ["innerHTML"];
-const _hoisted_14$4 = ["href", "target"];
-const _hoisted_15$3 = ["src"];
-const _hoisted_16$1 = {
+const _hoisted_10$8 = { class: "font-semibold text-[20px] text-gray-900" };
+const _hoisted_11$7 = ["innerHTML"];
+const _hoisted_12$5 = ["href", "target"];
+const _hoisted_13$5 = ["src"];
+const _hoisted_14$4 = {
   key: 0,
-  class: "w-[560px]"
+  class: "w-full md:w-[560px] flex"
 };
-const _hoisted_17$1 = ["src", "alt"];
+const _hoisted_15$3 = ["src", "alt"];
 const _sfc_main$d = {
   __name: "TwoColumnsImageContent",
   props: {
@@ -49157,34 +49156,29 @@ const _sfc_main$d = {
                 innerHTML: paragraphComponent.value.paragraph
               }, null, 8, _hoisted_4$c)
             ], 2)) : createCommentVNode("", true),
-            imageComponent.value ? (openBlock(), createElementBlock("div", _hoisted_5$c, [
-              createElementVNode("img", {
-                src: imageComponent.value.featured_image,
-                alt: imageComponent.value.caption,
-                class: "w-full h-full object-cover"
-              }, null, 8, _hoisted_6$c),
-              createElementVNode("p", {
-                innerHTML: imageComponent.value.caption,
-                class: "mt-2 text-[13px]"
-              }, null, 8, _hoisted_7$c)
-            ])) : createCommentVNode("", true)
-          ], 4)) : (openBlock(), createElementBlock("div", _hoisted_8$b, [
+            imageComponent.value ? (openBlock(), createElementBlock("img", {
+              key: 1,
+              src: imageComponent.value.featured_image,
+              alt: imageComponent.value.caption,
+              class: "w-full rounded-xl"
+            }, null, 8, _hoisted_5$c)) : createCommentVNode("", true)
+          ], 4)) : (openBlock(), createElementBlock("div", _hoisted_6$c, [
             headerComponent.value ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(["w-full flex-col mb-6", { "text-center items-center flex": (_b = headerComponent.value) == null ? void 0 : _b.text_center }])
             }, [
-              createElementVNode("h3", _hoisted_9$b, toDisplayString(headerComponent.value.title), 1),
+              createElementVNode("h3", _hoisted_7$c, toDisplayString(headerComponent.value.title), 1),
               ((_c = headerComponent.value) == null ? void 0 : _c.supporting_text) ? (openBlock(), createElementBlock("p", {
                 key: 0,
                 class: "text-[20px] font-normal mt-4 text-gray-600 leading-[30px] max-w-[800px]",
                 innerHTML: headerComponent.value.supporting_text
-              }, null, 8, _hoisted_10$8)) : createCommentVNode("", true)
+              }, null, 8, _hoisted_8$b)) : createCommentVNode("", true)
             ], 2)) : createCommentVNode("", true),
             createElementVNode("div", {
               class: normalizeClass(featureItemsComponent.value.hasOwnProperty("grid_columns") ? "" : "flex flex-col-reverse md:flex-row gap-8")
             }, [
               createElementVNode("div", {
-                class: normalizeClass(["grid gap-8", featureItemsComponent.value.hasOwnProperty("grid_columns") ? `md:grid-cols-${featureItemsComponent.value.grid_columns}` : "lg:grid-cols-2 w-2/3"])
+                class: normalizeClass(["grid gap-8", featureItemsComponent.value.hasOwnProperty("grid_columns") ? `md:grid-cols-${featureItemsComponent.value.grid_columns}` : "lg:grid-cols-2 lg:w-2/3"])
               }, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item) => {
                   var _a2, _b2, _c2;
@@ -49195,20 +49189,20 @@ const _sfc_main$d = {
                     }])
                   }, [
                     item.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      (item == null ? void 0 : item.icon) ? (openBlock(), createElementBlock("div", _hoisted_11$7, [
+                      (item == null ? void 0 : item.icon) ? (openBlock(), createElementBlock("div", _hoisted_9$b, [
                         createVNode(_sfc_main$H, {
                           icon: item.icon,
                           "icon-classes": "w-5 h-5 text-brand-600"
                         }, null, 8, ["icon"])
                       ])) : createCommentVNode("", true),
                       createElementVNode("div", {
-                        class: normalizeClass(["max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
+                        class: normalizeClass(["md:max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
                       }, [
-                        createElementVNode("h3", _hoisted_12$5, toDisplayString(item.title), 1),
+                        createElementVNode("h3", _hoisted_10$8, toDisplayString(item.title), 1),
                         createElementVNode("p", {
                           class: "mt-2 text-md font-normal text-gray-600 leading-[24px]",
                           innerHTML: item.supporting_text ?? item.description
-                        }, null, 8, _hoisted_13$5),
+                        }, null, 8, _hoisted_11$7),
                         ((_c2 = item == null ? void 0 : item.primary_button) == null ? void 0 : _c2.show) ? (openBlock(), createElementBlock("a", {
                           key: 0,
                           class: "cursor-pointer text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4",
@@ -49217,23 +49211,23 @@ const _sfc_main$d = {
                         }, [
                           createTextVNode(toDisplayString(item.primary_button.label) + " ", 1),
                           createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-                        ], 8, _hoisted_14$4)) : createCommentVNode("", true)
+                        ], 8, _hoisted_12$5)) : createCommentVNode("", true)
                       ], 2)
                     ], 64)) : (openBlock(), createElementBlock("img", {
                       key: 1,
                       src: item.image,
                       alt: "Feature Image",
                       class: "w-full h-full object-cover"
-                    }, null, 8, _hoisted_15$3))
+                    }, null, 8, _hoisted_13$5))
                   ], 2);
                 }), 256))
               ], 2),
-              imageComponent.value ? (openBlock(), createElementBlock("div", _hoisted_16$1, [
+              imageComponent.value ? (openBlock(), createElementBlock("div", _hoisted_14$4, [
                 createElementVNode("img", {
                   src: imageComponent.value.featured_image,
                   alt: ((_d = imageComponent.value) == null ? void 0 : _d.caption) ?? "Image",
-                  class: "rounded-br-[24px] rounded-tl-[24px] w-full"
-                }, null, 8, _hoisted_17$1)
+                  class: "rounded-br-[24px] rounded-tl-[24px] w-full object-cover"
+                }, null, 8, _hoisted_15$3)
               ])) : createCommentVNode("", true)
             ], 2)
           ]))
@@ -49592,7 +49586,7 @@ const _sfc_main$9 = {
       return section.value.components.filter((component) => component.type === "bullet_points");
     });
     onMounted(() => {
-      if (leftColumn.value && rightColumn.value) {
+      if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
         leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
       }
     });
@@ -49608,7 +49602,7 @@ const _sfc_main$9 = {
             ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (openBlock(), createElementBlock("img", {
               key: 0,
               src: (_f = headerComponent.value) == null ? void 0 : _f.featured_image,
-              class: "max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl",
+              class: "lg:max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl",
               ref_key: "leftColumn",
               ref: leftColumn,
               alt: "Feature"

package/dist/page-builder.umd.js

@@ -455,7 +455,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_13$b = ["onClick"];
   const _hoisted_14$9 = ["onClick"];
   const _hoisted_15$7 = { class: "text-xs text-gray-600" };
-  const _hoisted_16$5 = { class: "text-sm font-medium text-gray-900" };
+  const _hoisted_16$4 = { class: "text-sm font-medium text-gray-900" };
   const _sfc_main$Q = {
     __name: "Items",
     props: {
@@ -545,7 +545,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                           onClick: ($event) => edit(item, index)
                         }, [
                           vue.createElementVNode("div", _hoisted_15$7, vue.toDisplayString(vue.unref(singularize)(vue.unref(parseName)(vue.unref(type)))) + " #" + vue.toDisplayString(index + 1), 1),
-                          vue.createElementVNode("div", _hoisted_16$5, vue.toDisplayString(item.title), 1)
+                          vue.createElementVNode("div", _hoisted_16$4, vue.toDisplayString(item.title), 1)
                         ], 8, _hoisted_14$9),
                         vue.createVNode(_sfc_main$S, {
                           onRemoveItem: ($event) => handleDeleteItem(index),
@@ -45237,8 +45237,8 @@ ${escapeText(this.code(index, length))}
     key: 1,
     class: "flex flex-col gap-1.5"
   };
-  const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
-  const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
+  const _hoisted_16$3 = ["onUpdate:modelValue", "maxlength"];
+  const _hoisted_17$2 = ["onUpdate:modelValue", "maxlength"];
   const _hoisted_18$2 = { key: 2 };
   const _sfc_main$C = {
     __name: "Links",
@@ -45408,7 +45408,7 @@ ${escapeText(this.code(index, length))}
                               placeholder: "Title",
                               maxlength: ((_a3 = componentData.value) == null ? void 0 : _a3.max_title) ?? 200,
                               class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                            }, null, 8, _hoisted_16$4)), [
+                            }, null, 8, _hoisted_16$3)), [
                               [vue.vModelText, item.title]
                             ]) : vue.createCommentVNode("", true),
                             isBulletPoint.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
@@ -45419,7 +45419,7 @@ ${escapeText(this.code(index, length))}
                               maxlength: ((_b2 = componentData.value) == null ? void 0 : _b2.max_title) ?? 200,
                               rows: "4",
                               class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                            }, null, 8, _hoisted_17$3)), [
+                            }, null, 8, _hoisted_17$2)), [
                               [vue.vModelText, item.title]
                             ]) : vue.createCommentVNode("", true)
                           ];
@@ -46174,8 +46174,8 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "mb-4 px-6 py-5 rounded-xl bg-gray-50"
   };
-  const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
-  const _hoisted_17$2 = ["value"];
+  const _hoisted_16$2 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
+  const _hoisted_17$1 = ["value"];
   const _hoisted_18$1 = {
     key: 1,
     class: "rounded-xl bg-gray-50 px-6 py-5"
@@ -46317,7 +46317,7 @@ ${escapeText(this.code(index, length))}
             vue.createElementVNode("div", _hoisted_14$7, [
               !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$5, [
                 _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200" }, "Settings", -1)),
-                vue.createElementVNode("div", _hoisted_16$3, [
+                vue.createElementVNode("div", _hoisted_16$2, [
                   vue.createVNode(_sfc_main$P, {
                     field: "breadcrumb",
                     "label-text": "Breadcrumb section",
@@ -46330,7 +46330,7 @@ ${escapeText(this.code(index, length))}
                         name: "url"
                       }, [
                         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.breadcrumbs, (b) => {
-                          return vue.openBlock(), vue.createElementBlock("option", { value: b }, vue.toDisplayString(b), 9, _hoisted_17$2);
+                          return vue.openBlock(), vue.createElementBlock("option", { value: b }, vue.toDisplayString(b), 9, _hoisted_17$1);
                         }), 256))
                       ], 512), [
                         [vue.vModelSelect, __props.modelValue.breadcrumb]
@@ -48462,7 +48462,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "flex sm:justify-center mb-6 lg:mb-10"
   };
-  const _hoisted_16$2 = ["href", "target"];
+  const _hoisted_16$1 = ["href", "target"];
   const _sfc_main$j = {
     __name: "CarouselPresenter",
     props: {
@@ -48616,7 +48616,7 @@ ${escapeText(this.code(index, length))}
             }, [
               vue.createTextVNode(vue.toDisplayString(__props.component.button.title) + " ", 1),
               vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-            ], 8, _hoisted_16$2)
+            ], 8, _hoisted_16$1)
           ])) : vue.createCommentVNode("", true)
         ]);
       };
@@ -48996,7 +48996,7 @@ ${escapeText(this.code(index, length))}
         return ((_a = component.value) == null ? void 0 : _a.button) || {};
       });
       vue.onMounted(() => {
-        if (leftColumn.value && rightColumn.value) {
+        if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
           rightColumn.value.style.height = `${leftColumn.value.offsetHeight}px`;
         }
       });
@@ -49017,7 +49017,11 @@ ${escapeText(this.code(index, length))}
         var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
           vue.createElementVNode("div", {
-            class: vue.normalizeClass(["pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row", { "[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10": (_a = section.value) == null ? void 0 : _a.revert, "justify-center": (_b = section.value) == null ? void 0 : _b.center, "md:!px-0 !ml-0 justify-end": (_c = section.value) == null ? void 0 : _c.align_left }])
+            class: vue.normalizeClass(["pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row", {
+              "[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10": (_a = section.value) == null ? void 0 : _a.revert,
+              "justify-center": (_b = section.value) == null ? void 0 : _b.center,
+              "md:!px-0 !ml-0 justify-end": (_c = section.value) == null ? void 0 : _c.align_left
+            }])
           }, [
             ((_d = component.value) == null ? void 0 : _d.title) || ((_e = component.value) == null ? void 0 : _e.paragraph) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
@@ -49043,9 +49047,9 @@ ${escapeText(this.code(index, length))}
             ], 2)) : vue.createCommentVNode("", true),
             ((_i = component.value) == null ? void 0 : _i.featured_image) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 1,
-              class: "w-full min-w-[300px] max-w-[536px] rounded-xl md:rounded-3xl overflow-hidden",
               ref_key: "rightColumn",
-              ref: rightColumn
+              ref: rightColumn,
+              class: "w-full lg:min-w-[300px] lg:max-w-[536px] rounded-xl md:rounded-3xl overflow-hidden"
             }, [
               ((_j = component.value) == null ? void 0 : _j.source_type) === "video" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$d, [
                 vue.createElementVNode("video", {
@@ -49080,31 +49084,26 @@ ${escapeText(this.code(index, length))}
   const _hoisted_2$c = { class: "pb-container mt-4" };
   const _hoisted_3$c = { class: "text-[20px] text-gray-900 font-semibold" };
   const _hoisted_4$c = ["innerHTML"];
-  const _hoisted_5$c = {
-    key: 1,
-    class: "rounded-xl md:rounded-3xl overflow-hidden relative"
-  };
-  const _hoisted_6$c = ["src", "alt"];
-  const _hoisted_7$c = ["innerHTML"];
-  const _hoisted_8$b = {
+  const _hoisted_5$c = ["src", "alt"];
+  const _hoisted_6$c = {
     key: 1,
     class: "my-[44px]"
   };
-  const _hoisted_9$b = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
-  const _hoisted_10$8 = ["innerHTML"];
-  const _hoisted_11$7 = {
+  const _hoisted_7$c = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
+  const _hoisted_8$b = ["innerHTML"];
+  const _hoisted_9$b = {
     key: 0,
     class: "max-w-[48px] min-w-[48px] w-full max-h-[48px] min-h-[48px] h-full bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center"
   };
-  const _hoisted_12$5 = { class: "font-semibold text-[20px] text-gray-900" };
-  const _hoisted_13$5 = ["innerHTML"];
-  const _hoisted_14$4 = ["href", "target"];
-  const _hoisted_15$3 = ["src"];
-  const _hoisted_16$1 = {
+  const _hoisted_10$8 = { class: "font-semibold text-[20px] text-gray-900" };
+  const _hoisted_11$7 = ["innerHTML"];
+  const _hoisted_12$5 = ["href", "target"];
+  const _hoisted_13$5 = ["src"];
+  const _hoisted_14$4 = {
     key: 0,
-    class: "w-[560px]"
+    class: "w-full md:w-[560px] flex"
   };
-  const _hoisted_17$1 = ["src", "alt"];
+  const _hoisted_15$3 = ["src", "alt"];
   const _sfc_main$d = {
     __name: "TwoColumnsImageContent",
     props: {
@@ -49160,34 +49159,29 @@ ${escapeText(this.code(index, length))}
                   innerHTML: paragraphComponent.value.paragraph
                 }, null, 8, _hoisted_4$c)
               ], 2)) : vue.createCommentVNode("", true),
-              imageComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$c, [
-                vue.createElementVNode("img", {
-                  src: imageComponent.value.featured_image,
-                  alt: imageComponent.value.caption,
-                  class: "w-full h-full object-cover"
-                }, null, 8, _hoisted_6$c),
-                vue.createElementVNode("p", {
-                  innerHTML: imageComponent.value.caption,
-                  class: "mt-2 text-[13px]"
-                }, null, 8, _hoisted_7$c)
-              ])) : vue.createCommentVNode("", true)
-            ], 4)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$b, [
+              imageComponent.value ? (vue.openBlock(), vue.createElementBlock("img", {
+                key: 1,
+                src: imageComponent.value.featured_image,
+                alt: imageComponent.value.caption,
+                class: "w-full rounded-xl"
+              }, null, 8, _hoisted_5$c)) : vue.createCommentVNode("", true)
+            ], 4)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$c, [
               headerComponent.value ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
                 class: vue.normalizeClass(["w-full flex-col mb-6", { "text-center items-center flex": (_b = headerComponent.value) == null ? void 0 : _b.text_center }])
               }, [
-                vue.createElementVNode("h3", _hoisted_9$b, vue.toDisplayString(headerComponent.value.title), 1),
+                vue.createElementVNode("h3", _hoisted_7$c, vue.toDisplayString(headerComponent.value.title), 1),
                 ((_c = headerComponent.value) == null ? void 0 : _c.supporting_text) ? (vue.openBlock(), vue.createElementBlock("p", {
                   key: 0,
                   class: "text-[20px] font-normal mt-4 text-gray-600 leading-[30px] max-w-[800px]",
                   innerHTML: headerComponent.value.supporting_text
-                }, null, 8, _hoisted_10$8)) : vue.createCommentVNode("", true)
+                }, null, 8, _hoisted_8$b)) : vue.createCommentVNode("", true)
               ], 2)) : vue.createCommentVNode("", true),
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(featureItemsComponent.value.hasOwnProperty("grid_columns") ? "" : "flex flex-col-reverse md:flex-row gap-8")
               }, [
                 vue.createElementVNode("div", {
-                  class: vue.normalizeClass(["grid gap-8", featureItemsComponent.value.hasOwnProperty("grid_columns") ? `md:grid-cols-${featureItemsComponent.value.grid_columns}` : "lg:grid-cols-2 w-2/3"])
+                  class: vue.normalizeClass(["grid gap-8", featureItemsComponent.value.hasOwnProperty("grid_columns") ? `md:grid-cols-${featureItemsComponent.value.grid_columns}` : "lg:grid-cols-2 lg:w-2/3"])
                 }, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items.value, (item) => {
                     var _a2, _b2, _c2;
@@ -49198,20 +49192,20 @@ ${escapeText(this.code(index, length))}
                       }])
                     }, [
                       item.title ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                        (item == null ? void 0 : item.icon) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$7, [
+                        (item == null ? void 0 : item.icon) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$b, [
                           vue.createVNode(_sfc_main$H, {
                             icon: item.icon,
                             "icon-classes": "w-5 h-5 text-brand-600"
                           }, null, 8, ["icon"])
                         ])) : vue.createCommentVNode("", true),
                         vue.createElementVNode("div", {
-                          class: vue.normalizeClass(["max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
+                          class: vue.normalizeClass(["md:max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
                         }, [
-                          vue.createElementVNode("h3", _hoisted_12$5, vue.toDisplayString(item.title), 1),
+                          vue.createElementVNode("h3", _hoisted_10$8, vue.toDisplayString(item.title), 1),
                           vue.createElementVNode("p", {
                             class: "mt-2 text-md font-normal text-gray-600 leading-[24px]",
                             innerHTML: item.supporting_text ?? item.description
-                          }, null, 8, _hoisted_13$5),
+                          }, null, 8, _hoisted_11$7),
                           ((_c2 = item == null ? void 0 : item.primary_button) == null ? void 0 : _c2.show) ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 0,
                             class: "cursor-pointer text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4",
@@ -49220,23 +49214,23 @@ ${escapeText(this.code(index, length))}
                           }, [
                             vue.createTextVNode(vue.toDisplayString(item.primary_button.label) + " ", 1),
                             vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-                          ], 8, _hoisted_14$4)) : vue.createCommentVNode("", true)
+                          ], 8, _hoisted_12$5)) : vue.createCommentVNode("", true)
                         ], 2)
                       ], 64)) : (vue.openBlock(), vue.createElementBlock("img", {
                         key: 1,
                         src: item.image,
                         alt: "Feature Image",
                         class: "w-full h-full object-cover"
-                      }, null, 8, _hoisted_15$3))
+                      }, null, 8, _hoisted_13$5))
                     ], 2);
                   }), 256))
                 ], 2),
-                imageComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$1, [
+                imageComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$4, [
                   vue.createElementVNode("img", {
                     src: imageComponent.value.featured_image,
                     alt: ((_d = imageComponent.value) == null ? void 0 : _d.caption) ?? "Image",
-                    class: "rounded-br-[24px] rounded-tl-[24px] w-full"
-                  }, null, 8, _hoisted_17$1)
+                    class: "rounded-br-[24px] rounded-tl-[24px] w-full object-cover"
+                  }, null, 8, _hoisted_15$3)
                 ])) : vue.createCommentVNode("", true)
               ], 2)
             ]))
@@ -49595,7 +49589,7 @@ ${escapeText(this.code(index, length))}
         return section.value.components.filter((component) => component.type === "bullet_points");
       });
       vue.onMounted(() => {
-        if (leftColumn.value && rightColumn.value) {
+        if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
           leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
         }
       });
@@ -49611,7 +49605,7 @@ ${escapeText(this.code(index, length))}
               ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (vue.openBlock(), vue.createElementBlock("img", {
                 key: 0,
                 src: (_f = headerComponent.value) == null ? void 0 : _f.featured_image,
-                class: "max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl",
+                class: "lg:max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl",
                 ref_key: "leftColumn",
                 ref: leftColumn,
                 alt: "Feature"

package/example/src/App.vue

@@ -109,81 +109,81 @@ const breadcrumbs = [
 
 <template>
   <div>
-<!--    <div style="margin: 40px 0;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">About Us</h1>-->
+    <div style="margin: 40px 0;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">About Us</h1>
 
-<!--      <PageRender :page="AboutUs" />-->
-<!--    </div>-->
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advocary And Research</h1>-->
+      <PageRender :page="AboutUs" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advocary And Research</h1>
 
-<!--      <PageRender :page="AdvocaryAndResearch" />-->
-<!--    </div>-->
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Best Life</h1>-->
+      <PageRender :page="AdvocaryAndResearch" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Best Life</h1>
 
-<!--      <PageRender :page="BestLife" />-->
-<!--    </div>-->
+      <PageRender :page="BestLife" />
+    </div>
     <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
       <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Home</h1>
 
       <PageRender :page="Home" />
     </div>
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Commitment</h1>-->
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Commitment</h1>
 
-<!--      <PageRender :page="OurCommitment" />-->
-<!--    </div>-->
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our History</h1>-->
+      <PageRender :page="OurCommitment" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our History</h1>
 
-<!--      <PageRender :page="OurHistory" />-->
-<!--    </div>-->
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Partner With Us</h1>-->
+      <PageRender :page="OurHistory" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Partner With Us</h1>
 
-<!--      <PageRender :page="PartnerWithUs" />-->
-<!--    </div>-->
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Vectea 2024</h1>-->
+      <PageRender :page="PartnerWithUs" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Vectea 2024</h1>
 
-<!--      <PageRender :page="Vectea2024" />-->
-<!--    </div>-->
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advisory Services</h1>-->
+      <PageRender :page="Vectea2024" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advisory Services</h1>
 
-<!--      <PageRender :page="AdvisoryServices" />-->
-<!--    </div>-->
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Assessment Support Service</h1>-->
+      <PageRender :page="AdvisoryServices" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Assessment Support Service</h1>
 
-<!--      <PageRender :page="AssessmentSupportService" />-->
-<!--    </div>-->
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Child Safe Standard</h1>-->
+      <PageRender :page="AssessmentSupportService" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Child Safe Standard</h1>
 
-<!--      <PageRender :page="ChildSafeStandard" />-->
-<!--    </div>-->
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Landing Page</h1>-->
+      <PageRender :page="ChildSafeStandard" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Landing Page</h1>
 
-<!--      <PageRender :page="LandingPage" />-->
-<!--    </div>-->
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Groups</h1>-->
+      <PageRender :page="LandingPage" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Groups</h1>
 
-<!--      <PageRender :page="OurGroups" />-->
-<!--    </div>-->
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Vision</h1>-->
+      <PageRender :page="OurGroups" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Vision</h1>
 
-<!--      <PageRender :page="OurVision" />-->
-<!--    </div>-->
-<!--    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
-<!--      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">SAEW</h1>-->
+      <PageRender :page="OurVision" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">SAEW</h1>
 
-<!--      <PageRender :page="SAEW" />-->
-<!--    </div>-->
+      <PageRender :page="SAEW" />
+    </div>
 
 <!------------------------------------------|||---------------------------------------------->
 

package/example/src/pages/Vectea2024.js

@@ -23,7 +23,7 @@ export const Vectea2024 =
           name: "Paragraph section",
           type: "paragraph",
           title: "ELAA is proudly supporting",
-          paragraph: '<p>The Victorian Government’s Best Start, Best Life reforms represent the most substantial transformation in Victoria’s early childhood sector in a generation. As part of these reforms:</p><ol><li data-list=\\"bullet\\"><span class=\\"ql-ui\\" contenteditable=\\"false\\"></span>The Three-Year-Old Kindergarten program will expand, reaching 15 hours per week across the state by 2029.</li><li data-list=\\"bullet\\"><span class=\\"ql-ui\\" contenteditable=\\"false\\"></span>The Four-Year-Old Kindergarten program will evolve into Pre-Prep, with weekly hours increasing from 15 to 30 by 2036 throughout Victoria.</li></ol><p>Extending the hours of teacher-led, play-based learning through Pre-Prep in the year before school provides children with enhanced access to the numerous benefits of early childhood education. Pre-Prep will launch in 2025, starting with children in six regional Victorian local government areas, and will gradually expand across the state.</p>',
+          paragraph: '<p>Extending the hours of teacher-led, play-based learning through Pre-Prep in the year before school provides children with enhanced access to the numerous benefits of early childhood education. Pre-Prep will launch in 2025</p>',
           featured_image: "https://beta.elaa.org.au/img/what-we-do/vectea-2024/01.jpg",
         },
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.7.9",
+  "version": "0.8.0",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"

package/src/components/presenters/modules/BulletPoints.vue

@@ -5,7 +5,7 @@
            :class="{'flex gap-8 flex-col lg:flex-row': headerComponent?.featured_image, 'flex-col-reverse lg:flex-row-reverse justify-between': headerComponent?.revert}">
         <img v-if="headerComponent?.featured_image"
              :src="headerComponent?.featured_image"
-             class="max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl"
+             class="lg:max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl"
              ref="leftColumn"
              alt="Feature"/>
         <div v-if="headerComponent" class="h-fit flex flex-col gap-4 lg:gap-8" :class="{'xl:py-[48px]': headerComponent?.featured_image, '[&]:grid lg:grid-cols-2': section?.two_column}"
@@ -61,7 +61,7 @@ const bulletPointsComponents = computed(() => {
 });
 
 onMounted(() => {
-  if (leftColumn.value && rightColumn.value) {
+  if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
     leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
   }
 });

package/src/components/presenters/modules/Paragraph.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="overflow-hidden mt-4">
-    <div class="pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row" :class="{'[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10': section?.revert, 'justify-center': section?.center, 'md:!px-0 !ml-0 justify-end': section?.align_left }">
+    <div class="pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row"
+         :class="{
+            '[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10': section?.revert,
+            'justify-center': section?.center,
+            'md:!px-0 !ml-0 justify-end': section?.align_left
+    }">
       <div class="max-w-[800px] lg:py-4" :class="{'!max-w-full w-full': section?.is_full_width }" v-if="component?.title || component?.paragraph" ref="leftColumn">
         <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" v-if="component?.title">
           {{ component.title }}
@@ -14,7 +19,9 @@
           </div>
         </div>
       </div>
-      <div class="w-full min-w-[300px] max-w-[536px] rounded-xl md:rounded-3xl overflow-hidden" v-if="component?.featured_image" ref="rightColumn">
+      <div v-if="component?.featured_image" ref="rightColumn"
+           class="w-full lg:min-w-[300px] lg:max-w-[536px] rounded-xl md:rounded-3xl overflow-hidden"
+      >
         <div v-if="component?.source_type === 'video'" class="w-full h-full relative">
           <video
               @click="togglePlayPause"
@@ -65,7 +72,7 @@ const button = computed(() => {
 })
 
 onMounted(() => {
-  if (leftColumn.value && rightColumn.value) {
+  if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
     rightColumn.value.style.height = `${leftColumn.value.offsetHeight}px`;
   }
 });

package/src/components/presenters/modules/TwoColumnsImageContent.vue

@@ -8,10 +8,8 @@
           <h3 class="text-[20px] text-gray-900 font-semibold">{{ paragraphComponent.title }}</h3>
           <p class="text-md font-normal mt-2 text-gray-600 leading-6" v-html="paragraphComponent.paragraph"></p>
         </div>
-        <div class="rounded-xl md:rounded-3xl overflow-hidden relative" v-if="imageComponent">
-          <img :src="imageComponent.featured_image" :alt="imageComponent.caption" class="w-full h-full object-cover"/>
-          <p v-html="imageComponent.caption" class="mt-2 text-[13px]"></p>
-        </div>
+        <img v-if="imageComponent" :src="imageComponent.featured_image" :alt="imageComponent.caption"
+             class="w-full rounded-xl"/>
       </div>
       <div v-else class="my-[44px]">
         <div
@@ -26,7 +24,7 @@
         </div>
         <div :class="featureItemsComponent.hasOwnProperty('grid_columns') ? '' : 'flex flex-col-reverse md:flex-row gap-8'">
           <div class="grid gap-8"
-               :class="featureItemsComponent.hasOwnProperty('grid_columns') ? `md:grid-cols-${featureItemsComponent.grid_columns}` : 'lg:grid-cols-2 w-2/3'">
+               :class="featureItemsComponent.hasOwnProperty('grid_columns') ? `md:grid-cols-${featureItemsComponent.grid_columns}` : 'lg:grid-cols-2 lg:w-2/3'">
             <div v-for="item in items"
                  class="flex gap-3 w-full"
                  :class="{
@@ -38,7 +36,7 @@
                      class="max-w-[48px] min-w-[48px] w-full max-h-[48px] min-h-[48px] h-full bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
                   <IconComponent :icon="item.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
                 </div>
-                <div class="max-w-[324px] ql-editor" :class="{'max-w-full': featureItemsComponent?.has_background}">
+                <div class="md:max-w-[324px] ql-editor" :class="{'max-w-full': featureItemsComponent?.has_background}">
                   <h3 class="font-semibold text-[20px] text-gray-900">{{ item.title }}</h3>
                   <p class=" mt-2 text-md font-normal text-gray-600 leading-[24px]" v-html="item.supporting_text ?? item.description"></p>
                   <a
@@ -54,9 +52,9 @@
               <img v-else :src="item.image" alt="Feature Image" class="w-full h-full object-cover"/>
             </div>
           </div>
-          <div v-if="imageComponent" class="w-[560px]">
+          <div v-if="imageComponent" class="w-full md:w-[560px] flex">
             <img :src="imageComponent.featured_image" :alt="imageComponent?.caption ?? 'Image'"
-                 class="rounded-br-[24px] rounded-tl-[24px] w-full"/>
+                 class="rounded-br-[24px] rounded-tl-[24px] w-full object-cover" />
           </div>
         </div>
       </div>