Why does my background-image become bigger? - html

Question

I have 3 blocks that cosist of parent and child blocks. For my parent block I establish min-height: 360px;. It will help to became my block bigger when I add some text. But even if I don't add more text it becomes bigger.
How can I solve this problem without establshing to my parent block height: 360px;?
* {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
.groups_line {
margin: 0 auto;
width: 1565px;
padding-right: 40px;
padding-left: 40px;
display: flex;
}
.line {
width: 520px;
min-height: 360px;
margin-right: 4px;
display: flex;
justify-content: center;
padding-top: 170px;
padding-bottom: 55px;
}
.line:last-child {
margin-right: 0px;
}
.first_group {
background-image: url(https://i.postimg.cc/X7K9PsbD/13-2x.png);
}
.second_group {
background-image: url(https://i.postimg.cc/hGvxfg7H/kaboompics-com-Woman-preparing-a-lunch-on-the-kitchen-table.png);
}
.third_group {
background-image: url(https://i.postimg.cc/s2GXk2WD/photo-1453822858805-7c095c06011e.png);
}
.wrapper_foot {
display: flex;
justify-content: space-between;
padding: 18px 15px 10px 15px;
}
.heading_block {
font-family: "Open Sans";
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
color: #b59f5b;
margin: 20px 10px 15px 10px;
text-align: center;
}
.text {
color: #ffffff;
font-family: 'Josefin Sans', sans-serif;
font-size: 19px;
text-transform: uppercase;
margin-left: 55px;
margin-right: 55px;
text-align: center;
line-height: 24px;
}
.data {
opacity: 0.54;
color: #ffffff;
font-family: "Open Sans";
font-size: 12px;
font-weight: 300;
line-height: 12px;
}
.number {
opacity: 0.54;
color: #ffffff;
font-family: 'Raleway', sans-serif;
font-size: 12px;
font-weight: 400;
display: inline;
}
.fa-comment {
color: #b59f5b;
font-size: 14px;
font-family: "Font Awesome";
}
.border {
width: 465px;
min-height: 135px;
border: 3px solid #b59f5b;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#400;500;600&family=Open+Sans:wght#600;700&family=Raleway:wght#300&display=swap" rel="stylesheet">
<div class="groups_line">
<div class="first_group line">
<div class="first-group-line border">
<p class="group_line heading_block">beauty health life</p>
<p class="group_line text">FROM GRAPEFRUIT TO LEMONS TO ORANGES, CITRUS DOES YOU GOOD!</p>
<div class="wrapper_foot">
<p class="group-line data"> June 14, 2015</p>
<div class="group-line comment_logo">
<i class="fas fa-comment"></i>
<p class="group-line number">24</p>
</div>
</div>
</div>
</div>
<div class="second_group line">
<div class="second-group-line border">
<p class="group_line heading_block">health</p>
<p class="group_line text">5 Tips To Supercharge Your
Motivation</p>
<div class="wrapper_foot">
<p class="group-line data"> June 14, 2015</p>
<div class="group-line comment_logo">
<i class="fas fa-comment"></i>
<p class="group-line number">24</p>
</div>
</div>
</div>
</div>
<div class="third_group line">
<div class="third-group-line border">
<p class="group_line heading_block">Beauty</p>
<p class="group_line text">To Keep Makeup Looking Fresh Take A Powder</p>
<div class="wrapper_foot">
<p class="group-line data"> June 14, 2015</p>
<div class="group-line comment_logo">
<i class="fas fa-comment"></i>
<p class="group-line number">24</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

If you want to fit the text space inside the block, I suggest using min-height: fit-content