Resize all images in a gallery to cut off at the same level, HTML/CSS

Question

I am working on my photography portfolio website and have these three images in a gallery, they are responsive and the portfolio looks great on mobile however on desktop the way the images are displayed do not pleasing to the eye, you can view the live at: https://www.shotbykamilo.com/portrait.html image here to show issue

I have tried resizing a bunch of things and watching tutorials however I am stuck as I am very novice programmer and used a lot of resources online.

Code:

/**************** gallery.html ***************/
/* section three */
.section-three{
    margin: 40px 0;
}
.single-img{
    position: relative;
    margin: 10px;
    
}
.single-img-content{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    
}
.single-img-content h3{
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    
}
/************** end of gallery.html ***********/
/***************** Media Queries *****************/
@media screen and (min-width: 800px){
    /* section three */
    .gallery{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

@media screen and (min-width: 1200px){
    /* section three */
    .gallery{
        grid-template-columns: repeat(3, 1fr);
    }
}}


/************** end of Media***********/``` 

Main code: 
 <!-- main -->
  
 <section class = "section-three" > <section id = "portfolio"></section>
 <div class = "container">
     <div class = "gallery">
             

            
         <a href = "matrix (1).jpg">
             <div class = "single-img">
                 <img src = "matrix (1).jpg" alt = "gallery image" >
                 <div class = "single-img-content">
                     
                 </div>
             </div>
         </a>

            
         <a href = "matrix (2).jpg">
             <div class = "single-img">
                 <img src = "matrix (2).jpg " alt = "gallery image">
                 <div class = "single-img-content">
                     
                 </div>
             </div>
         </a>

            
         <a href = "matrix.jpg">
             <div class = "single-img">
                 <img src = "matrix.jpg"  alt = "gallery image">
                 <div class = "single-img-content">
                     
                 </div>
             </div>
         </a>


     </div>  
 </section>
 <!-- end of main -->