From 628880b71b1aa85a6856b1de065eaaa701f2cc36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= <sobo@odoo.com>
Date: Fri, 23 Sep 2022 16:35:07 +0000
Subject: [PATCH] [IMP] theme_*: adapt some themes to the grid-only Masonry
 snippet

The Masonry snippet has been modified to be only in grid mode
and its templates have therefore been changed.

This commit adapts the themes that modify the Masonry templates to be
in accordance with these changes.

See community counterpart for details.

task-2973198

closes odoo/design-themes#601

X-original-commit: ef84cdf84deb44fbc7c8ee069aaa5c8ab54ecdd2
Related: odoo/odoo#102525
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../views/snippets/s_masonry_block.xml        | 32 +++++-----
 .../views/snippets/s_masonry_block.xml        | 16 ++---
 .../views/snippets/s_masonry_block.xml        | 32 +++++-----
 theme_vehicle/views/customizations.xml        | 10 ++-
 theme_yes/views/snippets/s_masonry_block.xml  | 61 ++++++++++---------
 theme_zap/views/snippets/s_masonry_block.xml  | 19 +++---
 6 files changed, 87 insertions(+), 83 deletions(-)

diff --git a/theme_bookstore/views/snippets/s_masonry_block.xml b/theme_bookstore/views/snippets/s_masonry_block.xml
index cd5bc2204..807d695ad 100644
--- a/theme_bookstore/views/snippets/s_masonry_block.xml
+++ b/theme_bookstore/views/snippets/s_masonry_block.xml
@@ -4,71 +4,71 @@
 <template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
     <!-- Little block #1 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/10","flip":[]}</attribute>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]/h3" position="before">
+    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="before">
         <div class="o_we_shape o_web_editor_Rainy_10"/>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="replace" mode="inner">
         Science fiction
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')]/p" position="replace" mode="inner">
         Discover unknown universes
     </xpath>
 
     <!-- Little block #2 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')][2]" position="attributes">
         <attribute name="class" add="o_cc o_cc1" remove="bg-200" separator=" "/>
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/02","flip":[]}</attribute>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]/h3" position="before">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="before">
         <div class="o_we_shape o_web_editor_Airy_02"/>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="replace" mode="inner">
         Biographies
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/p" position="replace" mode="inner">
         Meet great people
     </xpath>
 
     <!-- Little block #3 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')][3]" position="attributes">
         <attribute name="class" add="o_cc o_cc5" remove="bg-200" separator=" "/>
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/04","flip":[]}</attribute>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]/h3" position="before">
+    <xpath expr="//div[hasclass('col-lg-3')][3]/h3" position="before">
         <div class="o_we_shape o_web_editor_Rainy_04"/>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][3]/h3" position="replace" mode="inner">
         Horror
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][3]/p" position="replace" mode="inner">
         Enjoy your fears
     </xpath>
 
     <!-- Little block #4 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')][4]" position="attributes">
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/26","flip":[]}</attribute>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]/h3" position="before">
+    <xpath expr="//div[hasclass('col-lg-3')][4]/h3" position="before">
         <div class="o_we_shape o_web_editor_Wavy_26"/>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][4]/h3" position="replace" mode="inner">
         Romance
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][4]/p" position="replace" mode="inner">
         Read the best love stories
     </xpath>
 </template>
diff --git a/theme_notes/views/snippets/s_masonry_block.xml b/theme_notes/views/snippets/s_masonry_block.xml
index 4ffd44107..d05a1feda 100644
--- a/theme_notes/views/snippets/s_masonry_block.xml
+++ b/theme_notes/views/snippets/s_masonry_block.xml
@@ -4,41 +4,41 @@
 <template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
     <!-- Little block #01 -->
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="replace" mode="inner">
         Brussels
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')]/p" position="replace" mode="inner">
         21th of August
     </xpath>
 
     <!-- Little block #02 -->
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="replace" mode="inner">
         Paris
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/p" position="replace" mode="inner">
         24th of August
     </xpath>
 
     <!-- Little block #03 -->
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][3]/h3" position="replace" mode="inner">
         Barcelona
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][3]/p" position="replace" mode="inner">
         27th of August
     </xpath>
 
     <!-- Little block #04 -->
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][4]/h3" position="replace" mode="inner">
         Amsterdam
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][4]/p" position="replace" mode="inner">
         4th of September
     </xpath>
 </template>
diff --git a/theme_real_estate/views/snippets/s_masonry_block.xml b/theme_real_estate/views/snippets/s_masonry_block.xml
index a08afd05e..44d9779f0 100644
--- a/theme_real_estate/views/snippets/s_masonry_block.xml
+++ b/theme_real_estate/views/snippets/s_masonry_block.xml
@@ -10,69 +10,69 @@
 <template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
     <!-- Little block #1 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
         <attribute name="class" add="o_cc1" remove="o_cc2" />
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]/h3" position="before">
+    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="before">
         <span class="fa fa-star fa-2x mb-4"></span>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="replace" mode="inner">
         Increased Visibility
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')]/p" position="replace" mode="inner">
         Increase Visitor retention. Customer engagement on a website with virtual tour is 5 times longer compared to a site without it.
     </xpath>
 
     <!-- Little block #2 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')][2]" position="attributes">
         <attribute name="class" add="o_cc1" remove="o_cc3" />
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]/h3" position="before">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="before">
         <span class="fa fa-tag fa-2x mb-4"></span>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="replace" mode="inner">
         No fixed fees
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/p" position="replace" mode="inner">
         At Real Estate Agency we have fixed price fees. This means we only charge when your home sale is confirmed.
     </xpath>
 
     <!-- Little block #3 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')][3]" position="attributes">
         <attribute name="class" add="o_cc1" remove="o_cc4" />
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]/h3" position="before">
+    <xpath expr="//div[hasclass('col-lg-3')][3]/h3" position="before">
         <span class="fa fa-camera fa-2x mb-4"></span>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][3]/h3" position="replace" mode="inner">
         Pro Photo Shoot
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][3]/p" position="replace" mode="inner">
         They say an image is worth a thousand words and we know you know how important it is to have the best photography.
     </xpath>
 
     <!-- Little block #4 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')][4]" position="attributes">
         <attribute name="class" add="o_cc1" remove="o_cc2" />
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]/h3" position="before">
+    <xpath expr="//div[hasclass('col-lg-3')][4]/h3" position="before">
         <span class="fa fa-check fa-2x mb-4"></span>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][4]/h3" position="replace" mode="inner">
         Premium Quality
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][4]/p" position="replace" mode="inner">
         We are committed to delivering high quality services that enhance your brand by allowing visitors to interact virtually.
     </xpath>
 </template>
diff --git a/theme_vehicle/views/customizations.xml b/theme_vehicle/views/customizations.xml
index 72bfdf0ee..117babf55 100644
--- a/theme_vehicle/views/customizations.xml
+++ b/theme_vehicle/views/customizations.xml
@@ -106,21 +106,19 @@
 </template>
 
 <template id="s_masonry_block_image_texts_image_template" inherit_id="website.s_masonry_block_image_texts_image_template" name="Vehicle s_masonry_block">
-    <xpath expr="//div[hasclass('col-lg-3')]" position="replace">
-        <div class="col-lg-3 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_parallax_default_image);">
-            <p><br/></p>
-        </div>
+    <xpath expr="//div[hasclass('col-lg-3')]" position="replace" mode="inner">
+        <img src="/web/image/website.s_parallax_default_image" class="img img-fluid mx-auto" alt=""/>
     </xpath>
     <!-- Block #02 -->
     <xpath expr="//h3" position="replace" mode="inner">
         Electrifying <b>Performance</b>.
     </xpath>
-    <xpath expr="(//p)[2]" position="replace" mode="inner"/>
+    <xpath expr="//p" position="replace" mode="inner"/>
     <!-- Block #03 -->
     <xpath expr="(//h3)[2]" position="replace" mode="inner">
         Smarter <b>Range</b>.
     </xpath>
-    <xpath expr="(//p)[3]" position="replace" mode="inner"/>
+    <xpath expr="(//p)[2]" position="replace" mode="inner"/>
 </template>
 
 <!-- ======== REFERENCES ======== -->
diff --git a/theme_yes/views/snippets/s_masonry_block.xml b/theme_yes/views/snippets/s_masonry_block.xml
index aa2316d28..2a8c03e99 100644
--- a/theme_yes/views/snippets/s_masonry_block.xml
+++ b/theme_yes/views/snippets/s_masonry_block.xml
@@ -2,71 +2,76 @@
 <odoo>
 
 <template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
-    <!-- Col #1 - Image Block -->
-    <xpath expr="//div[hasclass('oe_img_bg')]" position="attributes">
-        <attribute name="class" add="col-lg-4 border rounded" remove="col-lg-6" separator=" "/>
-        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important;" separator="; "/>
+    <!-- Image Block -->
+    <xpath expr="//div[hasclass('o_grid_item_image')]" position="attributes">
+        <attribute name="class" add="col-lg-4 g-col-lg-4 border rounded" remove="col-lg-6 g-col-lg-6" separator=" "/>
+        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important; grid-area: 1 / 1 / 11 / 5;" separator="; "/>
     </xpath>
-    <!-- Col #2 - Little Blocks -->
-    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-        <attribute name="class" add="col-lg-8" remove="col-lg-6" separator=" "/>
-    </xpath>
-    <!-- Little block #01 - Main div -->
-    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-        <attribute name="class" add="border rounded" separator=" "/>
-        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important;" separator="; "/>
+    <!-- Image Block - Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="style" add="border-radius: 4px !important;" separator="; "/>
     </xpath>
+
+    <!-- Little Blocks -->
     <!-- Little block #01 - Title -->
     <xpath expr="//h3" position="replace" mode="inner">
         Caterers
     </xpath>
     <!-- Little block #01 - Text -->
-    <xpath expr="//*[hasclass('col-lg-6')]//p" position="replace">
+    <xpath expr="//*[hasclass('col-lg-3')]//p" position="replace">
         <p>Check out our list of favorite venues.</p>
         <p><a href="#" class="btn btn-secondary rounded-circle">Find a venue</a></p>
     </xpath>
-    <!-- Little block #02 - Main div -->
-    <xpath expr="(//*[hasclass('col-lg-6')])[2]" position="attributes">
-        <attribute name="class" add="border rounded" separator=" "/>
-        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important;" separator="; "/>
+     <!-- Little block #01 - Main div -->
+     <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
+        <attribute name="class" add="col-lg-4 g-col-lg-4 border rounded" remove="col-lg-3 g-col-lg-3" separator=" "/>
+        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important; grid-area: 1 / 5 / 6 / 9;" separator="; "/>
     </xpath>
+
     <!-- Little block #02 - Title -->
     <xpath expr="(//h3)[2]" position="replace" mode="inner">
         Venues
     </xpath>
     <!-- Little block #02 - Text -->
-    <xpath expr="(//*[hasclass('col-lg-6')])[2]//p" position="replace">
+    <xpath expr="//*[hasclass('col-lg-3')]//p" position="replace">
         <p>Checkout our list of favorite venues.</p>
         <p><a href="#" class="btn btn-secondary">Find a venue</a></p>
     </xpath>
-    <!-- Little block #03 - Main div -->
-    <xpath expr="(//*[hasclass('col-lg-6')])[3]" position="attributes">
-        <attribute name="class" add="border rounded" separator=" "/>
-        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important;" separator="; "/>
+    <!-- Little block #02 - Main div -->
+    <xpath expr="//*[hasclass('col-lg-3')]" position="attributes">
+        <attribute name="class" add="col-lg-4 g-col-lg-4 border rounded" remove="col-lg-3 g-col-lg-3" separator=" "/>
+        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important; grid-area: 1 / 9 / 6 / 13;" separator="; "/>
     </xpath>
+
     <!-- Little block #03 - Title -->
     <xpath expr="(//h3)[3]" position="replace" mode="inner">
         Attire
     </xpath>
     <!-- Little block #03 - Text -->
-    <xpath expr="(//*[hasclass('col-lg-6')])[3]//p" position="replace">
+    <xpath expr="//*[hasclass('col-lg-3')]//p" position="replace">
         <p>Find the perfect outfit for before, during and after the main event.</p>
         <p><a href="#" class="btn btn-primary">Shop</a></p>
     </xpath>
-    <!-- Little block #04 - Main div -->
-    <xpath expr="(//div[hasclass('col-lg-6')])[4]" position="attributes">
-        <attribute name="class" add="border rounded" separator=" "/>
-        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important;" separator="; "/>
+    <!-- Little block #03 - Main div -->
+    <xpath expr="//*[hasclass('col-lg-3')]" position="attributes">
+        <attribute name="class" add="col-lg-4 g-col-lg-4 border rounded" remove="col-lg-3 g-col-lg-3" separator=" "/>
+        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important; grid-area: 6 / 5 / 11 / 9;" separator="; "/>
     </xpath>
+
     <!-- Little block #04 - Title -->
     <xpath expr="(//h3)[4]" position="replace" mode="inner">
         FAQ
     </xpath>
     <!-- Little block #04 - Text -->
-    <xpath expr="(//*[hasclass('col-lg-6')])[4]//p" position="replace">
+    <xpath expr="//*[hasclass('col-lg-3')]//p" position="replace">
         <p>Find the answers to all your questions <br/>in our FAQ.</p>
         <p><a href="#" class="btn btn-primary">Go to FAQ</a></p>
     </xpath>
+    <!-- Little block #04 - Main div -->
+    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
+        <attribute name="class" add="col-lg-4 g-col-lg-4 border rounded" remove="col-lg-3 g-col-lg-3" separator=" "/>
+        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important; grid-area: 6 / 9 / 11 / 13;" separator="; "/>
+    </xpath>
 </template>
 
 </odoo>
diff --git a/theme_zap/views/snippets/s_masonry_block.xml b/theme_zap/views/snippets/s_masonry_block.xml
index 8aa0d4e23..b6f9bc0ed 100644
--- a/theme_zap/views/snippets/s_masonry_block.xml
+++ b/theme_zap/views/snippets/s_masonry_block.xml
@@ -3,11 +3,11 @@
 
 <template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
     <!-- Block #01 -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
         <attribute name="class" add="o_cc1" remove="o_cc2" separator=" "/>
     </xpath>
     <xpath expr="//h3" position="replace"/>
-    <xpath expr="(//p)[2]" position="replace" mode="inner">
+    <xpath expr="//p" position="replace" mode="inner">
         <em class="lead">Maintain a position of constant change<br/> and evolution, while always aiming<br/> for your success.</em>
     </xpath>
     <!-- Block #02 -->
@@ -17,7 +17,7 @@
     <xpath expr="//h3" position="replace" mode="inner">
         Super <b>Easy</b>
     </xpath>
-    <xpath expr="(//p)[3]" position="replace" mode="inner"/>
+    <xpath expr="(//p)[2]" position="replace" mode="inner"/>
     <!-- Block #03 -->
     <xpath expr="(//h3)[2]" position="before">
         <i class="fa fa-2x fa-rocket text-o-color-1 rounded-circle shadow mx-auto my-3"/>
@@ -25,13 +25,14 @@
     <xpath expr="(//h3)[2]" position="replace" mode="inner">
         Super <b>Fast</b>
     </xpath>
-    <xpath expr="(//p)[4]" position="replace" mode="inner"/>
+    <xpath expr="(//p)[3]" position="replace" mode="inner"/>
     <!-- Block #04 -->
-    <xpath expr="(//h3)[3]" position="replace" mode="inner"/>
-    <xpath expr="(//p)[5]" position="replace" mode="inner"/>
-    <xpath expr="//*[hasclass('col-lg-6')][2]//*[hasclass('col-lg-6')][4]" position="attributes">
-        <attribute name="class" add="oe_img_bg" separator=" "/>
-        <attribute name="style" add="background-image: url('/web/image/website.s_masonry_block_default_image_2'); background-position: 50% 0%;" separator=" "/>
+    <xpath expr="//*[hasclass('col-lg-3')][4]" position="attributes">
+        <attribute name="class" add="o_grid_item_image" remove="o_cc o_cc2" separator=" "/>
+        <attribute name="contenteditable" add="false" separator=" "/>
+    </xpath>
+    <xpath expr="//*[hasclass('col-lg-3')][4]" position="replace" mode="inner">
+        <img src="/web/image/website.s_masonry_block_default_image_2" class="img img-fluid mx-auto" alt=""/>
     </xpath>
 </template>