<section>
  <row class="row-full">
    <cell>
      <h4>Contained to Full-Width with Sidebar</h4>
      <span>Dynamically unleash B2C solutions whereas turnkey core competencies. Appropriately drive cross-media quality vectors through dynamic quality vectors. Rapidiously maximize high standards in human capital vis-a-vis go forward portals. Competently implement standards compliant internal or "organic" sources via intuitive bandwidth. Intrinsicly pursue premium content before market-driven deliverables.</span>
    </cell>
    <cell>
      <h4>Sidebar</h4>
      <span>Dynamically unleash B2C solutions whereas turnkey core competencies.</span>
    </cell>
  </row>
  <row>
    <cell> 
      <h4>Contained with Sidebar</h4>
      <span>Dynamically unleash B2C solutions whereas turnkey core competencies. Appropriately drive cross-media quality vectors through dynamic quality vectors. Rapidiously maximize high standards in human capital vis-a-vis go forward portals. Competently implement standards compliant internal or "organic" sources via intuitive bandwidth. Intrinsicly pursue premium content before market-driven deliverables.</span>
    </cell>
    <cell>
      <h4>Sidebar</h4>
      <span>Dynamically unleash B2C solutions whereas turnkey core competencies..</span>
    </cell>
  </row>  
  <row class="row-full row-full--768-up">
    <cell>
      <h4>Contained to Full-Width at >=768px with Sidebar</h4>
      <span>Dynamically unleash B2C solutions whereas turnkey core competencies. Appropriately drive cross-media quality vectors through dynamic quality vectors. Rapidiously maximize high standards in human capital vis-a-vis go forward portals. Competently implement standards compliant internal or "organic" sources via intuitive bandwidth. Intrinsicly pursue premium content before market-driven deliverables.</span>
    </cell>
    <cell>
      <h4>Sidebar</h4>
      <span>Dynamically unleash B2C solutions whereas turnkey core competencies.</span>
    </cell>
  </row>
  <row class="row-full row-full--768-down">
    <cell>
      <h4>Contained to Full-Width at &lt;768px with Sidebar</h4>
      <span>Dynamically unleash B2C solutions whereas turnkey core competencies. Appropriately drive cross-media quality vectors through dynamic quality vectors. Rapidiously maximize high standards in human capital vis-a-vis go forward portals. Competently implement standards compliant internal or "organic" sources via intuitive bandwidth. Intrinsicly pursue premium content before market-driven deliverables.</span>
    </cell>
    <cell>
      <h4>Sidebar</h4>
      <span>Dynamically unleash B2C solutions whereas turnkey core competencies.</span>
    </cell>
  </row>
</section>

<section>  
  <row class="row-full">
    <cell>
      <h4>Contained to Full-Width without Sidebar</h4>
      <span>Dynamically unleash B2C solutions whereas turnkey core competencies. Appropriately drive cross-media quality vectors through dynamic quality vectors. Rapidiously maximize high standards in human capital vis-a-vis go forward portals. Competently implement standards compliant internal or "organic" sources via intuitive bandwidth. Intrinsicly pursue premium content before market-driven deliverables.</span>
    </cell>    
  </row>  
  <row>
    <cell>
      <h4>Contained without Sidebar</h4>
      <span>Dynamically unleash B2C solutions whereas turnkey core competencies. Appropriately drive cross-media quality vectors through dynamic quality vectors. Rapidiously maximize high standards in human capital vis-a-vis go forward portals. Competently implement standards compliant internal or "organic" sources via intuitive bandwidth. Intrinsicly pursue premium content before market-driven deliverables.</span>
    </cell>    
  </row>
  <row class="row-full row-full--768-up">
    <cell>
      <h4>Contained to Full-Width at >=768px without Sidebar</h4>
      <span>Dynamically unleash B2C solutions whereas turnkey core competencies. Appropriately drive cross-media quality vectors through dynamic quality vectors. Rapidiously maximize high standards in human capital vis-a-vis go forward portals. Competently implement standards compliant internal or "organic" sources via intuitive bandwidth. Intrinsicly pursue premium content before market-driven deliverables.</span>
    </cell>    
  </row>
  <row class="row-full row-full--768-down">
    <cell>
      <h4>Contained to Full-Width at &lt;768px with Sidebar</h4>
      <span>Dynamically unleash B2C solutions whereas turnkey core competencies. Appropriately drive cross-media quality vectors through dynamic quality vectors. Rapidiously maximize high standards in human capital vis-a-vis go forward portals. Competently implement standards compliant internal or "organic" sources via intuitive bandwidth. Intrinsicly pursue premium content before market-driven deliverables.</span>
    </cell>    
  </row>
</section>

* {
  box-sizing: inherit;
}

body {
  box-sizing: border-box;
  padding: 50px 0;
  background-color: #2f2329;
}

h4 {
  margin: 0 0 1.5em;
}

section {
  overflow-x: hidden;
  font-size: 1.125em;
  background-color: #5b4350;

  &:not(:only-child) {
    margin-bottom: 1.5em;
  }
}

row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 89%;
  margin: 0.5em auto;
}

cell {
  width: 100%;
  padding: 1.5em 2em;

  &:first-child {
    background-color: #ffe7b8;
    @media only screen and (min-width: 768px) {
      width: 75%;
    }
  }

  &:only-child {
    @media only screen and (min-width: 768px) {
      width: 100%;
    }
  }

  &:last-child:not(:only-child) {
    background-color: #b5c7d4;
    @media only screen and (min-width: 768px) {
      width: 25%;
      font-size: 0.889em;
    }
  }
}

.row-full {
  background-color: transparent;

  > cell {
    position: relative;
    z-index: 1;

    &:before {
      position: absolute;
      z-index: -1;
      top: 0;
      width: 100vw;
      height: 100%;
      content: "";
      @media only screen and (max-width: 767px) {
        left: 50%;
        transform: translateX(-50%);
      }
    }

    &:first-child {
      &:before {
        background-color: #ffe7b8;
        @media only screen and (min-width: 768px) {
          right: 0;
        }
      }
    }

    &:only-child {
      &:before {
        background-color: #ffe7b8;
        @media only screen and (min-width: 768px) {
          left: 50%;
          width: 100vw;
          transform: translateX(-50%);
        }
      }
    }

    &:last-child:not(:only-child) {
      &:before {
        background-color: #b5c7d4;
        @media only screen and (min-width: 768px) {
          left: 0;
        }
      }
    }
  }
}

.row-full--768-up {
  > cell {
    &:before {
      @media only screen and (max-width: 767px) {
        width: 100%;
      }
    }
  }
}

.row-full.row-full--768-down {
  > cell {
    &:before {
      @media only screen and (min-width: 768px) {
        width: 100%;
      }
    }
  }
}