<?php
  $args = array(
    'post_type' => 'our-solution',
    'post_status' => 'publish',
    'order' => 'DESC',
    'posts_per_page' => 4
  );
  $my_random_post = new WP_Query ( $args );

  $num = 1;
?>   
   
      <!-- Our Solutions -->
      <div class="website-section">
        <div id="content-wrap website-section">
          <div class="floating-pattern">
            <div class="container">
              <div class="row">
                <div class="col-sm-7">
                  <div style="max-width:600px;margin: auto;">
                    <div class="title text-white">Our Solutions</div>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <div class="container container--masonary ourSolution pb-5">
        <?php
            if($my_random_post->have_posts()){
                while ( $my_random_post->have_posts () ) {
                  $my_random_post->the_post ();
        ?>
          <?php if (($num == 1) || ($num==3)){ ?>
            <a href="<?php echo the_permalink(); ?>">
              <div class="row px-3">
                <div class="col-12 col-lg-6 my-3 my-lg-auto text-white">
                  <h2><?php echo the_title(); ?></h2>
                  <p><?php echo the_field('description'); ?></p>
                </div>
                <div class="col-6 d-none d-lg-block">
                  <img src="<?php echo the_field('icon') ?>" class="mx-auto d-block" width='70%'/>
                </div>
              </div>
            </a>
          <?php }elseif(($num == 2) || ($num==4)){ ?>
            <a href="<?php echo the_permalink(); ?>">
              <div class="row px-3">
                <div class="col-6 d-none d-lg-block">
                  <img src="<?php echo the_field('icon') ?>" class="mx-auto d-block" width='70%'/>
                </div>
                <div class="col-12 col-lg-6 my-3 my-lg-auto text-white">
                  <h2><?php echo the_title(); ?></h2>
                  <p><?php echo the_field('description'); ?></p>
                </div>
              </div>
            </a>
          <?php } ?>
          <?php 
          $num ++;
            }}
          ?>
        </div>
      </div>
      <div class="custom-shape-divider-bottom-1614087807">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
        </svg>
      </div>
  </div>
      <!-- End Our Solutions -->