Подскажите, как можно реализовать эти два блока так, чтобы при уменьшении размера экрана картинка слева уезжала за края, а не теснила блок c текстом. 1 пример - макет.
<div class="content-middle__block">
<div class="content-middle__block-image">
<img class="content-middle__block-image-content" src="img/content-middle/iPhone%206.jpg" alt="">
</div>
<div class="content-middle__block-text">
<h2 class="content-middle__block-title">Your day is protected</h2>
<p class="content-middle__block-p block-p1">There have not been any since we have lived here, said my mother. </p>
<p class="content-middle__block-p block-p2">We thought - Mr. Copperfield thought - it was quite a large rookery; but the nests were very old ones, and the birds have deserted them a long while.</p>
<div class="content-middle__block-buttons">
<a href="#" class="content-middle__block-buttons-item button-item1">
Try to hack us
<img src="img/content-middle/icon/Arrow%20Icon.svg" alt="" class="button-icon-content">
</a>
<a href="#" class="content-middle__block-buttons-item button-item2">Learn more
</a>
</div>
</div>
</div>
.content-middle__block-image {
transform: translateX(-100px);
}
.content-middle__block-image-content {
}
.content-middle {
overflow: hidden;
}
.content-middle__block {
display: flex;
align-items: center;
justify-content: center;
padding-top: 108px;
padding-bottom: 42px;
}
.content-middle__block-title {
font-size: 42px;
font-family: 'Varela Round', sans-serif;
font-weight: normal;
line-height: 52px;
max-width: 223px;
margin-bottom: 60px;
}
.content-middle__block-text {
margin-right: 30px;
max-width: 469px;
}
.content-middle__block-p {
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #8C8F94;
line-height: 28px;
}
.block-p1 {
margin-bottom: 30px;
}
.block-p2 {
margin-bottom: 85px;
}
.content-middle__block-buttons-item {
position: relative;
font-family: 'Lato', sans-serif;
font-size: 16px;
line-height: 19px;
display: inline-block;
background-color: white;
color: black;
border: 1px solid black;
border-radius: 50px;
padding: 10px 31px 13px 31px;
transition: all 0.3s ease;
overflow: hidden;
}
.content-middle__block-buttons {
display: flex;
align-items: center;
}
.button-item1 {
width: 162px;
margin-right: 20px;
}
.button-icon-content {
position: absolute;
margin-left: 47px;
right: 22px;
bottom: 16px;
}
.button-item1:hover {
width: 205px;
color: white;
background-color: #267DF4;
border: 1px solid #267DF4;
}