<div class="images">
    @if(sizeof($page->content->reasons_row->images) > 1)
        <div id="image-slider">
            <div class="placeholder">
                @foreach($page->content->reasons_row->images as $key => $imageSlide)

                    <figure data-order="{{$key}}" class="image-placeholder">

                        @foreach(['large', 'medium', 'small'] as $imageSize)
                            <span class="{{$imageSize}}"
                                  style="background-image: url('{{ $imageSlide->{$imageSize.'_image_url'} }}');"></span>
                        @endforeach

                    </figure>

                @endforeach

                <div class="controllers">


                    @foreach($page->content->reasons_row->images as $key => $imageSlide)

                        <div class="dots @if($key == 0) active @endif"
                             data-order="{{$key}}">
                        </div>

                    @endforeach
                </div>
            </div>
        </div>
        
    @elseif(sizeof($page->content->reasons_row->images) == 1)

        @foreach(['medium', 'small'] as $imageSize)
            <span class="{{$imageSize}}"
                  style="background-image: url('{{ $page->content->reasons_row->images[0]->{$imageSize.'_image_url'} }}');"></span>
        @endforeach

            <picture>
                <source media="(max-width:425px)"
                        srcset="{{$page->content->reasons_row->images[0]->small_image_url}}">
                <img src="{{$page->content->reasons_row->images[0]->medium_image_url}}"
                     alt="image"> 
            </picture>

    @endif

</div>