Image Gallery using CSS GRID inside of Owl Carousel to Loop Through a Category of Posts (Wordpress)

front-page.php

<style>
          .grid-container-portfolio-home {
  padding-top: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap:1em;
  grid-template-areas: "main-img main-img sec-img-1 sec-img-2" "main-img main-img sec-img-3 sec-img-4" ". . . .";
  
}

.main-img { grid-area: main-img;background-size: cover;width: 100%;height:50vh; }

.sec-img-1 { grid-area: sec-img-1;background-size: cover; }

.sec-img-2 { grid-area: sec-img-2;background-size: cover; }

.sec-img-3 { grid-area: sec-img-3;background-size: cover; }

.sec-img-4 { grid-area: sec-img-4;background-size: cover; }
</style>
<!--SITE CONTENT-->
<div class="owl-carousel owl-theme" id="port">
          <?php              
              $args = array(
                'category' => 7
              );
              $the_query = new WP_Query( $args );
              if ( $the_query->have_posts() ) {

                while ( $the_query->have_posts() ) {
                  $the_query->the_post();
                  //LOOP START
                  $attachments = get_children(array('post_parent' => $post->ID,
                        'post_status' => 'inherit',
                        'post_type' => 'attachment',
                        'post_mime_type' => 'image',
                        'order' => 'ASC',
                        'orderby' => 'menu_order ID'));
                        //print_r($attachments);
                        foreach($attachments as $att_id => $attachment) {
                          $full_img_url[] = wp_get_attachment_url($attachment->ID);
                          // Your Code here
                      }
                  ?>

                  <div class="item grid-container-portfolio-home">
                  <div class="main-img" style="background-image:url('<?php if(isset($full_img_url)){echo $full_img_url[0];}?>');"></div>
                  <div class="sec-img-1" style="background-image:url('<?php if(isset($full_img_url)){echo $full_img_url[1];}?>');"></div>
                  <div class="sec-img-2" style="background-image:url('<?php if(isset($full_img_url)){echo $full_img_url[2];}?>');"></div>
                  <div class="sec-img-3" style="background-image:url('<?php if(isset($full_img_url)){echo $full_img_url[3];}?>');"></div>
                  <div class="sec-img-4" style="background-image:url('<?php if(isset($full_img_url)){echo $full_img_url[4];}?>');"></div>
                  </div>

                  <?php unset($full_img_url);//LOOP END
                }

                /* Restore original Post Data */
                wp_reset_postdata();
              } else {
                // no posts found
              }  
          
          ?>           
        </div>
        <!--SITE CONTENT-->


        <!--in the footer after enqueuing scripts-->
        <script>
        $(document).ready(function() {
      $(".owl-carousel#port").owlCarousel({
        loop: true,
        nav: true,
        dots: false,
        items: 1,
        autoplay: true,
        autoplay: 3000,
        responsive: {
          0: {
            nav: true
          },
          600: {
            nav: true
          },
          1000: {
            nav: true
          }
        }
      });
    });
        </script>