problem whit the rescale of the img in a grid

Question

I have a problem whit the img rescale in a grid on the mobile. I build the grid like this. for the grid proprities when i show it on a tablet or a phone the img stretch a bit to fit the grid and gain a lot of height and lost width. How can i rescale the img in a way to let some width in the tablet or mobile version?

hmtl

        <div class="container">



             <img src="Images/grid-ricette1.png" alt="">
        
            <span>
                <h3 class="grid-title>">Best Torta ever</h3>
                        
         

                <div class="stars">

                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>

                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt impedit nulla quos odit modi. Rem libero explicabo sunt eligendi dignissimos accusamus eum cum error minus voluptatibus totam, quidem voluptatem ipsum.</p>

                </div>
            </span>    

           

        </div>
    
        <div class="container">

            <img src="Images/grid-ricette1.png" alt="">
       
           <span>
               <h3 class="grid-title>">Best Torta ever</h3>
                       
        

               <div class="stars">

                   <i class="fas fa-star"></i>
                   <i class="fas fa-star"></i>
                   <i class="fas fa-star"></i>
                   <i class="fas fa-star"></i>
                   <i class="fas fa-star-half-alt"></i>

                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt impedit nulla quos odit modi. Rem libero explicabo sunt eligendi dignissimos accusamus eum cum error minus voluptatibus totam, quidem voluptatem ipsum.</p>
               </div>
           </span>    

        </div>

css

.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30rem, 1fr));
    gap: 1.5rem;;
}

.grid .container{
    display: flex;
}

.grid .container img{
    
    width: 100%;
    

}



 .grid .container h3{
    font-size: 3.5rem;
    color: var(--black);
    padding: .2rem;
    

}

 .grid .container .stars{
    color: var(--main-color);
    font-size: 1.2rem;
    padding: .2rem;
}

 .grid .container .stars p{
    color: var(--black);
    font-size: 1.2rem;
    padding: .2rem;
}