Problems with Wordpress image gallery formatting

[Russinating]

I'm having major problems replicating Wordpress's post preview with actually what it's outputting. See below.



Left is how Wordpress is displaying the image gallery when editing the post, right is the gallery on the post preview. It is a totally custom template - I know my way around HTML/CSS/PHP etc - but unless I'm totally missing something (because it's 4.30pm) I can't see that it's posting any classes unique to the third image that should be full-width horizontal.

Below is the code on the preview render page (with URLS taken out for legibility):

<figure class="wp-block-gallery columns-2 is-cropped">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item"><figure><img src="/" alt="" data-id="724" class="wp-image-724" srcset="/" /></figure></li>
<li class="blocks-gallery-item"><figure><img src="/" alt="" data-id="11" class="wp-image-11" srcset="/" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li>
<li class="blocks-gallery-item"><figure><img src="/" alt="" data-id="717" class="wp-image-717" srcset="/" /></figure></li>
</ul></figure>

Regardless of my CSS (which I've got as far as displaying the first two images correctly), there's no unique class or tag to style the third image to be full width... unless I'm going bonkers!

Help!

 

[Russinating]

Thanks guys, I'm using a 'custom' gallery now just using regular images rather than Wordpress's gallery blocks but your comments were useful since I'm not looking at the nth-child and having issues.

I've done a test post at https://jonesmillbank.com/blog/2020/05/13/this-is-what-a-post-looks-like for example. I want to add left padding the 2nd/every even half-width image but the following code isn't doing nada:

.hp img:nth-child(2n) {
    padding:10px 0 10px 10px;
}

.hl img:nth-child(2n) {
    padding:10px 0 10px 10px;
}

Swapped 2n for odd/even and 2 and no luck. Any ideas?

Don't worry, img needs to go after the nth-child!