Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="wrapper">
  <div class="l-layout--alpha">
    <div class="module module-a-col">
      <div class="content-component">
          Module A
      </div>
    </div>
    <div class=" module module-b-col">
      <div class="submodule-a-col">
      
        <div class="content-component">
        <img src="" alt="">
      </div>
      </div>
      <div class="submodule-b-col">
      
        <div class="chiclet">Chiclet</div>
        <div class="chiclet">Chiclet</div>
        <div class="chiclet">Chiclet</div>
        <div class="chiclet">Chiclet</div>
        <div class="chiclet">Chiclet</div>
        <div class="chiclet">Chiclet</div>
      </div>
    </div>
    <div class="module module-c-col">
      <div class="content-component">
        <img src="" alt="">
      </div>
      <div class="content-component">
        <img src="" alt="">
      </div>
      <div class="content-component">
        <img src="" alt="">
      </div>
    </div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Susy (v2.2.2)
// ----

@import "susy";
@import "breakpoint";

@include border-box-sizing;

/* BREAKPOINTS */
$tablet-size: 768px ;
$desktop-size: 1000px;
$bp-mega:76.25em;
$bp-desktop: 60em;
$bp-tablet: 768px;
$bp-mobile:320px;
$bp-show-large-landingpage: 600px;
$bp-education-nav-breaks: 1200px;
$bp-move-sociallinks: 1258px;


@mixin cf(){
  &:before,
  &:after {
    content: " ";
    display: table; 
}
&:after {
    clear: both;
  }
}

$susy: (
  gutter-position: after,
  math:fluid,
  debug: (
    image: show,
    color: rgba(blue, .25)
  ),
);



//Small Layout Settings
$layout-small-4: (
	container: 90%,
	columns: 6,
	gutters: .25,
);

$layout-desktop: (
  container:90%,
	columns: 12,
	gutters: .8,
);

$layout-mega: (
  container:90%,
	columns: 12,
	gutters: .8,
);



.module {
 width: 100%;
 background: blue;
 min-height: 30vh;
 float:left;
 @include cf();
}

.chiclet {
  padding: 1em;
  text-align: center;
  background: rgba(#fff, .5);
  margin-bottom: gutter(12);
}
 img {
   max-width: 100%;
 }

.module-a-col {
  background: rgba(green, .25);
}
.module-b-col {
  background: rgba(brown, .25);
}

.module-c-col {
  background: rgba(purple, .25);
}

.content-component {
 width: 100%;
 background: rgba(white, 0.5);
 min-height: 15vh;
}

.wrapper {
  @include container(layout($layout-small-4));
  @include breakpoint($bp-desktop) {
    @include container(layout($layout-desktop));
    max-width: 960px;
    //width: 90%;
  }
  @include breakpoint($bp-mega) {
    max-width: 1110px;
    //width: 90%;

  }
}


.l-layout--alpha .module-a-col {
  @include breakpoint($tablet-size){
    @include span(12 of 12);
  }
   @include breakpoint($desktop-size){
    @include span(6 of 12);
  }
}

.l-layout--alpha .module-a-col > div {
  min-height: 200px;
   @include breakpoint($desktop-size){
    min-height: 330px;
  }
}

.l-layout--alpha .module-b-col {
  background: rgba(orange, 0.25);
  @include breakpoint($tablet-size){
    @inlude span(12 of 12);
  }
   @include breakpoint($desktop-size){
    @include span(6 of 12 nest);
    @include last();
  }
}

.l-layout--alpha .module-b-col > div {
  @include breakpoint($tablet-size){
      @include span( 2 of 6 nest);
      &:last-child{
        @include span( 4 of 6 nest);
        @include last();
      }
    }
}

.l-layout--alpha .module-b-col .content-component {
    @include breakpoint($desktop-size) {
      min-height: 330px;
    }
}

.l-layout--alpha .chiclet {
  @include span(3 of 6);
  margin-bottom: gutter(6);
  &:nth-child(2n){
    @include last();
  }
  @include breakpoint($tablet-size){
     @include span(2 of 4);
  }
  @include breakpoint($desktop-size){
    min-height:97px;
    @include span(2 of 4);
     margin-bottom: gutter(4);
    &:nth-child(5), &:nth-child(6){
      margin-bottom: 0;
    }
  }
}


.l-layout--alpha .module-c-col > div{
  margin-bottom: 10px;
   @include breakpoint($tablet-size){
     @include span(2 of 6);
     min-height: 220px;
      &:nth-child(3n){
       @include last();
     }
   }
  @include breakpoint($desktop-size){
     @include span(4 of 12);
     &:nth-child(3n){
       @include last();
     }
   }
}

SassMeister-output.css

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

/* BREAKPOINTS */
.module {
  width: 100%;
  background: blue;
  min-height: 30vh;
  float: left;
}
.module:before, .module:after {
  content: " ";
  display: table;
}
.module:after {
  clear: both;
}

.chiclet {
  padding: 1em;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.69492%;
}

img {
  max-width: 100%;
}

.module-a-col {
  background: rgba(0, 128, 0, 0.25);
}

.module-b-col {
  background: rgba(165, 42, 42, 0.25);
}

.module-c-col {
  background: rgba(128, 0, 128, 0.25);
}

.content-component {
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  min-height: 15vh;
}

.wrapper {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25) 80%, transparent 80%);
  background-size: 17.24138%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}
.wrapper:after {
  content: " ";
  display: block;
  clear: both;
}
@media (min-width: 60em) {
  .wrapper {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25) 55.55556%, transparent 55.55556%);
    background-size: 8.65385%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
    max-width: 960px;
  }
  .wrapper:after {
    content: " ";
    display: block;
    clear: both;
  }
}
@media (min-width: 76.25em) {
  .wrapper {
    max-width: 1110px;
  }
}

@media (min-width: 768px) {
  .l-layout--alpha .module-a-col {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
  }
}
@media (min-width: 1000px) {
  .l-layout--alpha .module-a-col {
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%;
  }
}

.l-layout--alpha .module-a-col > div {
  min-height: 200px;
}
@media (min-width: 1000px) {
  .l-layout--alpha .module-a-col > div {
    min-height: 330px;
  }
}

.l-layout--alpha .module-b-col {
  background: rgba(255, 165, 0, 0.25);
}
@media (min-width: 768px) {
  .l-layout--alpha .module-b-col {
    @inlude span(12 of 12);
  }
}
@media (min-width: 1000px) {
  .l-layout--alpha .module-b-col {
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%;
    float: right;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .l-layout--alpha .module-b-col > div {
    width: 31.03448%;
    float: left;
    margin-right: 3.44828%;
  }
  .l-layout--alpha .module-b-col > div:last-child {
    width: 65.51724%;
    float: left;
    margin-right: 3.44828%;
    float: right;
    margin-right: 0;
  }
}

@media (min-width: 1000px) {
  .l-layout--alpha .module-b-col .content-component {
    min-height: 330px;
  }
}

.l-layout--alpha .chiclet {
  width: 48.27586%;
  float: left;
  margin-right: 3.44828%;
  margin-bottom: 3.44828%;
}
.l-layout--alpha .chiclet:nth-child(2n) {
  float: right;
  margin-right: 0;
}
@media (min-width: 768px) {
  .l-layout--alpha .chiclet {
    width: 47.36842%;
    float: left;
    margin-right: 5.26316%;
  }
}
@media (min-width: 1000px) {
  .l-layout--alpha .chiclet {
    min-height: 97px;
    width: 47.36842%;
    float: left;
    margin-right: 5.26316%;
    margin-bottom: 5.26316%;
  }
  .l-layout--alpha .chiclet:nth-child(5), .l-layout--alpha .chiclet:nth-child(6) {
    margin-bottom: 0;
  }
}

.l-layout--alpha .module-c-col > div {
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .l-layout--alpha .module-c-col > div {
    width: 31.03448%;
    float: left;
    margin-right: 3.44828%;
    min-height: 220px;
  }
  .l-layout--alpha .module-c-col > div:nth-child(3n) {
    float: right;
    margin-right: 0;
  }
}
@media (min-width: 1000px) {
  .l-layout--alpha .module-c-col > div {
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%;
  }
  .l-layout--alpha .module-c-col > div:nth-child(3n) {
    float: right;
    margin-right: 0;
  }
}

SassMeister-rendered.html

<div class="wrapper">
  <div class="l-layout--alpha">
    <div class="module module-a-col">
      <div class="content-component">
          Module A
      </div>
    </div>
    <div class=" module module-b-col">
      <div class="submodule-a-col">
      
        <div class="content-component">
        <img src="" alt="">
      </div>
      </div>
      <div class="submodule-b-col">
      
        <div class="chiclet">Chiclet</div>
        <div class="chiclet">Chiclet</div>
        <div class="chiclet">Chiclet</div>
        <div class="chiclet">Chiclet</div>
        <div class="chiclet">Chiclet</div>
        <div class="chiclet">Chiclet</div>
      </div>
    </div>
    <div class="module module-c-col">
      <div class="content-component">
        <img src="" alt="">
      </div>
      <div class="content-component">
        <img src="" alt="">
      </div>
      <div class="content-component">
        <img src="" alt="">
      </div>
    </div>
  </div>
</div>