I have been working for a few days now on adding and aligning 3 logos in the mobile version of a WordPress website but I cannot get the outcome expected. This is the CSS that I have:

@media screen and (max-width: 600px) {
    .logos-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    
    .logos-wrapper img[alt="Equifax"]{
    display: block;
    }
    .logos-wrapper img[alt="TransUnion"]{
    display: block;
    
    }
    .logos-wrapper img[alt="Experian"]{
    display: block;
    }

}

The first image is what I get by testing it on my phone:
Test from personal phone

This one is the mock of what should I get:
Mock

The desktop version is working fine, just this part is getting so difficult to get it fixed

I have tried using examples from W3 Schools, ChatGPT and also asking in Reddit, but obviously nothing.