From 2e470fed49bd8fb34262075d821417185f1f99f1 Mon Sep 17 00:00:00 2001
From: Joaquin <joaquin@booqable.com>
Date: Thu, 18 Dec 2025 08:22:02 +0100
Subject: [PATCH 1/9] update section blocks

---
 sections/columns.liquid          |  2 +-
 sections/contact-form.liquid     |  4 ++++
 sections/images.liquid           |  6 +++++-
 sections/locations.liquid        |  2 +-
 sections/logos.liquid            |  2 +-
 sections/mosaic.liquid           |  2 +-
 sections/numbered-blocks.liquid  |  2 +-
 sections/products.liquid         | 10 +++++++++-
 sections/testimonials.liquid     |  6 +++++-
 snippets/accordion-block.liquid  |  2 +-
 snippets/collections-grid.liquid |  2 +-
 11 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/sections/columns.liquid b/sections/columns.liquid
index 25b24bbf..3853d017 100644
--- a/sections/columns.liquid
+++ b/sections/columns.liquid
@@ -82,7 +82,7 @@
           {%- assign button_url   = block.settings.button_url -%}
           {%- assign button_style = block.settings.button_style -%}
 
-          <div class="columns__item" id="{{- block.id -}}">
+          <div class="columns__item" id="{{- block.id -}}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
             {%- if image.url != blank -%}
               <div class="columns__image-wrapper">
                 {%- render 'image',
diff --git a/sections/contact-form.liquid b/sections/contact-form.liquid
index 307f2d25..85a11a4b 100644
--- a/sections/contact-form.liquid
+++ b/sections/contact-form.liquid
@@ -162,6 +162,8 @@
             class="contact-form__holder{% if image == blank %} no-image{% endif %}"
             style="{{- image_variables | escape -}}"
             id="{{- block.id -}}"
+            data-block-key="{{ block.id }}"
+            data-block-name="{{ block.name }}"
           >
             {%- if image.url != blank -%}
               <div class="contact-form__image-wrapper">
@@ -183,6 +185,8 @@
               class="contact-form__content"
               style="{{- text_variables | escape -}}"
               id="{{- block.id -}}"
+              data-block-key="{{ block.id }}"
+              data-block-name="{{ block.name }}"
             >
               {%- if heading != blank -%}
                 <h2 class="contact-form__heading contact-form__heading--{{- heading_size -}}">{{- heading -}}</h2>
diff --git a/sections/images.liquid b/sections/images.liquid
index 37fdcf2d..7981d497 100644
--- a/sections/images.liquid
+++ b/sections/images.liquid
@@ -335,8 +335,10 @@
             {% comment %} CSS variables end {% endcomment %}
 
             {%- if carousel -%}
-              <div id="{{ block.id }}" class="carousel__item{% if effect == 'fade' and first == false %} hide{% endif %}{% if effect == 'fade' and first %} show{%- endif -%}"{% if show_overlay %} data-overlay-color="{{- overlay_color | escape -}}"{% endif %} aria-label="Slide {{ index }}">
+              <div id="{{ block.id }}" class="carousel__item{% if effect == 'fade' and first == false %} hide{% endif %}{% if effect == 'fade' and first %} show{%- endif -%}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}"{% if show_overlay %} data-overlay-color="{{- overlay_color | escape -}}"{% endif %} aria-label="Slide {{ index }}">
                 <div class="carousel__inner">
+            {%- else -%}
+              <div data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
             {%- endif -%}
                   <div
                     id="{{ block.id }}"
@@ -413,6 +415,8 @@
             {%- if carousel -%}
                 </div>
               </div>
+            {%- else -%}
+              </div>
             {%- endif -%}
           {%- endfor -%}
 
diff --git a/sections/locations.liquid b/sections/locations.liquid
index 5b22ac28..2915c170 100644
--- a/sections/locations.liquid
+++ b/sections/locations.liquid
@@ -115,7 +115,7 @@
         {%- assign country         = location.country -%}
         {%- assign label           = block.settings.label -%}
 
-        <li class="tabs__trigger" id="{{- block.id -}}">
+        <li class="tabs__trigger" id="{{- block.id -}}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
           <input type="radio" id="tab-{{- index -}}" name="tabs" class="tabs__input" style="display: none;"{% if first %} checked{%- endif -%}>
           <label for="tab-{{- index -}}" class="tabs__trigger-label">
             <span class="tabs__heading">
diff --git a/sections/logos.liquid b/sections/logos.liquid
index 3fe9df97..4937d0df 100644
--- a/sections/logos.liquid
+++ b/sections/logos.liquid
@@ -116,7 +116,7 @@
               {%- assign image     = block.settings.image -%}
               {%- assign image_alt = block.settings.alt -%}
 
-              <div class="logos__image-wrapper" id="{{- block.id -}}">
+              <div class="logos__image-wrapper" id="{{- block.id -}}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
                 {%- if image.url != blank -%}
                   {%- render 'image',
                     image: image,
diff --git a/sections/mosaic.liquid b/sections/mosaic.liquid
index 650573ab..19715a4b 100644
--- a/sections/mosaic.liquid
+++ b/sections/mosaic.liquid
@@ -87,7 +87,7 @@
             {%- assign image = blank -%}
           {%- endif -%}
 
-          <div class="mosaic__item" id="{{- block.id -}}">
+          <div class="mosaic__item" id="{{- block.id -}}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
             <div class="mosaic__item-col{% if image == blank %} no-image{% else %} mosaic__item-col--image{%- endif -%}">
               {%- if image.url != blank -%}
                 {%- render 'image',
diff --git a/sections/numbered-blocks.liquid b/sections/numbered-blocks.liquid
index acf65e46..e529c650 100644
--- a/sections/numbered-blocks.liquid
+++ b/sections/numbered-blocks.liquid
@@ -111,7 +111,7 @@
           {%- endcapture -%}
           {% comment %} CSS variables end {% endcomment %}
 
-          <div class="numbered-blocks__item" id="{{- block.id -}}" style="{{- block_variables | escape -}}">
+          <div class="numbered-blocks__item" id="{{- block.id -}}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}" style="{{- block_variables | escape -}}">
             <div class="numbered-blocks__item-col">
               <div class="numbered-blocks__text-area">
                 <span class="numbered-blocks__index">{{- index -}}</span>
diff --git a/sections/products.liquid b/sections/products.liquid
index c9bf6ec7..2a6976b8 100644
--- a/sections/products.liquid
+++ b/sections/products.liquid
@@ -136,8 +136,12 @@
               {%- endif -%}
 
               {%- if carousel -%}
-                <div id="{{ id }}" class="carousel__item" data-index="{{- index -}}" aria-label="Slide {{ index }}">
+                <div id="{{ id }}" class="carousel__item"{% if items_type == 'blocks' %} data-block-key="{{ item.id }}" data-block-name="{{ item.name }}"{% endif %} data-index="{{- index -}}" aria-label="Slide {{ index }}">
                   <div class="carousel__inner">
+              {%- else -%}
+                {%- if items_type == 'blocks' -%}
+                  <div id="{{ id }}" data-block-key="{{ item.id }}" data-block-name="{{ item.name }}">
+                {%- endif -%}
               {%- endif -%}
                     {%- render 'product-card',
                         block_id: id,
@@ -148,6 +152,10 @@
               {%- if carousel -%}
                   </div>
                 </div>
+              {%- else -%}
+                {%- if items_type == 'blocks' -%}
+                  </div>
+                {%- endif -%}
               {%- endif -%}
             {%- endfor -%}
 
diff --git a/sections/testimonials.liquid b/sections/testimonials.liquid
index b719fb90..63a2e958 100644
--- a/sections/testimonials.liquid
+++ b/sections/testimonials.liquid
@@ -117,8 +117,10 @@
               {%- assign stars       = block.settings.stars -%}
 
               {%- if carousel -%}
-                <div id="{{ block.id }}" class="carousel__item" data-index="{{- index -}}" aria-label="Slide {{ index }}">
+                <div id="{{ block.id }}" class="carousel__item" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}" data-index="{{- index -}}" aria-label="Slide {{ index }}">
                   <div class="carousel__inner">
+              {%- else -%}
+                <div data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
               {%- endif -%}
                     <div  id="{{ block.id }}" class="testimonials__content">
                       {%- if title != blank or description != blank -%}
@@ -187,6 +189,8 @@
               {%- if carousel -%}
                   </div>
                 </div>
+              {%- else -%}
+                </div>
               {%- endif -%}
             {%- endfor -%}
 
diff --git a/snippets/accordion-block.liquid b/snippets/accordion-block.liquid
index 7196adf8..eed6cd09 100644
--- a/snippets/accordion-block.liquid
+++ b/snippets/accordion-block.liquid
@@ -22,7 +22,7 @@
       {%- assign heading = block.settings.heading -%}
       {%- assign content = block.settings.content -%}
 
-      <li class="accordion-block__item" id="{{- block.id -}}">
+      <li class="accordion-block__item" id="{{- block.id -}}" data-block-key="{{ block.id }}" data-block-name="{{ block.name }}">
         {%- if heading != blank -%}
           <input
             {% if behavior == "single" %}type="radio"{% else %}type="checkbox"{% endif %}
diff --git a/snippets/collections-grid.liquid b/snippets/collections-grid.liquid
index cd9ab56f..c2de4320 100644
--- a/snippets/collections-grid.liquid
+++ b/snippets/collections-grid.liquid
@@ -70,7 +70,7 @@
       {%- assign image   = placeholder -%}
     {%- endif -%}
 
-    <li class="collections__item" id="{{- id -}}">
+    <li class="collections__item" id="{{- id -}}"{% if items_type == "blocks" %} data-block-key="{{ item.id }}" data-block-name="{{ item.name }}"{% endif %}>
       {%- if collection != blank -%}
         <a class="collections__link" href="{{ url }}">
       {%- endif -%}

From 3a1de700482d9c21f8d34e9e28cab9bd1280a215 Mon Sep 17 00:00:00 2001
From: Joaquin <joaquin@booqable.com>
Date: Thu, 18 Dec 2025 08:22:40 +0100
Subject: [PATCH 2/9] update styles to permit overflow

---
 assets/carousel.css        |  1 -
 assets/collections.css     |  2 +-
 assets/critical.css        |  1 -
 assets/mosaic.css          | 45 ++++++++++++++++++++++++--------------
 assets/numbered-blocks.css |  1 -
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/assets/carousel.css b/assets/carousel.css
index 24f2f564..b49fb3a9 100644
--- a/assets/carousel.css
+++ b/assets/carousel.css
@@ -1,7 +1,6 @@
 .carousel {
   height: 100%;
   position: relative;
-  contain: content; /* Performance: Reduces the scope of layout recalculations */
   margin: 0 calc(-1 * var(--horizontal-padding));
   width: calc(100% + 2 * var(--horizontal-padding));
 }
diff --git a/assets/collections.css b/assets/collections.css
index 211bf0cd..1562992e 100644
--- a/assets/collections.css
+++ b/assets/collections.css
@@ -26,7 +26,6 @@
 .collections__item {
   height: 100%;
   position: relative;
-  overflow: hidden;
   border-radius: var(--border-radius-block-rounded);
 }
 
@@ -73,6 +72,7 @@
 .collections__image-item {
   display: block;
   position: absolute;
+  overflow: hidden;
   inset: 0;
 }
 
diff --git a/assets/critical.css b/assets/critical.css
index 3880bf0e..153c0bb0 100644
--- a/assets/critical.css
+++ b/assets/critical.css
@@ -292,7 +292,6 @@ img {
 /* Critical Images section styles */
 .images__wrapper {
   height: 100%;
-  overflow: hidden;
   position: relative;
   display: flex;
   align-items: stretch;
diff --git a/assets/mosaic.css b/assets/mosaic.css
index b7080f88..6e6abb34 100644
--- a/assets/mosaic.css
+++ b/assets/mosaic.css
@@ -14,7 +14,6 @@
 .mosaic__item {
   padding: 15px;
   border: 1px solid transparent;
-  overflow: hidden;
   margin: 0 0 30px;
   border-radius: var(--border-radius-block-rounded);
   contain: layout;
@@ -61,33 +60,41 @@
   border-radius: var(--border-radius-block-rounded);
 }
 
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child,
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child {
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image,
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image {
   margin: 0;
   width: 100%;
 }
 
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child .mosaic__image-wrapper,
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child .mosaic__image-wrapper {
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image-wrapper,
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image .mosaic__image-wrapper,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image .mosaic__image-wrapper,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image .mosaic__image-wrapper {
   aspect-ratio: 1 / 0.76;
   width: 100%;
 }
 
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child .mosaic__image-wrapper:has(.mosaic__image-placeholder),
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child .mosaic__image-wrapper:has(.mosaic__image-placeholder) {
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image-wrapper:has(.mosaic__image-placeholder),
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image .mosaic__image-wrapper:has(.mosaic__image-placeholder),
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image .mosaic__image-wrapper:has(.mosaic__image-placeholder),
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image .mosaic__image-wrapper:has(.mosaic__image-placeholder) {
   width: 100%;
 }
 
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child.no-image,
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child.no-image,
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image,
 .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image,
 .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image {
   aspect-ratio: 1 / 0.76;
   height: auto;
 }
 
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child .mosaic__image,
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child .mosaic__image {
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image,
+.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image .mosaic__image,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image .mosaic__image,
+.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image .mosaic__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -309,21 +316,25 @@
     align-items: center;
   }
 
-  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child,
-  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child {
+  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image,
+  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image,
+  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image,
+  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image {
     aspect-ratio: 1 / 1.3;
     width: 53%;
     height: 100%;
   }
 
-  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child .mosaic__image-wrapper,
-  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child .mosaic__image-wrapper {
+  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image-wrapper,
+  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image .mosaic__image-wrapper,
+  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image .mosaic__image-wrapper,
+  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image .mosaic__image-wrapper {
     aspect-ratio: auto;
     height: 100%;
   }
 
-  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col:first-child.no-image,
-  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col:first-child.no-image,
+  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image,
+  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image,
   .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image,
   .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image {
     height: 100%;
diff --git a/assets/numbered-blocks.css b/assets/numbered-blocks.css
index 67fe343c..13875e88 100644
--- a/assets/numbered-blocks.css
+++ b/assets/numbered-blocks.css
@@ -28,7 +28,6 @@
   border: 1px solid transparent;
   border-top: none;
   border-radius: var(--border-radius-block-rounded);
-  overflow: hidden;
 }
 
 .numbered-blocks__item-col:last-child:not(:only-child) {

From e528e1caf8d964c514d9a6a3b2b77ff65e2a82d9 Mon Sep 17 00:00:00 2001
From: Joaquin <joaquin@booqable.com>
Date: Fri, 19 Dec 2025 07:58:37 +0100
Subject: [PATCH 3/9] keep contain add padding to carousel__list

---
 .tool-versions      | 1 +
 assets/carousel.css | 5 +++++
 2 files changed, 6 insertions(+)
 create mode 100644 .tool-versions

diff --git a/.tool-versions b/.tool-versions
new file mode 100644
index 00000000..c15dc81a
--- /dev/null
+++ b/.tool-versions
@@ -0,0 +1 @@
+nodejs 22.18.0
\ No newline at end of file
diff --git a/assets/carousel.css b/assets/carousel.css
index b49fb3a9..5c8dd687 100644
--- a/assets/carousel.css
+++ b/assets/carousel.css
@@ -3,6 +3,11 @@
   position: relative;
   margin: 0 calc(-1 * var(--horizontal-padding));
   width: calc(100% + 2 * var(--horizontal-padding));
+  contain: content; /* Performance: Reduces the scope of layout recalculations */
+}
+
+.carousel__list {
+  padding: 12px 0;
 }
 
 .carousel__wrapper {

From b623f9ea45daafe469a730a876cddc4474003f38 Mon Sep 17 00:00:00 2001
From: Joaquin <joaquin@booqable.com>
Date: Fri, 19 Dec 2025 09:54:18 +0100
Subject: [PATCH 4/9] stylelint

---
 assets/mosaic.css | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/assets/mosaic.css b/assets/mosaic.css
index 6e6abb34..afaed9c0 100644
--- a/assets/mosaic.css
+++ b/assets/mosaic.css
@@ -66,6 +66,8 @@
 .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image {
   margin: 0;
   width: 100%;
+  aspect-ratio: 1 / 0.76;
+  height: auto;
 }
 
 .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image-wrapper,
@@ -83,14 +85,6 @@
   width: 100%;
 }
 
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image,
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image,
-.mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image,
-.mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image {
-  aspect-ratio: 1 / 0.76;
-  height: auto;
-}
-
 .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image,
 .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image .mosaic__image,
 .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image .mosaic__image,

From 9bd9568d13e69c6a8335c4ed50462e774396f5c8 Mon Sep 17 00:00:00 2001
From: Joaquin <joaquin@booqable.com>
Date: Mon, 22 Dec 2025 07:53:06 +0100
Subject: [PATCH 5/9] fix mosaic css

---
 assets/mosaic.css | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/assets/mosaic.css b/assets/mosaic.css
index afaed9c0..73c3562a 100644
--- a/assets/mosaic.css
+++ b/assets/mosaic.css
@@ -74,8 +74,8 @@
 .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image .mosaic__image-wrapper,
 .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image .mosaic__image-wrapper,
 .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image .mosaic__image-wrapper {
-  aspect-ratio: 1 / 0.76;
   width: 100%;
+  height: 100%;
 }
 
 .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image-wrapper:has(.mosaic__image-placeholder),
@@ -320,14 +320,11 @@
   }
 
   .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image-wrapper,
-  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image .mosaic__image-wrapper,
-  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image .mosaic__image-wrapper,
-  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image .mosaic__image-wrapper {
+  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image .mosaic__image-wrapper {
     aspect-ratio: auto;
     height: 100%;
   }
 
-  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image,
   .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image,
   .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image,
   .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image {

From b29e98af86c0a802636ce1d26e1645fad1053778 Mon Sep 17 00:00:00 2001
From: Joaquin <joaquin@booqable.com>
Date: Mon, 22 Dec 2025 08:53:05 +0100
Subject: [PATCH 6/9] change frame, not slider

---
 assets/carousel.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/assets/carousel.css b/assets/carousel.css
index 5c8dd687..8cd40c5d 100644
--- a/assets/carousel.css
+++ b/assets/carousel.css
@@ -6,10 +6,9 @@
   contain: content; /* Performance: Reduces the scope of layout recalculations */
 }
 
-.carousel__list {
-  padding: 12px 0;
+.carousel .carousel__list .block-frame .block-frame__buttons {
+  transform: translateX(-50%) !important;
 }
-
 .carousel__wrapper {
   height: 100%;
   padding: 0 var(--horizontal-padding);

From 52ea815b61d753dc83bd22e1faa8c72cf7387160 Mon Sep 17 00:00:00 2001
From: Joaquin <joaquin@booqable.com>
Date: Mon, 22 Dec 2025 09:00:23 +0100
Subject: [PATCH 7/9] spacing

---
 assets/carousel.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/carousel.css b/assets/carousel.css
index 8cd40c5d..14005700 100644
--- a/assets/carousel.css
+++ b/assets/carousel.css
@@ -9,6 +9,7 @@
 .carousel .carousel__list .block-frame .block-frame__buttons {
   transform: translateX(-50%) !important;
 }
+
 .carousel__wrapper {
   height: 100%;
   padding: 0 var(--horizontal-padding);

From c9d5b7e73b8cabeb97becb6ee865c68582f6f7fa Mon Sep 17 00:00:00 2001
From: Serhii Zlobin <serhii@booqable.com>
Date: Mon, 22 Dec 2025 14:17:57 +0200
Subject: [PATCH 8/9] Remove redundant code

---
 assets/call-to-action.css |  1 -
 assets/mosaic.css         | 13 +------------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/assets/call-to-action.css b/assets/call-to-action.css
index 14b65162..07707332 100644
--- a/assets/call-to-action.css
+++ b/assets/call-to-action.css
@@ -1,6 +1,5 @@
 .cta {
   position: relative;
-  overflow: hidden;
 }
 
 .cta__wrapper {
diff --git a/assets/mosaic.css b/assets/mosaic.css
index 73c3562a..586b2356 100644
--- a/assets/mosaic.css
+++ b/assets/mosaic.css
@@ -56,6 +56,7 @@
 
 .mosaic__image {
   max-height: 50px;
+  min-width: 40px;
   width: auto;
   border-radius: var(--border-radius-block-rounded);
 }
@@ -319,18 +320,6 @@
     height: 100%;
   }
 
-  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image-wrapper,
-  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col.no-image .mosaic__image-wrapper {
-    aspect-ratio: auto;
-    height: 100%;
-  }
-
-  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image,
-  .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image,
-  .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col--image {
-    height: 100%;
-  }
-
   .mosaic__item-col--image,
   .mosaic__list-left .mosaic__item-col.no-image,
   .mosaic__list-right .mosaic__item-col.no-image {

From 43b677ff77fb7a808558fb8c99e44ccf3bad5fa3 Mon Sep 17 00:00:00 2001
From: Serhii Zlobin <serhii@booqable.com>
Date: Mon, 22 Dec 2025 14:39:39 +0200
Subject: [PATCH 9/9] Clean up the code

---
 assets/mosaic.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/assets/mosaic.css b/assets/mosaic.css
index 586b2356..7ab46861 100644
--- a/assets/mosaic.css
+++ b/assets/mosaic.css
@@ -68,7 +68,6 @@
   margin: 0;
   width: 100%;
   aspect-ratio: 1 / 0.76;
-  height: auto;
 }
 
 .mosaic__list-left .mosaic__item:nth-child(3n + 1) .mosaic__item-col--image .mosaic__image-wrapper,
@@ -317,7 +316,6 @@
   .mosaic__list-right .mosaic__item:nth-child(3n) .mosaic__item-col.no-image {
     aspect-ratio: 1 / 1.3;
     width: 53%;
-    height: 100%;
   }
 
   .mosaic__item-col--image,