Responsive Image of "organic-radius img-fluid" scaled Too Big On Mobile but hard to fix

[realliyifei]

I set the responsive image on the left hand side of a section:

<section class="section section-lg pt-7">
            <div class="container">
                <div class="row align-items-center justify-content-around">
                    <div class="col-md-3 col-xl-3 mb-4">
                        <div class="card bg-primary shadow-soft border-light organic-radius p-3">
                            <img class="organic-radius img-fluid" src="../../assets/img/xxx.jpeg" alt="younger me">
                        </div>
                    </div>
                    <div class="col-md-5 col-xl-5 text-center”>
					  ...
					</div>
				</div>
            </div>
        </section>

and when it is scaled as small as on the mobile screen, the image would become very huge.

I tried to used some general html methods to fix it, such as set max length in style and image but then the display will get very weird, since the image frame and the image will be in a different shape. I tried to adjust the number after "col-sm, col-md, col-lg, col-xl” but also failed.

What is the best way to fix this issue?