image disapearing in mobile version dont know why

the image is dissapearing when switch to mobile version i will share code for resolution, the solver will earn reputation and answer will be marked as solution

minimal reproducible example here : minimal reproducible example click

images of the problem here:

this is the image disapearing

this is desktop version

this is mobile version and it disapears i need it to appear smaller, will share code,

html:

<section class="inicioEmpresa wow fadeInLeftBig data-wow-delay="0.4s"">
        <div class="inicioEmpresaInfo">
            <div class="empresa">
                <div class="empresaImg">
                    <div class="wow bounceInLeft" data-wow-delay="0.3s"><img src="images/home/home-2.png" alt=""></div>
                </div> 
                <div class="inicioEmpresaTxt wow fadeInUp" data-wow-delay="0.3s">
                    <h1 class="color">RADISOL M.X.</h1>
                    <h1 class="color">Más de 20 años de trayectoria.</h1>
                    <p>Somos especialistas en las soluciones integrales de los problemas del sistema de enfriamiento de
                        automotores y maquinaria pesada, ofreciendo al cliente el mayor abanico de posibilidades para
                        abastecer todas sus necesidades.</p>
                        
                </div>
            </div>
        </div>
    </section>

css:
you can see with f12 or element inspector of chrome or mozilla, here is a screenshot showing the elements applied to such image:

css code applied to the image:

@media screen and (max-width: 1366px)
.empresaImg div img {
    width: 95%;
}
.empresaImg div img {
    width: 100%;
    border-radius: 5%;
}

also saw this, when you change the resolution in >element inspector > mobile icon click > resize from 488 x 625 screen (the image will appear) but when i change from 488 x 625 to 480 x 625 the image will disappear!

still appear

the image dissapears

how to make it not dissapear and make it responsive for mobile version?

edit: tried this but did not worked:

 @media screen and  (max-width: 768px) {
    
    .empresaImg div img {
        width: 100px;
        height: 100px;
        
    }
}

problem solving answer will be upvoted and earned rep

also tried this: https://www.w3schools.com/howto/howto_css_image_responsive.asp

.empresaImg div img {
    width: 100%!important;
    height: auto!important;
}

but did not worked still disappearing in < = 480px resolutions

here is the responsive css in charge of making it responsive, i do not know where is the error also tried to forcing the image to be 100×100 px and in resolutions below width of 480 it breaks:

https://clever-curie-f9c77b.netlify.app/css/responsive.css

>Solution :

You problem is here:

@media screen and (max-width: 480px) {
    .inicioEmpresaInfo .empresaImg {
        display: none;
    }
}

At this size, empresaImg (the container of the image) become hidden