little issue with designing card in html and css

hello i have a little issue to designing card in html this is my css

        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: black;
        }
        .card{
            width: 306px;
            height: 168px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        .img{
            transition: 0.5s;
        }
        .img:hover{
            transform: scale(1.2);
        }

        .overlay{
            background: linear-gradient(180deg, rgba(34, 39, 46, 0) 0%, #292E33 100%);
            border-radius: 8px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            pointer-events: none;

        }

and this is my html file

<body>
    <div class="card">
        <img class="img" src="https://picsum.photos/400/400" alt="">
        <div class="overlay">

        </div>
    </div>
</body>

if you see the result you could see that very small white color appear in bottom borders anyone know how can i solve that ?