Помогите реализовать section

* { 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
 
section { 
    height: 100vh; 
    position: relative; 
    background: #fff; 
} 
 
.section-1:before, 
.section-1:after, 
.section-2:before, 
.section-2:after{ 
    content: ''; 
    position: absolute; 
    top: 0; 
    width: 50%; 
    height: 100%; 
    box-sizing: border-box; 
} 
.section-1:before {     
    left: 0; 
    border: 10px solid tomato;     
} 
.section-1:after {       
    right: 0; 
    background: url(http://static.trip101.com/paragraph_media/pictures/000/071/493/large/utahcover.jpg?1476069846) no-repeat right top; 
    background-size: cover; 
} 
 
.section-2:before {     
    right: 0; 
    border: 10px solid tomato;     
} 
.section-2:after {       
    left: 0; 
    background: url(http://static.trip101.com/paragraph_media/pictures/000/071/493/large/utahcover.jpg?1476069846) no-repeat right top; 
    background-size: cover; 
} 
 
.container { 
    padding: 1em; 
    border: 1px solid #999; 
    max-width: 700px; 
    margin: 0 auto; 
    position: relative; 
    z-index: 9; 
    background: rgba(255,255,255,.7); 
}

<section class="section-1"> 
<div class="container"> 
    container 
</div> 
</section> 
<section class="section-2"> 
<div class="container"> 
    container  
</div> 
</section>

html, 
body { 
  padding: 0px; 
  margin: 0px; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
section { 
  position: relative; 
  background: #fff; 
  border: #fafafa solid 10px; 
} 
 
.img { 
  background: #ccc; 
  position: absolute; 
  top: -10px; 
  bottom: -10px; 
  overflow-x: hidden; 
} 
 
.img img { 
  display: block; 
  height: 100%; 
} 
 
section.section-left .img { 
  left: 50%; 
  right: -10px; 
} 
 
section.section-right .img { 
  right: 50%; 
  left: -10px; 
} 
 
.container { 
  max-width: 800px; 
  margin: 0 auto 0 auto; 
} 
 
.inner { 
  width: 50%; 
  height: 300px; 
  background: #fff; 
  padding: 10px; 
} 
 
.section-left .inner {} 
 
.section-right .inner { 
  margin-left: 50%; 
} 
 
.section-left .inner { 
  border-right: #fafafa solid 10px; 
} 
 
.section-right .inner { 
  border-left: #fafafa solid 10px; 
}

<section class="section-left"> 
  <div class="img"> 
    <img src="http://www.mrwallpaper.com/wallpapers/new_tn2s/misty-castle_tn2.jpg" alt="" /> 
  </div> 
  <div class="container"> 
    <div class="inner"> 
      Текст 
    </div> 
  </div> 
</section> 
<section class="section-right"> 
  <div class="img"> 
    <img src="http://www.mrwallpaper.com/wallpapers/new_tn2s/brasil-copacabana_tn2.jpg" alt="" /> 
  </div> 
  <div class="container"> 
    <div class="inner"> 
      Текст 
    </div> 
  </div> 
</section>