Необходимо разместить блок так же как на скрине

введите сюда описание изображения

Привет, нужно разместить блок так же как на скрине, но нужен адаптив, уже все перепробовал....

.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>


Ответы (0 шт):