How to add post loop to repeater template

I have my posts set up in a loop on my front page so that it’s one large post in the first row, 3 small posts in second row, 3 small posts in third row, etc. How would I add this to the post repeater template?

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() ) { ?>
<div id=”ajax-load”>
<?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>“><?php the_title(); ?></h2>
<p class=”front-page-post-excerpt”><?php echo get_the_excerpt(); ?></p>
“>Read more
<?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>
“><?php the_title(); ?>
<p class=”front-page-post-excerpt”><?php echo get_the_excerpt(); ?></p>
“>Read more
<?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) {
echo do_shortcode( ‘[ajax_load_more id=”ajax-load” post_type=”post” posts_per_page=”14″ pause=”true” scroll=”false” button_label=”LOAD POSTS”]’ );
}
}
elseif (!get_query_var(‘paged’) || get_query_var(‘paged’) == ‘1’) {
echo ‘<p>Sorry, no posts matched your criteria.</p>’;
}
wp_reset_postdata();
get_footer();

what I tried adding to the repeater template…
<div id=”ajax-load”>
<?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>“><?php the_title(); ?></h2>
<p class=”front-page-post-excerpt”><?php echo get_the_excerpt(); ?></p>
<div class=”front-post-info”>
“>Read more
<?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>
“><?php the_title(); ?>
<p class=”front-page-post-excerpt”><?php echo get_the_excerpt(); ?></p>
“>Read more
<?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>