Page Header Images Blurry and Zoomed In Oddly

I apologize if this is redundant, but I have been at it for hours, and cannot find a way to correct this issue. I am uploading new featured images to my pages with the Hestia theme. But they keep coming up blurry or oddly centered. The pictures are high quality and 2560 by 1707 px. Also, I am using an image from the same album on the home page, and it comes up clear. I am not sure what is causing this issue in the pages. Here is a link to an example: https://maydayclub.ca/society/

In the past, I have not had this issue as bad as I have it now. For example, on this page, the header image looks fine – but the image is the same size 2560 x 1707. https://maydayclub.ca/elementor-28853/ I made that page a few years ago, and you can see how the image isn’t blurry.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Here is all the additional CSS I am currently using on my site for your reference, but I have tried deleting it all and I am still getting the same issues, so I am confident that the CSS is not the issue here.

.header-filter::before { background-color: rgba(0, 0, 0, 0.15) !important; }
.hestia-ribbon.section-image:after { background-color: rgba(0, 0, 0, 0) !important; }
.section-image.hestia-about:after { background-color: rgba(0, 0, 0, 0) !important; }
.header-filter::before { background-color: rgba(0, 0, 0, 0) !important; }
.navbar .navbar-nav>li a {
font-size: 16px;
}
.navbar .navbar-header .navbar-brand img {
max-height: unset;
width: auto;
height: auto;
}
.navbar .title-logo-wrapper {
max-width: 110px;
}
.page-header .container {
height: 600px !important;

The page I need help with: [log in to see the link]