Grid Layout for multi image CMS

Hello,

I’m designing a portfolio website and am having some trouble with the “Project Template” Page. I have multiple layouts that are getting pulled from the CMS and they are getting displayed as different grids using this technique. Creating multiple layouts for Webflow collection template pages - YouTube

The images are being pulled from a multi image gallery in the Projects Collection.

I am facing an issue that I’m not being able to trace. The grid layout has 1 large image first and then 2 50% width images below and a large image and so on. The various layouts have different variations of the same logic.

However, my display is stacking all the images vertically and they aren’t getting wrapped properly. The individual elements are showing me the exact same formatting details and I’m not being able to make any adjustments to them.

Providing the preview link below. Please refer to the “Project Template Page” and go to the Project called “Collectius” and “Whistling Duck” to see the problem.

    Images are not wrapping correctly
     Image div elements are showing that they are set to a 100% width but are appearing as a two 
     column grid. 

Here is my site Read-Only:

https://preview.webflow.com/preview/lmno-6?utm_medium=preview_link&utm_source=designer&utm_content=lmno-6&preview=a97f64701de269cc20ea0e30c5203123&pageId=5d7ed84c500ecc663bd08611&itemId=5ee9259cd8ecd45b72ccfe7d&mode=preview

I’ve figured out a solution by putting an html embed for the collection item divs. However I’m not sure how to create a different rule for the mobile view.