Image overflows but not until at the smallest resize

Images here

The pictures resize fine until it hits the smallest resize in which they overflow like that. tried every method like using width 100, auto height, or block displays and explicit media query in CSS but it still persists. I use bootstrap grid and put img-fluid on three of them but they give up being responsive at the very last one.

/* HERO STYLING STARTS HERE */
.hero {
    background-color: #36454F;
}

.hero-post {
    position: relative;
}
.hero-post-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ffffff;
    padding: 3px;

}
.hero-post-content {
    position: absolute;
    bottom: 15px;
    margin-left: 10px;
    display: block;
    }

.rounded-circle{
    filter: none;
    border: 2px solid #ffffff;
    border-radius:50%;
    width:100%;
    }

.hero-post-content img {
    max-width: 100%; 
    height: auto;
}

/* HERO STYLING ENDS HERE */

<section class="hero py-4">   <!-- HERO SECTION START -- BUGS: AUTHOR PIC OVERFLOWS ON SMALL RESIZE -->
        <div class="container">
            <div class="row">
                <div class="col-lg-8"> <!-- SPOTLIGHT POST STARTS HERE -->
                    <div class="hero-post shadow">
                        <img class="img-fluid max-width" alt="" src="img/02.jpg">
                        <div class="hero-post-badges">
                            <i class="fas fa-clock"></i>
                            <span>DayMonthYear</span>
                        </div>
                        <div class="hero-post-content">
                            <div class="row">
                                <div class="col-sm-2">
                                    <img class="img-fluid rounded-circle" alt="Author" src="img/author.jpg">
                                </div>
                                <div class="col-sm-10">
                                    <h2>Randy orton</h2>
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>   <!-- SPOTLIGHT POST ENDS HERE -->

                <div class="col-lg-4"> <!-- SIDE POSTS START -->
                    <div class="hero-post shadow">
                        <img class="img-fluid max-width" alt="" src="img/02.jpg">
                        <div class="hero-post-badges">
                            <i class="fas fa-clock"></i>
                            <span>DayMonthYear</span>
                        </div>
                        <div class="hero-post-content">
                            <div class="row">
                                <div class="col-sm-3">
                                    <img class="img-fluid rounded-circle" alt="Author" src="img/author.jpg">
                                </div>
                                <div class="col-sm-9">
                                    <h3>Randy orton</h3>
                                </div>
                            </div>
                        </div>
                    </div>  
                    <div class="hero-post shadow">
                        <img class="img-fluid max-width" alt="" src="img/02.jpg">
                        <div class="hero-post-badges">
                            <i class="fas fa-clock"></i>
                            <span>DayMonthYear</span>
                        </div>
                        <div class="hero-post-content">
                            <div class="row">
                                <div class="col-sm-3">
                                <img class="img-fluid rounded-circle" alt="Author" src="img/author.jpg">
                                </div>
                                <div class="col-sm-9">
                                    <h3>Randy orton</h3>
                                </div>                      
                            </div>
                        </div>
                    </div>  <!-- SIDE POSTS END --> 
                </div>

            </div>  
        </div>  
    </section>   <!-- HERO SECTION END-->