Modal Bootstrap Responsive

I have tried to make my modal responsive with grid row and column but when screen go to small size the modal not responsive and my profile image gets bigger

my modal code

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container px-5 py-3">
                    <h1>Deskripsi</h1>
                    <p>Lorem ipsum </p>
                    <h3 class="pt-4">Kontak</h3>
                    <div class="row pt-3">
                        <div class="col-lg-4 d-flex justify-content-center rounded-circle ">
                            <img src="img/bilget.jpg" class="" style="width: 100%;" alt="">
                        </div>
                        <div class="col-lg-8">
                            <h5 class="ketua"></h5>
                            <h3 class="kontak"></h3>
                            <a class="btn btn-outline-success">Kontak</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

the result

before resizing

after