Адаптив блока относительно изображения
Всем привет. Имеется картинка, поверх нее расположен блок с текстом. Подскажите, пожалуйста, как можно адаптивно реализовать этот блок (чтобы при сжатии картинки сжимался и он).
.cards__left img {
max-width: 50%;
height: 100%;
}
.cards__left-descr {
height: 5%;
background: rgba(0, 0, 0, 0.5);
padding: 50px;
position: absolute;
bottom: 0;
color: white;
width: 50%;
}
.cards__left-text {
margin-right: auto;
margin: 0;
}
.cards__left {
position: relative;
}<div class="cards about__cards flex">
<div class="cards__left">
<img src="https://img1.akspic.ru/attachments/crops/2/2/4/0/50422/50422-senokosnoye_ugodye-pole-selskoe_hozyajstvo-zakat-risovoe_pole-2560x1440.jpg" alt="ABOUT">
<div class="cards__left-descr flex">
<p class="cards__left-text">
Принимая во внимание показатели успешности, перспективное планирование способствует подготовке и реализации новых принципов
</p>
</div>
</div>
</div>