<!-- Image with Checklist BEGIN -->
<section class="image-with-checklist-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
    <div class="container-fluid image-with-checklist-wrapper">
        <div class="container">
            <div class="row justify-content-center align-items-center">
                <div class="col-auto p-3">
                    <img class="img-fluid g-sky-border" src="{{image.url}}" alt="{{image.alt}}" />
                </div>
                <div class="col-auto col-lg-6 my-auto p-3">
                    <div class="image-with-checklist-copy">{{{copy}}}</div>
                    <div class="image-with-checklist-list">
                        {{#each checklist_items}}
                        <div class="row mb-2">
                            <div class="d-flex">
                                <div class="check me-2 mt-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="#5BB25D" class="bi bi-check-lg" viewBox="0 0 16 16">
                                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z" />
                                    </svg>
                                </div>
                                <div class="checklist-item">
                                    <p class="m-0">{{checklist_item}}</p>
                                </div>
                            </div>
                        </div>
                        {{/each}}
                    </div>
                    {{#if link}}
                    <div class="link mt-4">
                        <a class="button--primary" href="{{link.url}}">{{link.title}}</a>
                    </div>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Image with Checklist END -->