Необходимо разместить блок так же как на скрине
Привет, нужно разместить блок так же как на скрине, но нужен адаптив, уже все перепробовал....
.services {
margin-top: 100px;
}
.services__container {
}
.services__body {
}
@media (min-width: 670px) {
.services__body {
display: flex;
flex-wrap: wrap;
margin: 0px -15px;
}
}
.services__column__left {
flex: 0 1 50%;
padding-right: 10px;
height: 600px;
}
.services__column__right {
flex: 0 1 25%;
padding-left: 10px;
height: 295px;
}
.services__column__bottom{
flex: 0 1 50%;
padding-left: 10px;
position: relative;
float: left;
height: 295px;
margin-top: 10px;
}
@media (min-width: 670px) {
.services__column {
padding: 0px 15px;
}
}
@media (max-width: 992px) {
.services__column {
flex: 0 1 50%;
}
.services__column:not(:last-child) {
margin: 0px 0px 30px 0px;
}
.services__column:last-child {
flex: 1 1 100%;
}
}
.services__item {
height: 100%;
box-shadow: 0px 13px 19px rgba(0, 0, 0, 0.07);
background-color: #fff;
padding: 35px;
}
@media (max-width: 479px) {
.services__item {
padding: 25px;
}
}
.item-service {
}
.item-service_green .item-service__title {
color: #fff;
}
.item-service_green .item-service__text {
color: #fff;
}
.item-service > *:not(:last-child) {
margin: 0px 0px 10px 0px;
}
.item-service__icon {
}
.item-service__title {
font-weight: 700;
letter-spacing: 0.1px;
font-size: 24px;
line-height: 133%;
}
.item-service__text {
color: #737373;
line-height: 142%;
}
<section class="page__services services">
<div class="services__container _container">
<div class="services__body">
<div class="services__column__left">
<div class="services__item item-service">
<div class="item-service__icon"><img src="img/services/01.svg" alt="Environmental Consulting"></div>
<h3 class="item-service__title">Environmental Consulting</h3>
<div class="item-service__text">We focus on ergonomics and meeting you where you work. </div>
</div>
</div>
<div class="services__column__right">
<div class="services__item item-service">
<div class="item-service__icon"><img src="img/services/02.svg" alt="Finance and consultancy"> </div>
<h3 class="item-service__title">Finance and consultancy</h3>
<div class="item-service__text">Just type what's on your mind and we'll get you there.</div>
</div>
</div>
<div class="services__column__right">
<div class="services__item item-service item-service">
<div class="item-service__icon"><img src="img/services/03.svg" alt="Financial Services Consulting"></div>
<h3 class="item-service__title">Financial Services Consulting</h3>
<div class="item-service__text">the quick fox jumps over the lazy dog</div>
</div>
</div>
<div class="services__column__bottom">
<div class="services__item item-service item-service">
<div class="item-service__icon"><img src="img/services/03.svg" alt="Financial Services Consulting"></div>
<h3 class="item-service__title">Financial Services Consulting</h3>
<div class="item-service__text">the quick fox jumps over the lazy dog</div>
</div>
</div>
</div>
</div>
</section>
