Columns infront of each other and responsive content

by Muhammad Hassaan

HTML

<div class="customer-stories-banner clearfix light grid">

  <div class="item light clearfix relative">
    <div class="background-image" style="background-image: url(https://www.bookeo.com/wp-content/themes/bookeo/images/customer-story.jpg);"></div>
    <div class="overlay"></div>
    <div class="inner">
      <div class="content">
        <h2 style="text-align: center;">Great Customer Support</h2>
        <p style="text-align: center;"><strong>We love our work and it shows.</strong></p>
        <p style="text-align: center;">Each of our customer representatives is personally invested in getting to know you, to provide you with unparalleled service and support whenever you need it.</p>
      </div>
    </div>
  </div>


  <div class="item customer-story">
    <div class="content">
      “Bookeo is super-affordable. Other booking systems charge some percentage on top of the ticket price. ”
    </div>
    <div class="author"><strong>— Alex and Debra Beardsley,</strong> <em>It's a Trap!</em></div>

  </div>

</div>

CSS

*,
*:after,
*:before {
  box-sizing: border-box;
}

.clearfix:after,
.clearfix:before {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

.customer-stories-banner {
  position: relative;
}

.light {
  background-color: #F4F4F4;
}

.grid {
  background-image: -webkit-linear-gradient(bottom, transparent 24%, rgba(50, 50, 50, 0.05) 25%, rgba(50, 50, 50, 0.05) 26%, transparent 27%, transparent 74%, rgba(50, 50, 50, 0.05) 75%, rgba(50, 50, 50, 0.05) 76%, transparent 77%, transparent), -webkit-linear-gradient(left, transparent 24%, rgba(50, 50, 50, 0.05) 25%, rgba(50, 50, 50, 0.05) 26%, transparent 27%, transparent 74%, rgba(50, 50, 50, 0.05) 75%, rgba(50, 50, 50, 0.05) 76%, transparent 77%, transparent);
  background-image: linear-gradient(0deg, transparent 24%, rgba(50, 50, 50, 0.05) 25%, rgba(50, 50, 50, 0.05) 26%, transparent 27%, transparent 74%, rgba(50, 50, 50, 0.05) 75%, rgba(50, 50, 50, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(50, 50, 50, 0.05) 25%, rgba(50, 50, 50, 0.05) 26%, transparent 27%, transparent 74%, rgba(50, 50, 50, 0.05) 75%, rgba(50, 50, 50, 0.05) 76%, transparent 77%, transparent);
  background-size: 35px 35px, 35px 35px;
}

.customer-stories-banner .item {
  width: 100%;
  padding: 75px 5%;
  text-align: center;
  margin: 0 auto;
  position: relative;
}

.background-image {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background: black;
  opacity: .7;
}

.customer-stories-banner .item .inner {
  position: relative;
  z-index: 3;
  color: white;
  padding: 0 10%;
}

@media (min-width: 750px) {
  .customer-stories-banner .item {
    width: 50%;
    padding: 75px 5%;
    text-align: center;
    float: left;
  }
}