responsive-design Reduce blocks size on index page on mobile

Site URL: https://www.bomonroy.com/

Hello,

I tried to find any question about it before post it but I think it's quite specific. 

I'm trying to reduce the size of the page blocks from my index page (https://www.bomonroy.com/) on mobile on a York family theme.

I started adjusting with custom code the image width, left, top and height properties but now I have a low of white space of the block that I would like to reduce.

Could anyone know how to do it?

This is my custom code for the index in case it could help:

(This for the background)
.overflow-wrapper {
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #000000;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: fixed;
    background-image: url("https://static1.squarespace.com/static/57d3f7776a49635bed487f60/t/5bb5d5cfe4966b8d08b2f058/1538643412169/Grid2500.jpg");
}

For the images
@media screen and (max-width:640px) {
.homepage 
img {
    width: 100% !important;
    left: 0 !important;
    top: 20% !important;
    height: auto !important;
}
}

Thank you in advance.

Borja

You mean project size width on homepage?

Thank you for your response @tuanphan

Yes, the initial problem was because the width was smaller, it cropped the images instead of resizing them on mobile. I tried to fix it and now the white space on mobile for each project is huge.