HTML
<div class="about" id="about">
<div class="container">
<div class="miniature">
<?php
$image = get_field('фото_блока_о_нас');
if( !empty($image) ): ?>
<img src="<?php echo $image['sizes']['medium_large']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
<div class="text">
<div class="content-title"><?php the_field('заголовок_блока_о_нас'); ?></div>
<div class="entrytext"><?php the_field('текст_блока_о_нас'); ?></div>
</div>
</div>
</div>
LESS
.about{
padding-top: 150px;
padding-bottom: 150px;
@media(max-width: 724px){
text-align: center;
padding-bottom: 90px;
}
.container{
position: relative;
padding-top: 60px;
padding-bottom: 30px;
@media(max-width: 724px){
padding: 0 30px;
}
}
.miniature{
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: calc(~'50% - 100px');
overflow: hidden;
@media(max-width: 724px){
position: static;
display: block;
width: auto;
height: 250px;
margin-bottom: 40px;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.text{
padding-left: 50%;
@media(max-width: 724px){
padding: 0;
}
}
}