overflow-image in Css

would you please hlep me about this problem

as you see my codes when i hover article-img its img'transform: scale(1.1) and image overflow and its container are hidden for large size it works but for less than 576px it does not work, i also tested similar codes in media query for less than 576px what's you tip about this?

html:

 <div class="img-article ">
                    <img src="images/xitems1.jpg">
                    <div class="img-info">
                        <p class="info-title">Men's Fashion</p>
                        <a class="info-link" href="#">Shop Now</a>
                    </div>
                </div>

css:

.img-article {
    width: 93%;
    text-align: center;
    position: relative;
    cursor:pointer;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow:hidden;
 }

 .img-article::after {
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(4, 14, 39, 0.7) 0%, rgba(241, 242, 245, 0) 50%);
    content: '';
    z-index: 200;
 }

 .img-article img {
    width: 100%;
    height: 100%;
    text-align: center;
    transition: all 1s ;
    overflow:hidden;

 }

 .img-article:hover img {
    transform: scale(1.1);
 }