Why isn't the first image cropping correctly in my product thumbnails?

Store Design
1

I have a simple for loop that is generating my product thumbnails. For some reason, I cannot get the first image to crop with the img_url filter. It only seems to be the first image or featured image. The rest of the images resize and crop correctly.

Here is the code I am using:

{% for image in product.images %}
      {% if image.attached_to_variant? == false %}
           <div class="product-media-img"><img class="desktop-main-product-image product-gallery-main-img" loading="lazy" src="{{ image.src | img_url: '900x1200', crop: 'center' }}" data-master-img="{{ image.src | img_url: 'x1080' }}"></div>
      {% endif %}
{% endfor %}

The full-size image in question is 900x900px if that may have something to do with it.

2

I found the problem, the img_url filter was set to a size too large:

img_url: '900x1200'

When it needed to be:

img_url: '600x800'