how to add ajax load more repeater template - php

Question

I'm trying to add a load more button to my front page. I have my posts set up so that I have one post in a row, and then 3 posts in a row, another 3 posts in a row, and then 1,3,3,etc. I want to add the load more button after 14 posts. I've added the short code however now when I press the load more button the posts appear all wonky. I have figured out its because I never customized my repeater code. However, I can't figure out how to properly add my template to the repeater code since I had a lot of help writing the code for my front-page.php. If anyone can help me out I would really appreciate it.
The plugin I am using is - https://wordpress.org/plugins/ajax-load-more/faq/
my front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<?php
$i = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article><?php
} else { // Small posts ?>
<article <?php post_class( 'col-sm-6 col-md-4' ); ?>>
<div class="front-thumbnail-image"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></div>
<a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article>
<?php
}
$i++;
}
wp_reset_postdata();?>
</div>
<?php
}
else {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
echo do_shortcode( '[ajax_load_more id="ajax-load" post_type="post" posts_per_page="14" pause="true" scroll="false" button_label="LOAD MORE"]' );
get_footer();
I've asked the author for help and hist suggestion was to use Ajax Load More variables (https://connekthq.com/plugins/ajax-load-more/docs/variables/) so something like this...
if ( $alm_item % 7 === 0 ) { // Large posts
} else { // Small posts
}
so I have now tried the following for my repeater template but it still does not work...
<?php
/*
* Template Name:
*/
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax-load">
<?php
$i = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $alm_item % 7 === 0 ) { // Large posts ?>
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article><?php
} else { // Small posts ?>
<article <?php post_class( 'col-sm-6 col-md-4' ); ?>>
<div class="front-thumbnail-image"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></div>
<a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();