// -------------------------------------------------------------
// Importing grid core and clearfix
// --------------------------------

@import '../../externals/sassy-grid/sass/grid-core';
@import '../../externals/sassy-grid/sass/clearfix';

// -------------------------------------------------------------
// Basic grid settings
// -------------------

$degredation-selector: '.no_media_queries';
$ie6-selector: '.ie6';
$grid-debug: true;

// -------------------------------------------------------------
// Defining breakpoints
// --------------------

$media-breakpoint-mobile: 640;
$media-breakpoint-skinny: 860;

$media-query-mobile:    'screen and (max-width: #{ $media-breakpoint-mobile }px)';
$media-query-skinny:    'screen and (max-width: #{ $media-breakpoint-skinny }px)';
$media-query-print:     'print, projection';

// -------------------------------------------------------------
// Defining the grid
// -----------------

@include define-grid-settings(
    $grid-name: 'demo-grid',
    $is-fluid: true,
    $column-width: 40,
    $gutter-width: 30,
    $gutter-property: 'margin',
    $num-columns: 12,
    $padding-left: 80,
    $padding-right: 80,
    $breakpoints: (
        (
            query $media-query-skinny,
            max-width 700px,
            padding-left 20px,
            padding-right 20px
        ),
        (
            query $media-query-mobile,
            max-width 100%,
            padding-left 2%,
            padding-right 2%
        ),
        (
            query $media-query-print,
            max-width 100%,
            padding-left .5em,
            padding-right .5em
        )
    )
);

// -------------------------------------------------------------
// Applying the grid
// -----------------

@include apply-grid(
    $use-grid: 'demo-grid',
    $container-selector: '.grid_container',
    $row-selector: '.grid_base_12',
    $row-extend-selectors: '%grid_row',
    $column-selector-prefix: '.grid_col_',
    $column-extend-selectors: '%grid_col',
    $output-column-styles-for: 4 6 12
);

// -------------------------------------------------------------
// Basic grid styles
// -----------------

%grid_row{
    @include clearfix;
}

%grid_col {
    float: left;
    .main &{
        padding-bottom: 2em;
    }
}

.breakout {
    @extend %grid_col;
    @include grid-breakout( 'demo-grid' );
}

.grid_container{
    @include clearfix;
    margin-left: auto;
    margin-right: auto;
}


/* ------------------------------------------------------------- *
 * Demo styles
 * ------------------------------------------------------------- */

%grid_col{
    background: #D8E6FF;
    text-align: center;
    line-height: 40px;
    min-height: 40px;
    margin-bottom: 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}

.overlay_grid{
    .grid_base_12{
        height: 100%;
    }
    .grid_col_1{
        @extend %grid_col;
        @include span-columns( $columns: 1, $grid-name: 'demo-grid' );
        background: none;
    }
}

.breakout{
    background: #C1F0C4;
    line-height: normal;
    text-align: left;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -khtml-border-radius: 0;
    border-radius: 0;
}

        

/* -----------------------------
   Clearfix
   ----------------------------- */
.clearfix, .grid_base_12, .grid_container {
  zoom: 1;
}
.clearfix:before, .grid_base_12:before, .grid_container:before, .clearfix:after, .grid_base_12:after, .grid_container:after {
  content: " ";
  display: table;
}
.clearfix:after, .grid_base_12:after, .grid_container:after {
  clear: both;
}

/* -----------------------------
   Sassy Grid mixin
   @author: Frej Raahede Nielsen
   @documentation: http://springload.github.com/sassy-grid/
   ----------------------------- */
.grid_container {
  max-width: 970px;
}
.ie7 .grid_container, .ie6 .grid_container {
  /* Locking IE6 and IE7 due to sub-pixel rounding issue */
  width: 970px;
}

.grid_base_12 {
  padding-left: 6.7%;
  padding-right: 6.7%;
}

.grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 {
  margin-left: 1.78%;
  margin-right: 1.78%;
}
.grid_base_12 .grid_col_4:before, .grid_base_12 .grid_col_6:before, .grid_base_12 .grid_col_12:before, .overlay_grid .grid_col_1:before {
  /* Debug style only - this rule will not be present for production */
  display: block;
  top: 0;
  left: 0;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.4);
  line-height: 12px;
  padding: 1px 2px;
  color: #fff;
  font-weight: bold;
}

.grid_base_12 .breakout {
  margin-left: -7.7369%;
  margin-right: -7.7369%;
}

.overlay_grid .grid_col_1 {
  width: 4.76%;
}
.overlay_grid .grid_col_1:before {
  /* Debug style only - this rule will not be present for production */
  content: "1 columns";
}

.grid_base_12 .grid_col_4 {
  width: 29.76%;
}
.grid_base_12 .grid_col_4:before {
  /* Debug style only - this rule will not be present for production */
  content: "4 columns";
}

.grid_base_12 .grid_col_6 {
  width: 46.42%;
}
.grid_base_12 .grid_col_6:before {
  /* Debug style only - this rule will not be present for production */
  content: "6 columns";
}

.grid_base_12 .grid_col_12 {
  width: 96.42%;
}
.grid_base_12 .grid_col_12:before {
  /* Debug style only - this rule will not be present for production */
  content: "12 columns";
}

@media screen and (max-width: 860px) {
  .grid_container {
    max-width: 700px;
  }

  .grid_base_12 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .grid_base_12 .breakout {
    margin-left: -20px;
    margin-right: -20px;
  }
}
@media screen and (max-width: 640px) {
  .grid_container {
    max-width: 100%;
  }

  .grid_base_12 {
    padding-left: 2%;
    padding-right: 2%;
  }

  .grid_base_12 .breakout {
    margin-left: -2.30952%;
    margin-right: -2.30952%;
  }
}
@media print, projection {
  .grid_container {
    max-width: 100%;
  }

  .grid_base_12 {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  .grid_base_12 .breakout {
    margin-left: -0.5em;
    margin-right: -0.5em;
  }
}
/* IE6 fix: fixes double margin on floated elements */
.ie6 .grid_base_12 .grid_col_4, .grid_base_12 .ie6 .grid_col_4, .ie6 .grid_base_12 .grid_col_6, .grid_base_12 .ie6 .grid_col_6, .ie6 .grid_base_12 .grid_col_12, .grid_base_12 .ie6 .grid_col_12, .ie6 .overlay_grid .grid_col_1, .overlay_grid .ie6 .grid_col_1 {
  display: inline;
}

.grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .breakout, .overlay_grid .grid_col_1 {
  float: left;
}
.main .grid_base_12 .grid_col_4, .grid_base_12 .main .grid_col_4, .main .grid_base_12 .grid_col_6, .grid_base_12 .main .grid_col_6, .main .grid_base_12 .grid_col_12, .grid_base_12 .main .grid_col_12, .main .breakout, .main .overlay_grid .grid_col_1, .overlay_grid .main .grid_col_1 {
  padding-bottom: 2em;
}

.grid_container {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------- *
 * Demo styles
 * ------------------------------------------------------------- */
.grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .breakout, .overlay_grid .grid_col_1 {
  background: #D8E6FF;
  text-align: center;
  line-height: 40px;
  min-height: 40px;
  margin-bottom: 15px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
}

.overlay_grid .grid_base_12 {
  height: 100%;
}
.overlay_grid .grid_col_1 {
  background: none;
}

.breakout {
  background: #C1F0C4;
  line-height: normal;
  text-align: left;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -khtml-border-radius: 0;
  border-radius: 0;
}

        

<div class='grid_container'>
    <div class='grid_base_12'>
        <div class='grid_col_12'>
            12
        </div> <!-- /grid_col_12 -->
        <div class='grid_col_6'>
            6
        </div> <!-- /grid_col_6 -->
        <div class='grid_col_6'>
            6
        </div> <!-- /grid_col_6 -->
        <div class='breakout'>
            <h4>Breakout</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna. Quisque at dolor a sem sagittis hendrerit. Donec sit amet porta elit. Integer feugiat purus vel arcu dapibus a vehicula libero egestas. Cras in gravida est. Phasellus purus arcu, fringilla facilisis tristique eget, ultrices vitae est. Maecenas bibendum scelerisque diam in pretium. Cras ac magna non libero lacinia sagittis. Praesent eu tortor nunc, quis condimentum magna. Sed vel neque vitae felis auctor pharetra at fringilla leo.</p>
        </div> <!-- /breakout -->
        <div class='grid_col_4'>
            4
        </div> <!-- /grid_col_4 -->
        <div class='grid_col_4'>
            4
        </div> <!-- /grid_col_4 -->
        <div class='grid_col_4'>
            4
        </div> <!-- /grid_col_4 -->
    </div> <!-- /grid_base_12 -->
</div> <!-- /grid_container -->
        

12
6
6

Breakout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna. Quisque at dolor a sem sagittis hendrerit. Donec sit amet porta elit. Integer feugiat purus vel arcu dapibus a vehicula libero egestas. Cras in gravida est. Phasellus purus arcu, fringilla facilisis tristique eget, ultrices vitae est. Maecenas bibendum scelerisque diam in pretium. Cras ac magna non libero lacinia sagittis. Praesent eu tortor nunc, quis condimentum magna. Sed vel neque vitae felis auctor pharetra at fringilla leo.

4
4
4