<div id="theme-section-1537197792650" class="theme-section">
    <div data-section-id="1537197792650" data-section-type="home-builder" class="container" style="max-width: 90%;">

        <div class="overflow-x-hidden">
            <div class="row mt-0 mb-40 justify-content-start align-items-start">
                @foreach($channels as $channel)
                    <div class="col-12 col-md-4 mt-0 mb-10 mb-sm-15 mb-md-15 mb-lg-15 mb-xl-15">
                        <div class="promobox promobox--type-05 image-animation-trigger position-relative d-flex flex-column align-items-center text-center">
                            <a href="{{ $channel->productsPage() }}" class="w-100">
                                <div class="image-animation image-animation--from-default image-animation--to-center image-animation--to-opacity">
                                    <div class="rimage" style="padding-top:72.97297297297297%;">
                                        <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                                            class="rimage__img rimage__img--fade-in lazyload"
                                            data-master="{{ $channel->image() }}"
                                            data-aspect-ratio="1.3703703703703705"
                                            data-srcset="{{ $channel->image() }} 1x, {{ $channel->image() }} 2x"
                                            data-scale-perspective="1.1"
                                            alt="">
                                    </div>
                                </div>
                            </a>
                            <div class="promobox__plate promobox__plate--hovered position-absolute d-flex flex-column flex-center px-10 py-7 pointer-events-none">
                                <a href="a" class="pointer-events-all">
                                    <p class="promobox__text-line-01 h5 position-relative m-0">{{ $channel->name }}</p>
                                </a>
                            </div>
                            <div class="promobox__content-scale position-absolute d-none d-lg-flex flex-column flex-center px-15 py-7 pointer-events-none">
                                    <a href="{{ $channel->productsPage() }}" class="pointer-events-all">
                                        <p class="promobox__text-line-01 h5 position-relative m-0">{{ __('View products') }}</p>
                                    </a>
                                </div>
                        </div>
                    </div>    
                @endforeach
            </div>
        </div>
    </div>

    <script>
        Loader.require({
            type: "script",
            name: "home_builder"
        });
    </script>
</div>
