<!-- Product Carousel BEGIN -->
<section class="product-carousel-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
    <div class="container">
        <div class="row justify-content-center rounded bg-color-gradient-light-blue">
            <div class="col-10">
                <div class="products">
                    {{#each product_slides}}
                    <div class="product-slide">
                        <div class="row row-cols-1 row-cols-lg-2 justify-content-center gx-4">
                            <div class="col-8 col-lg-4 p-relative mt-4">
                                <div class="g-sky-border">
                                    <div class="product-image">
                                        <img class="p-3" src="{{image.url}}" alt="{{image.alt}}">
                                    </div>
                                </div>
                            </div>
                            <div class="col col-lg-8 my-auto text-center text-lg-start">
                                <div class="title mt-4 mt-lg-0 mb-2">
                                    <h4>{{title}}</h4>
                                </div>
                                <div class="copy mb-3">
                                    <p>{{copy}}</p>
                                </div>
                                <div class="link">
                                    {{#if link}}
                                    <a class="button--primary" href="{{link.url}}">{{link.title}}</a>
                                    {{/if}}
                                </div>
                            </div>
                        </div>
                    </div>
                    {{/each}}
                </div>
            </div>
        </div>
    </div>

    <!-- Slick Carousel -->
    <script type="text/javascript">
        $(window).on('load', function () {
            $('.products').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                dots: true,
                autoplay: true,
                arrows: true,
            });
        });
    </script>
</section>
<!-- Product Carousel END -->