<div class="wrap">
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
</div> 
<div class="wrap">
  <div class="social">
    <ul>
      <li class="social__list-item"><img src="http://placehold.it/100x100&text=Image" alt="" /></li>
      <li class="social__list-item"><img src="http://placehold.it/100x100&text=Image" alt="" /></li>
      <li class="social__list-item"><img src="http://placehold.it/100x100&text=Image" alt="" /></li>
      <li class="social__list-item"><img src="http://placehold.it/100x100&text=Image" alt="" /></li>
      <li class="social__list-item"><img src="http://placehold.it/100x100&text=Image" alt="" /></li>
      <li class="social__list-item"><img src="http://placehold.it/100x100&text=Image" alt="" /></li>
      <li class="social__list-item"><img src="http://placehold.it/100x100&text=Image" alt="" /></li>
      <li class="social__list-item"><img src="http://placehold.it/100x100&text=Image" alt="" /></li>
      <li class="social__list-item"><img src="http://placehold.it/100x100&text=Image" alt="" /></li>
      <li class="social__list-item"><img src="http://placehold.it/100x100&text=Image" alt="" /></li>
    </ul>
  </div>
</div>

@mixin clearfix {
  &:after {
    content: ""; 
    display: table;
    clear: both; 
  }
}

ul {
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
}
@import "susy";

$susy: (
  columns: 12,
  );

.wrap {
  @include container(1140px);
}

.content {
  @media (min-width: 700px) {
    @include span(8);    
  }
}

.sidebar {
  @media (min-width: 700px) {
    @include span(4 last);
  }
}

.social {
  padding: gutter();
  @include clearfix;
  
  .social__list-item {
    @include gallery(2 of 10);
    margin-bottom: gutter(10); 
    
    @media (min-width: 700px) {
      @include gallery(1 of 10);
      margin-bottom: 0;
    }
  }

    
}

.content,
.sidebar {
  background: aquamarine; 
  text-align: center; 
  font-size: 28px; 
  line-height: 10em;
  height: 10em;
}

.social {
  background: black;
}