<?xml version="1.0"?>
<t name="Masonry" t-name="website.s_masonry_block_default_template">
    <t t-snippet-call="website.s_masonry_block">
        <div class="row o_grid_mode" data-row-count="8" style="gap: 16px;">
            <div class="o_grid_item o_grid_item_image g-height-8 g-col-lg-5 col-lg-5 text-center order-lg-0 rounded-4" data-name="Block" style="order: 0; z-index: 1; grid-area: 1 / 1 / 9 / 6;">
                <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-4 g-col-lg-3 col-lg-3 justify-content-end order-lg-0 rounded-4" data-name="Block" style="order: 2; --grid-item-padding-y: 20px; --grid-item-padding-x: 20px; z-index: 2; grid-area: 1 / 6 / 5 / 9;">
                <h3>Key <br class="d-none d-lg-inline"/>Milestone</h3>
                <p>Reaching new heights</p>
            </div>
            <div class="o_grid_item o_cc o_cc3 g-height-4 g-col-lg-4 col-lg-4 justify-content-end order-lg-0 rounded-4" data-name="Block" style="order: 1; --grid-item-padding-y: 20px; --grid-item-padding-x: 20px; z-index: 3; grid-area: 1 / 9 / 5 / 13; background-image: linear-gradient(135deg, var(--o-color-4) -400%, var(--o-color-2) 100%);">
                <h3>Greater <br class="d-none d-lg-inline"/>Impact</h3>
                <p>Making a difference every day</p>
            </div>
            <div class="o_grid_item o_cc o_cc4 g-height-4 g-col-lg-4 col-lg-4 justify-content-end order-lg-0 rounded-4" data-name="Block" style="order: 3; --grid-item-padding-y: 20px; --grid-item-padding-x: 20px; z-index: 4; grid-area: 5 / 6 / 9 / 10; background-image: linear-gradient(135deg, var(--o-color-4) -400%, var(--o-color-1) 100%);">
                <h3>Innovation <br class="d-none d-lg-inline"/>Hub</h3>
                <p>Where ideas come to life</p>
            </div>
            <div class="o_grid_item o_cc o_cc2 g-height-4 g-col-lg-3 col-lg-3 justify-content-end order-lg-0 rounded-4" data-name="Block" style="order: 4; --grid-item-padding-y: 20px; --grid-item-padding-x: 20px; z-index: 5; grid-area: 5 / 10 / 9 / 13;">
                <h3>Community <br class="d-none d-lg-inline"/>Focus</h3>
                <p>Building connections</p>
            </div>
        </div>
    </t>
</t>

