I don't know how to loop articles with different outputs at the beginning and the end of the page.

I'm creating a homepage with WordPress.
* I'm a beginner and I just touched PHP a little while ago.Also, it's a double post.
https://teratail.com/questions/3d01olss0x2g5w
https://qiita.com/keikkkk/questions/7915609d5acb9d3438fc

Currently, I am creating a list of posts on the archive page and

at the end of the site using the plug-in WP-PageNavi Creating Page Nation

The output can be different at the beginning and end of the looping process. https://on-ze.com/archives/7464
That's it.

In the first and later loops,
The image size needs to be changed.
The image in the first article is small in length and the second one is large.

To use the plug-in, click https://senoweb.jp/note/wp-pagenavi-howto/
We worked on this.

You cannot use this first and last two looping and pageation at the same time.

<?php get_header();?>
<section class="blog-archive-wrapper">
    <div class="blog-archive-wrapper-second">
        <div class="blog-archive-outer">    
            <h2class="blog-archive-outer-title">New arrivals </h2>  
   <div>
    <?php
        $paged=get_query_var('paged') ?get_query_var('paged'):1;
        $information = new WP_Query(array(
                    'post_type' = > 'post',
                    'paged' = > $paged,
                    'post_status' = > 'public',
                    'posts_per_page' = > 10,
                ));
        if($information->have_posts():
    ?>
    <ul><!---loop-->
        <?php while($information->have_posts():$information->the_post();?>  
        <li>

 <?php if($wp_query->current_post==0){?>                   
<?php
$args = array(
    'posts_per_page' = > 1,
);
$the_query=newWP_Query($args);
?>

 <a href="<?php the_permalink();?>"class="blog-item">/a> 
        <div class="blog-item-thumbnail-content">
        <div class="blog-list-wrapper-second"> 
          <?php//Show eye catch start?>    
            <div class="blog-item-thumbnail-second">
                <?php if(has_post_thumbnail()):?>
                <div class="thumbnail-image-second"><?php the_post_thumbnail(array(240,148));?></div>
                <?php endif;?>
            </div>
            <?php//end?> to display eye catch
        </div>  
        <div class="blog-list-category">
         
<?php$cat=get_the_category();?>
<?php$cat=$cat[0];?>
<p class="blog-list-category-title"><?php echo get_cat_name($cat->term_id);?></p>
        </div>
              
        <div class="blog-item-content"> 
                 <p class="blog-item-day-second">?php the_time('Y-m-d');?>/p>
                <?php//start to display title?>
                <h3class="blog-item-title">
                <?phpechomb_substr($post->post_title,0,30).'...';?>
               </h3>
                <?php//end?> to display the title
              <?php//start to display excerpts?>
                    <?php the_excerpt();?> 
                <?php//end?> to display excerpts     
        </div>
    </div>



    <?php}?>
<?php
$args = array(
    'posts_per_page' = > 9,
    'offset' = > 1,
);
$the_query=newWP_Query($args);
?>

  <div class="blog-list-category">
  <?php$cat=get_the_category();?>


<?php$cat=$cat[0];?>
<p class="blog-list-category-title"><?php echo get_cat_name($cat->term_id);?></p>
  </div>
 <div class="blog-list-list-item">
 <a href="<?php the_permalink();?>"class="blog-item">/a> 

        <div class="blog-item-thumbnail-content-second">
        <div class="blog-list-wrapper"> 
          <?php//Show eye catch start?>    
            <div class="blog-item-thumbnail-second">
                <?php if(has_post_thumbnail()):?>
                <div class="thumbnail-image"><?php the_post_thumbnail(array(240,179));?>/div>
                <?php endif;?>
            </div>
            <?php//end?> to display eye catch
        </div>  
              
        <div class="blog-item-content"> 
                 <p class="blog-item-day-second">?php the_time('Y-m-d');?>/p>
                <?php//start to display title?>
                <h3class="blog-item-title">
                <?phpechomb_substr($post->post_title,0,30).'...';?>
               </h3>
                <?php//end?> to display the title
              <?php//start to display excerpts?>
                <p class="blog-item-read">
                    <?php the_excerpt();?> 
                </p>
                <?php//end?> to display excerpts     
        </div>
    </div> 
</div>

 <?php endwhile;?>
   </div> 
                </li>
               
        </ul>
        <?php
              // Reset Subquery
        wp_reset_postdata();
        ?>

<?php
    if(function_exists('wp_pagenavi'){
            wp_pagenavi(array('query'=>$information)));
     }
?>
<?php endif;?>
</div>

 </div>     
</section>
<?php get_footer();?>

.blog-list-wrapper{
  display:flex;
}
.blog-item-thumbnail-content{
  display:flex;
}
.blog-archive-wrapper{
  width —70.31953125vw;
  margin:0 auto;
}
.blog-item-thumbnail
  .blog-item-thumbnail-image
  img.attachment-150x110.size-150x110.wp-post-image{
  height —179px;
  width:240px;
  object-fit:cover;
}
.blog-archive-outer-title{
  font-weight:bold;
  font-size: 3.2 rem;
  text-align:center;
  padding-top —4.677vw;
  padding-bottom —4.6875vw;
}
.img-price-third{
  position:relative;
  height —221px;
}
img.main-img-third {
  height —221px;
  width: 100%;
}
.blog-item-content{
  padding-left —3.90625vw;
}
.blog-item-content.blog-item-day{
  font-size —1.6 rem;
  color: #1b224c;
  padding-bottom —1.40625vw;
}
.blog-item-content.blog-item-title{
  font-size: 2.6 rem;
  padding-bottom: 1.5625vw;
}
.blog-item-content p{
  font-size: 1.25vw;
}
.blog-item-content p{
  font-size: 1.25vw;
}
.blog-item-thumbnail-content{
  display:flex;
  padding-bottom —7.265625vw;
}
.blog-item-day-second {
  padding-bottom: 1.5625vw;
}
img.attachment-240x148.size-240x148.wp-post-image{
  height: 148px;
  width:240px;
  object-fit:fill;
  position:relative;
}
img.attachment-240x179.size-240x179.wp-post-image{
  height —179px;
  width:240px;
  object-fit:fill;
}
.blog-list-category{
  width —80px;
  height —28px;
  background-color:#1b224c;
  position:absolute;
  left—14.84375vw;
  color:#fff;
  line-height —28px;
  text-align:center;
}
.blog-item-thumbnail-content{
  display:flex;
  padding-bottom —7.265625vw;
  height: 148px;
}
.blog-item-thumbnail-content-second {
  display:flex;
  padding-bottom —4.765625vw;
}
.blog-item-thumbnail-content-second:last-child {
  padding-bottom: 8.515625vw;
}
.pagination{
  display:flex;
}
h2.screen-reader-text{
  display: none;
}
ul.page-number {
  display:flex;
}
ul.page-number li{
  width —3.75vw;
  height —3.75vw;
  border —1px solid#1b224c;
  text-align:center;
  line-height —3.90625vw;
  margin-right —1.484375vw;
}
ul.page-number li:last-child {
  margin-right:0vw;
}
ul.page-number span.page-number.current{
  font-size —1.6 rem;
  text-decoration: none;
  font-weight:bold;
  color:#fff;
}
ul.page-number li:nth-of-type(4){
  border: none;
}
span.page-number.current{
  font-size —1.6 rem;
  text-decoration: none;
  color: #1b224c;
  font-weight:bold;
}
a.page-number {
  font-size —1.6 rem;
  text-decoration: none;
  color: #1b224c;
  font-weight:bold;
}