Display Flexbox Image Group

flexbox-image-group.php

<?php if( have_rows('the_images') ): ?>
    <div class="container">
      <div class="row-1">
        <div class="squares row-item">
          <div class="square">
              <?php
                $image = get_field('square_text');
                if( !empty($image) ): ?>
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                <?php endif; ?>
          </div>
          <div class="square">
              <?php
                $image = get_field('square_blank');
                if( !empty($image) ): ?>
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                <?php endif; ?>
          </div>
        </div>
        <div class="tall row-item">
            <?php
              $image = get_field('tall_text');
              if( !empty($image) ): ?>
                  <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
              <?php endif; ?>
        </div>
        <div class="tall row-item">
            <?php
              $image = get_field('tall_blank');
              if( !empty($image) ): ?>
                  <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
              <?php endif; ?>
        </div>
      </div>
      <div class="row-2">
        <div class="wide row-item">
            <?php
              $image = get_field('wide_text');
              if( !empty($image) ): ?>
                  <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
              <?php endif; ?>
        </div>
        <div class="wide row-item">
            <?php
              $image = get_field('wide_blank');
              if( !empty($image) ): ?>
                  <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
              <?php endif; ?>
        </div>
      </div>
    </div>

<?php endif;