<!-- Image With Icon Info Grid BEGIN -->
<section class="image-with-icon-info-grid-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
    <div class="container">
        <div class="row gx-5">
            <div class="col-12 col-md-3 order-md-{{alignment}} align-self-center py-3">
                <div class="g-purple-border me-5">
                    <img class="w-100" src="{{image.url}}" alt="{{image.alt}}">
                </div>
            </div>
            <div class="col-12 col-md-9 my-auto py-3">
                <div class="icon-info-grid">
                    <div class="row row-cols-lg-2 gx-3 gy-3">
                        {{#each icon_info_cards}}
                        <div class="col-12">
                            <div class="row">
                                <div class="col">
                                    <div class="icon">
                                        <img src="{{icon.url}}" alt="{{icon.alt}}">
                                    </div>
                                    <div class="info">
                                        <div class="title">
                                            <h4>{{title}}</h4>
                                        </div>
                                        <div class="copy">
                                            <p>{{copy}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{/each}}
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
<!-- Image With Icon Info Grid END -->