How does congo resize thumbnail images exactly?

[ItsSunnyMonster]

I am using the following as a thumbnail image, and I have already cropped it myself to make it 4:3.

However, on the website it is showing up like this:

Why is it still cropping the image despite it already being in the right aspect ratio? In theory, all it has to do in this case is downscale the image to decrease the resolution and the file size. Please let me know why this is the case, and if it is intended behaviour, how I can make the image centered. Thank you

[GorkemGuray]

Because the theme uses smartcrop by default. Here are the details. The easiest way to prevent this is to override layouts/partials/article-link.html.
Original part:

            class="w-24 rounded-md sm:w-40" srcset="
            {{- (.Fill "160x120 smart").RelPermalink }}
            160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
            src="{{ (.Fill "160x120 smart").RelPermalink }}"
            width="160"
            height="120"
          {{ end }}
          {{ if $.Site.Params.enableImageLazyLoading | default true }}
            loading="lazy"
          {{ end }}
        />

If you change the smart part to center in the code above, your problem will be solved.
modified version:

            class="w-24 rounded-md sm:w-40" srcset="
            {{- (.Fill "160x120 center").RelPermalink }}
            160w, {{- (.Fill "320x240 center").RelPermalink }} 2x"
            src="{{ (.Fill "160x120 center").RelPermalink }}"
            width="160"
            height="120"
          {{ end }}
          {{ if $.Site.Params.enableImageLazyLoading | default true }}
            loading="lazy"
          {{ end }}
        />