Site icon Hip-Hop Website Design and Development

Loop increase in while loop not working

I’m aiming to create a layout where the first post is full-width in the loop, all the posts after are 50%.

I created this code:

<?php if ( $query->have_posts() ) : ?>

                                <!-- begin loop -->
                                <?php $i=0; ?>
                                <?php while ( $query->have_posts() ) : $query->the_post();  $i++  ?>

                                <?php
                                if ( $i = 1) { 
                                
                                
                                ?>

                                <article class="col-12">
                                    <div class="item-inner-main">
                                        <div class="image-blocks-main">
                                            <a href="<?php the_permalink(); ?>">
                                                <img src="<?php the_post_thumbnail_url( 'owl-size' ); ?>">

                                        </div>
                                        <div class="text-holder-main text-holder-main-desktop-position">
                                            <time class="time "><span
                                                    class="year"><?php the_time( 'M.j' ); ?></span><span
                                                    class="lightorange"><?php the_time( 'H:i' ); ?></span></time>
                                            <h2><?php the_title(); ?>
                                            </h2>
                                        </div>
                                    </div>
                                    </a>
                                    <h1><?php echo $i; ?></h1>
                                </article>



                                <?php 
                                } if ($i >= 2) {  ?>
                                <article class="col-6">
                                    <div class="item-inner-main">
                                        <div class="image-blocks-main">
                                            <a href="<?php the_permalink(); ?>">
                                                <img src="<?php the_post_thumbnail_url( 'owl-size' ); ?>">


                                        </div>
                                        <div class="text-holder-main">
                                            <time class="time "><span
                                                    class="year"><?php the_time( 'M.j' ); ?></span><span
                                                    class="lightorange"><?php the_time( 'H:i' ); ?></span></time>
                                            <h2 class="entry-title-main item-main-half">
                                                <?php the_title(); ?>
                                            </h2>
                                        </div>
                                    </div>
                                    </a>
                                </article>
                                <h1><?php echo $i; ?></h1>
                                <?php } 
                                
                                ?>



                                <?php endwhile; ?>

However, when I test this code, all the posts output the number 1. I don’t understand why the $i is not incrementing. Any ideas?

Thanks!