Не могу понять как расположить данные блоки
Пробовал через width calc, display:inline-block, ничего не получается и ужасно едет в мобильной версии
.dv-wrapper {
width: 100%;
max-width: calc(100% - 330px);
margin: 0 auto;
min-width: 320px;
}
.dv-about___button {
text-transform: lowercase;
text-decoration: none;
color: #2d2d2d;
padding: 2px 20px;
border: 1px solid #666;
border-radius: 20px;
margin-left: 20px;
text-align: center;
font-weight: bold;
}
.dv-ban__img {
width: 100%;
}
.dv_ban_main {
display: inline-block;
margin-bottom: 15px;
}
.first_left_block {
display: inline-block;
box-sizing: border-box;
float: left;
width: 49%;
}
.first_left_block img {
width: 100%;
margin-bottom: 15px;
}
.first_right_block {
display: inline-block;
box-sizing: border-box;
float: right;
width: calc(52% - 21px);
}
.right_item {
position: relative;
display: inline-block;
cursor: pointer;
}
.sad_first_item_img {
margin-right: 10px;
margin-bottom: 7px;
}
.sad_second_item_img {
margin-bottom: 7px;
}
.sad_third_item_img {
margin-bottom: 7px;
margin-right: 10px;
}
.sad_thourth_item_img {
margin-bottom: 7px;
}
<div class="dv-wrapper">
<div class="dv_ban first_block">
<div class="dv_ban first_left_block">
<a href="#"><img alt="" src="https://i.ibb.co/S7YY64G/sad-lending-2-08-290228.jpg" /></a>
</div>
<div class="dv_ban first_right_block">
<div class="dv_ban right_item">
<a href="#"><img class="sad_first_item_img" alt="" src="https://i.ibb.co/PZhySXN/sad-lending-2-19595473.jpg" /></a>
</div>
<div class="dv_ban right_item">
<a href="#"><img class="sad_second_item_img" alt="" src="https://i.ibb.co/PZhySXN/sad-lending-2-19595473.jpg" /></a>
</div>
<div class="dv_ban right_item">
<a href="#"><img class="sad_third_item_img" alt="" src="https://i.ibb.co/PZhySXN/sad-lending-2-19595473.jpg" /></a>
</div>
<div class="dv_ban right_item">
<a href="#"><img class="sad_thourth_item_img" alt="" src="https://i.ibb.co/PZhySXN/sad-lending-2-19595473.jpg" /></a>
</div>
</div>
</div>
</div>