Centering Coded Images on Mobile

Site URL: https://solutionslabllc.com/about

Hi,

Site password is solutionslab

Under the section for Clients, I injected code so the client logos revealed a new image on hover. While this works great on desktop, the images don't center or line up in two columns on mobile (this would be my preference to have them 2 across).

You can see that I shrunk the first two on mobile to try to squeeze them into two columns to no avail. This is the code I used taken from Inside the Square.

ps  - I'm totally new to coding!

@media screen and (min-width:640px){
 #img-hover-1 { 
 background-image: url('https://static1.squarespace.com/static/5fdd0992cd225f389b1a7703/t/600e1cb4d3c69c50b9ea8692/1611537588615/Adapt_Square.png');
    height: 140px;
    width: 210px;
    transition: all .5s;
   background-size:contain;}}

@media screen and (min-width:640px){
 #img-hover-1:hover {
    background-image: url('https://static1.squarespace.com/static/5fdd0992cd225f389b1a7703/t/6022dd3025a4d87188cbbe6f/1612897584833/AdaptCountries.png'); }}

@media screen and (max-width:641px){
 #img-hover-1 { 
 background-image: url('https://static1.squarespace.com/static/5fdd0992cd225f389b1a7703/t/600e1cb4d3c69c50b9ea8692/1611537588615/Adapt_Square.png');
    height:100px;
    width: 150px;
    transition: all .5s;
   background-size:contain;}}

@media screen and (max-width:641px){
 #img-hover-1:hover {
    background-image: url('https://static1.squarespace.com/static/5fdd0992cd225f389b1a7703/t/6022dd3025a4d87188cbbe6f/1612897584833/AdaptCountries.png'); }}
 

It looks fine here?