Влезание картинки в другой блок

Хочу сделать так, чтобы картинка влезала в другой блок, а не накладывалась ниже. Я хочу так: А получается так:

<style>
    .red_text {
        font: normal normal normal 19px/1.1em 'Times New Roman', times, serif;
        color: #880A0C;
        font-family:lobster,cursive;
        text-align: center;
        padding-top: 25%;
    }
    .big_text {
        font-size: 50px;
    }
    .main_photo {
        padding-bottom: 20px;
    }
    .welcome {
        height: 100px;
        width: 100%;
        margin-top: 20px;
        background-color: #dbb89a;
    }
    .news {
        background-color: #dbb89a;
        height: 110px;
        border: 0px solid;
        border-radius: 5px;
    }
</style>
<div class="container">
<div class="main">
<div class="row justify-content-md-center">
    <div class="col col-lg-7 main_photo">
        <img src="images/schoolGroup.jpg" alt="" style="border: 2px solid #7a7b7e;">
    </div>
    <div class="col col-lg-5">
        <div class="welcome">
            <div class="red_text" style="padding-top: 7%;">ДОБРО ПОЖАЛОВАТЬ В НАШ ПРЕКРАСНЫЙ И УДИВИТЕЛЬНЫЙ МИР!</div>
        </div>
    </div>
</div>
<div class="row justify-content-md-center news">
    <div class="col col-lg-2">
        <img src="images/lion.webp" alt="lion">
    </div>
    <div class="col col-lg-8">
    </div>
    <div class="col col-lg-2">
    </div>