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

                    <figure data-order="<?php echo $key; ?>" class="image-placeholder">

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

                    </figure>

                <?php endforeach; ?>

                <div class="controllers">


                    <?php foreach($page->content->reasons_row->images as $key => $imageSlide): ?>

                        <div class="dots <?php if($key == 0): ?> active <?php endif; ?>"
                             data-order="<?php echo $key; ?>">
                        </div>

                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        
    <?php elseif(sizeof($page->content->reasons_row->images) == 1): ?>

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

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

    <?php endif; ?>

</div>