SvelteKit GraphCMS Loop Posts over Two Div layout

Question

I'm working with Sveltekit and GraphCMS. I'm able to get my posts to properly loop over a single div but want to use two divs in a list to stagger the layout. The issue is the loop is resulting in two of the same posts (one in each staggered layout/div). What's the best way to loop over each list item? Thanks in advance!

Here's the loop:

      <ul>
        {#each posts as post}
        <!-- first item -->
          <li>
            <div class="flex flex-wrap items-center -mx-4 mb-12 lg:mb-20">
              <div class="w-full lg:w-2/5 px-4">
                <div class="text-left lg:max-w-md">
                  <span class="inline-block text-xs px-2 py-1 bg-indigo-50 rounded uppercase text-indigo-500 font-semibold">Development</span>
                  <h2 class="mt-2 mb-4 text-3xl font-bold font-heading">{post.title}</h2>
                  <span class="inline-block mb-4 text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
                  <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                </div>
              </div>
              <div class="order-first lg:order-last w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
                <div class="h-96">
                  <img class="w-full h-full object-cover rounded-lg" src="plain-assets/images/indigo-600-horizontal.png" alt="">
                </div>
              </div>
            </div>
           </li>
           <!-- second item -->
           <li>
            <div class="flex flex-wrap items-center -mx-4 mb-12 lg:mb-20">
              <div class="w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
                <div class="h-96">
                  <img class="w-full h-full object-cover rounded-lg" src="plain-assets/images/indigo-600-horizontal.png" alt="">
                </div>
              </div>
              <div class="w-full lg:w-2/5 px-4">
                <div class="text-left lg:max-w-md lg:ml-auto">
                  <span class="inline-block text-xs px-2 py-1 bg-indigo-50 rounded uppercase text-indigo-500 font-semibold">Development</span>
                  <h2 class="mt-2 mb-4 text-3xl font-bold font-heading">{post.title}</h2>
                  <span class="inline-block mb-4 text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
                  <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                </div>
              </div>
            </div>
           
          </li>
          {/each} 
        </ul>