Fitting images with different dimensions

I am building a webpage for homework purposes and I am struggling to fit in four photos with different dimensions in a grid layout. To be more specific I have to make that grid layout be responsive as a 4-grid layout on Desktop view, 2-grid layout on Tablet view, and Mobile view. I have tried a lot of advice from different articles but none of them seems to be working.

CSS code:

  .services{
    float: left;
    width: 25%;
    height:100vh; 
    max-width:100%; 
    object-fit:cover;
  }

  @media only screen and (max-width: 1180px) {
    .services{
      width: 50%;
    }
  }

HTML code:

     <div>
        <div class="services">
          <img src="./Photos/services-1.jpg"></img>
        </div>
        <div class="services">
          <img src="./Photos/services-2.jpg"></img>
        </div>
        <div class="services">
          <img src="./Photos/services-3.jpg"></img>
        </div>
        <div class="services">
          <img src="./Photos/services-4.jpg"></img>
        </div>
      </div>

Current look:

I want photos to be in a line for each occasion with certain dimensions.

Any thoughts?