<?xml version="1.0"?>
<t t-name="website.s_masonry_block_mosaic_template">
    <div class="row o_grid_mode" data-row-count="10" style="gap: 16px;">
        <div class="o_grid_item o_cc o_cc3 g-height-3 g-col-lg-3 col-lg-3 justify-content-start order-lg-0 rounded-3" data-name="Block" style="order: 1; z-index: 1; --grid-item-padding-y: 20px; --grid-item-padding-x: 20px; grid-area: 1 / 1 / 4 / 4; linear-gradient(135deg, var(--o-color-4) -400%, var(--o-color-2) 100%);">
            <h3>Innovation</h3>
            <p>How ideas come to life</p>
        </div>
        <div class="o_grid_item o_cc o_cc2 g-height-3 g-col-lg-3 col-lg-3 justify-content-start order-lg-0 rounded-3" data-name="Block" style="order: 2; z-index: 2; --grid-item-padding-y: 20px; --grid-item-padding-x: 20px; grid-area: 1 / 4 / 4 / 7;">
            <h3>Focus</h3>
            <p>Building connections</p>
        </div>
        <div class="o_grid_item o_grid_item_image g-height-7 g-col-lg-6 col-lg-6 rounded-3 text-center order-lg-0" data-name="Block" style="order: 0; z-index: 3; grid-area: 1 / 7 / 8 / 13;">
            <img src="/web/image/website.s_masonry_block_default_image_2" class="img img-fluid mx-auto" alt=""/>
        </div>
        <div class="o_grid_item o_grid_item_image g-height-7 g-col-lg-6 col-lg-6 rounded-3 text-center order-lg-0" data-name="Block" style="order: 3; z-index: 4; grid-area: 4 / 1 / 11 / 7;">
            <img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
        </div>
        <div class="o_grid_item o_cc o_cc2 g-height-3 g-col-lg-3 col-lg-3 justify-content-center text-center order-lg-0 rounded-3" data-name="Block" style="order: 4; z-index: 5; --grid-item-padding-y: 20px; --grid-item-padding-x: 20px; grid-area: 8 / 7 / 11 / 10;">
            <h3 class="display-1-fs">22%</h3>
            <p>Reaching new heights</p>
        </div>
        <div class="o_grid_item o_cc o_cc4 g-height-3 g-col-lg-3 col-lg-3 justify-content-center text-center order-lg-0 rounded-3" data-name="Block" style="order: 5; z-index: 6; --grid-item-padding-y: 20px; --grid-item-padding-x: 20px; grid-area: 8 / 10 / 11 / 13; linear-gradient(135deg, var(--o-color-4) -400%, var(--o-color-1) 100%);">
            <h3 class="display-1-fs">+12</h3>
            <p>Mark the difference</p>
        </div>
    </div>
</t>

