Wordpress How Can I Make More Than One Post Card?

I was trying to make a theme for myself. It is my first try and i don't know how to do it. I did a loop for create one type of card. I want make more card sections and when a post is published, the previous post will shift to the adjacent card. (Red to green etc)

This is my front-page.php

        <?php if (have_posts()) : ?>

            <?php while (have_posts()) : the_post(); ?>

                <?php
                get_template_part('template-parts/content', 'summary');
                ?>

            <?php endwhile; ?>

            <?php the_posts_pagination(); ?>

        <?php else : ?>

            <?php ?>

        <?php endif; ?>

This is the template-parts/content-summary.php

                                <a href="<?php the_permalink(); ?>"><img src="<?php echo esc_url($pk_image[0]); ?>" alt="<?php echo esc_attr(get_the_title()) ?>"></a>
                            <?php endif; ?>
                        </div>
                        <div class="pk-card-content col-8 nopadding">
                            <div class="card-content-top">
                                <?php square_posted_on(); ?>
                            </div>
                            <div class="card-content-mid">
                                <span class="card-title"><?php the_title(); ?></span>
                            </div>
                            <div class="card-content-bottom">
                                <div class="content-bottom-left">

                                </div>
                                <div class="content-bottom-right">
                                    <a href="<?php echo esc_url(get_permalink()); ?>" class="post-link">Okumaya Deam Et</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="pk-top-right">
                    <div class="pk-top-card-right pk-card">
                        <!-- etc -->
                    </div>
                </div>
            </div>
        </div><!-- row -->
    </div><!-- pk-content-bottom -->
    <div class="pk-content-bottom">
    
    </div>
</div><!-- pk-content -->