Адаптивность при абсолютном позиционировании

Всем привет. Я новичок, учусь верстать макеты из интернета. Имеется такой макет (фото). Не могу правильно адаптировать вот эти кнопки в блоках (выделил в зеплине, когда скринил). Делал блок относительно позиционированным, кнопки - абсолютными. Значения top и left задаю в процентах. Из-за того, что блоки меняют размеры на разных брейкпойнтах - соответственно меняется и расположение кнопок. Сделал медиазапрос для каждого брейкпоинта - на промежуточных значениях кнопки все равно выглядят плохо, или вообще сползают. К тому же, нужно делать отдельные медиазапросы для альбомной и портретной ориентации, что очень увеличивает код. Если кто сталкивался, как это сделать? Спасибо

Вот код. HTML с использованием bootstrap

                <div class="card text-center content_item">
                <div class="card-body p-0">
                    <img src="Assets/img/Icon_image.png" class="label_2" alt="">
                    <img src="Assets/img/Rectangle.png" class="respons" alt="">
                    <p>TRAVELING</p>
                    <h5 class="card-title">STANDART IMAGE POST</h5>
                    <h6 class="card-subtitle mb-2 text-muted">January 25, 2016</h6>
                    <div class="read-block">
                        <img src="Assets/img/Shape.jpeg" alt="">
                        <span class="read">Read More</span>
                        <img src="Assets/img/Shape.jpeg" alt="">
                    </div>
                    <div class="card-footer bg-transparent d-flex justify-content-between">
                        <div class="feedback"><img src="Assets/img/comment.png" alt="">06 COMMENT</div>
                        <div>
                            <img src="Assets/img/basket.png" alt="">
                            <img src="Assets/img/face_small.png" alt="">
                            <img src="Assets/img/twitter_small.png" alt="">
                            <img src="Assets/img/network.png" alt="">
                        </div>
                    </div>
                </div>
            </div>




 main .content_item {
        position: relative;
    }
    
    .label_2 {
        position: absolute;
        top: 215px;
        left: 43%;
    }
    
@media (min-width: 425px) {
    .icon_image_about {
        position: absolute;
        left: 47%;
        top: -2%;
    }

    .label_2 {
        top: 37%;
        left: 40%;
    }
} @media (min-width: 1024px) {
    .label_2 {
        top: 44%;
        left: 44%;
    }
}

@media (min-width: 1440px) {
    .label_2 {
        top: 39%;
        left: 43%;
    }
}

Медиазапросы для разных брейкпоинтов (вставлял не все, суть вы поняли). И все равно не получается нормально адаптировать, на промежуточных значениях уезжает куда попало