no media query block

by phloe

HTML

<div class="block">
  <div class="image">
    <div class="image-wrap">
      <img src="https://fillmurray.com/640/360"/>
    </div>
  </div>
  <div class="text">
    <h3>
    Hello
    </h3>
    <p>Lorem ipsum dolor sit amet, ut et vehicula sollicitudin, consectetuer in venenatis ac eget vestibulum augue, sed aliquet velit error.</p>
  </div>
</div>

CSS

.block {
  margin-left: -5px;
  margin-right: -5px;
  display: flex;
  flex-flow: row wrap;
}

.block > .image {
  margin-left: 5px;
  margin-right: 5px;
  flex: 1 1 calc(33.333333333333% - 10px);
}

.block > .text {
  margin-left: 5px;
  margin-right: 5px;
  min-width: calc(66.666666666% - 10px);
  flex: 1 0 200px;
}

.block > .text h3 {
  font-size: calc(1em + 1vw);;
}

.image-wrap {
  position: relative;
}

.image-wrap:after {
  content: "";
  padding-bottom: 56.25%;
  display: block;
}
.image-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}