Generated by SassMeister.com.

SassMeister-input-HTML.html

<section>
    <article class="container">
    	<div class="col-16">
        <div class="col-16-child">
            <div class="col-16-grandchild"></div>
            <div class="col-16-grandchild"></div>
        </div>
    </div>
    	<div class="col-15">
        <div class="col-15-child"></div>
    </div>
    	<div class="col-14">
        <div class="col-14-child"></div>
    </div>
    	<div class="col-13">
        <div class="col-13-child"></div>
    </div>
    	<div class="col-12">
        <div class="col-12-child"></div>
    </div>
    	<div class="col-11">
        <div class="col-11-child"></div>
    </div>
    	<div class="col-10">
        <div class="col-10-child"></div>
    </div>
    	<div class="col-9">
        <div class="col-9-child"></div>
    </div>
    	<div class="col-8">
        <div class="col-8-child"></div>
    </div>
    	<div class="col-7">
        <div class="col-7-child"></div>
    </div>
    	<div class="col-6">
        <div class="col-6-child"></div>
    </div>
    	<div class="col-5">
        <div class="col-5-child"></div>
    </div>
    	<div class="col-4">
        <div class="col-4-child"></div>
    </div>
    	<div class="col-3">
        <div class="col-3-child"></div>
    </div>
    	<div class="col-2">
        <div class="col-2-child"></div>
    </div>
    	<div class="col-1">
        <div class="col-1-child"></div>
    </div>
    </article>
</section>
<section>
    <article class="container">
    	<div class="col-third"></div>
    	<div class="col-third"></div>
    	<div class="col-third"></div>
    </article>
</section>
<section>
    <article class="container">
    	<div class="col-fourth"></div>
    	<div class="col-fourth"></div>
    	<div class="col-fourth"></div>
    	<div class="col-fourth"></div>
    </article>
</section>
<section>
    <article class="container">
    	<div class="col-fifth">
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
    </div>
    	<div class="col-fifth">
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
    </div>
    	<div class="col-fifth">
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
    </div>
    	<div class="col-fifth">
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
    </div>
    	<div class="col-fifth">
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
    </div>
    </article>
</section>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Flint (v2.0.1)
// ----

/**
 * Configuration map
 *
 * @prop {Map}    breakpoints                  - map of breakpoints, follow DSC order
 * @prop {Map}    breakpoints.alias            - named map of breakpoint settings
 * @prop {Number} breakpoints.alias.columns    - column count for breakpoint
 * @prop {Number} breakpoints.alias.breakpoint - breakpoint value for breakpoint
 * @prop {Map}    settings                     - map of settings for grid
 * @prop {String} settings.default             - alias of breakpoint to be grid default
 * @prop {String} settings.grid                - type of grid
 * @prop {Number} settings.gutter              - value for gutter
 * @prop {String} settings.float-direction     - direction of float
 * @prop {Bool}   settings.max-width           - maximum width value
 * @prop {Bool}   settings.center-container    - center containers
 * @prop {Bool}   settings.border-box-sizing   - use `box-sizing: border-box`
 * @prop {Bool}   settings.instance-maps       - use instance maps for debug mode
 * @prop {Bool}   settings.support-syntax      - support syntax within instance functions
 * @prop {Bool}   settings.debug-mode          - enable debug mode
 */
$flint: (
    "breakpoints": (
        "desktop": (
            "columns": 16,
            "breakpoint": 80em
        ),
        "laptop": (
            "columns": 12,
            "breakpoint": 60em
        ),
        "tablet": (
            "columns": 8,
            "breakpoint": 40em
        ),
        "mobile": (
            "columns": 4,
            "breakpoint": 20em
        )
    ),
    "settings": (
        "default": "mobile",
        "grid": "fluid",
        "gutter": 0.625em,
        "float-direction": "left",
        "max-width": true,
        "center-container": true,
        "border-box-sizing": true,
        "instance-maps": true,
        "support-syntax": false,
        "debug-mode": false
    )
);

// Import flint
@import "flint";

// Foundation
@include _(foundation);

/*
 * Visual HTML test
 */
$color__blue: #2C3F52;
$color__blue--dark: #15202A;
$color__blue--darkest: #0E181E;
$color__yellow: #FFF87B;

// Pseudo content
@mixin col-num($i) {
    &:before {
        @include _(desktop) {
            content: "#{$i} of 16";
        }
        @include _(laptop) {
            @if $i > 12 { $i: 12; }
            content: "#{$i} of 12";
        }
        @include _(tablet) {
            @if $i > 8 { $i: 8; }
            content: "#{$i} of 8";
        }
        @include _(mobile) {
            @if $i > 4 { $i: 4; }
            content: "#{$i} of 4";
        }
    }
}

// Generate cols
@for $i from 1 through 16 {
    .col-#{$i} {

        @if $i == 16 {

            @include _($i 12 8 4);
            @include col-num($i);

            .col-#{$i}-child {
                @include _($i/2 12/2 8/2 4/2, auto);
                @include col-num($i/2);

                .col-#{$i}-grandchild {
                    @include _($i/4 12/4 8/4 4/4, auto);
                    @include col-num($i/4);
                }
            }

        } @else if $i > 12 {

            @include _($i 12 8 4);
            @include col-num($i);

            .col-#{$i}-child {
                @include _($i/2 12/2 8/2 4/2, auto);
                @include col-num($i/2);
            }

        } @else if $i > 8 {

            @include _($i $i 8 4);
            @include col-num($i);

            .col-#{$i}-child {
                @include _($i/2 $i/2 8/2 4/2, auto);
                @include col-num($i/2);
            }

        } @else if $i > 4 {

            @include _($i $i $i 4);
            @include col-num($i);

            .col-#{$i}-child {
                @include _($i/2 $i/2 $i/2 4/2, auto);
                @include col-num($i/2);
            }

        } @else {

            @include _($i);
            @include col-num($i);

            .col-#{$i}-child {
                @include _($i, auto);
                @include col-num($i);
            }

        }

        // background: if($i > 10, darken($color__blue, ($i*0.25)), lighten($color__blue, (16/$i)));
        clear: both;

        div {
            // background: if($i > 10, lighten($color__blue, ($i*0.25)), darken($color__blue, (16/$i)));

            div {
                // background: if($i > 10, darken($color__blue, ($i*0.25)), lighten($color__blue, (16/$i)));
            }
        }
    }
}

.col-third {
    @include _(16/3 12/3 8/3 4/3);
    // background: $color__blue;

    &:before { content: "1/3"; }
}

.col-fourth {
    @include _(16/4 12/4 8/4 4/4);
    // background: $color__blue;

    &:before { content: "1/4"; }
}

.col-fifth {
    @include _(16/5 12/5 8/5 4/5);
    // background: $color__blue;

    &:before { content: "1/5"; }

    .col-fifth-child {
        @include _((16/5)/3 (12/5)/3 (8/5)/3 (4/5)/3, auto);
    }
}

div[class*="col"] {
    position: relative;
    font: 10px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    color: $color__yellow;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 2em 0;
    outline: lighten($color__blue, 10%) solid 2px;

    &:before {
        position: absolute;
        top: 1em;
        left: 1em;
    }
}

section {
    background: $color__blue--darkest;
    // & + & { background: darken($color__blue--darkest, 5%); }
    // & + & + & { background: darken($color__blue--darkest, 10%); }
    // & + & + & + & { background: darken($color__blue--darkest, 15%); }
}

.container {
    @include _(container, clear);
}

SassMeister-output.css

.col-1 {
  float: left;
  width: 18.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-1 {
    width: 4.6875%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-1 {
    width: 6.25%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-1 {
    width: 9.375%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-1:before {
    content: "1 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-1:before {
    content: "1 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-1:before {
    content: "1 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-1:before {
    content: "1 of 4";
  }
}
.col-1 .col-1-child {
  float: left;
  width: 66.66667%;
  margin-right: 16.66667%;
  margin-left: 16.66667%;
}
@media (min-width: 60.0625em) {
  .col-1 .col-1-child {
    width: 66.66667%;
    margin-right: 16.66667%;
    margin-left: 16.66667%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-1 .col-1-child {
    width: 66.66667%;
    margin-right: 16.66667%;
    margin-left: 16.66667%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-1 .col-1-child {
    width: 66.66667%;
    margin-right: 16.66667%;
    margin-left: 16.66667%;
  }
}
@media (min-width: 60.0625em) {
  .col-1 .col-1-child:before {
    content: "1 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-1 .col-1-child:before {
    content: "1 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-1 .col-1-child:before {
    content: "1 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-1 .col-1-child:before {
    content: "1 of 4";
  }
}
.col-1 div {
  height: 100% !important;
}

.col-2 {
  float: left;
  width: 43.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-2 {
    width: 10.9375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-2 {
    width: 14.58333%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-2 {
    width: 21.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-2:before {
    content: "2 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-2:before {
    content: "2 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-2:before {
    content: "2 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-2:before {
    content: "2 of 4";
  }
}
.col-2 .col-2-child {
  float: left;
  width: 85.71429%;
  margin-right: 7.14286%;
  margin-left: 7.14286%;
}
@media (min-width: 60.0625em) {
  .col-2 .col-2-child {
    width: 85.71429%;
    margin-right: 7.14286%;
    margin-left: 7.14286%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-2 .col-2-child {
    width: 85.71429%;
    margin-right: 7.14286%;
    margin-left: 7.14286%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-2 .col-2-child {
    width: 85.71429%;
    margin-right: 7.14286%;
    margin-left: 7.14286%;
  }
}
@media (min-width: 60.0625em) {
  .col-2 .col-2-child:before {
    content: "2 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-2 .col-2-child:before {
    content: "2 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-2 .col-2-child:before {
    content: "2 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-2 .col-2-child:before {
    content: "2 of 4";
  }
}
.col-2 div {
  height: 100% !important;
}

.col-3 {
  float: left;
  width: 68.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-3 {
    width: 17.1875%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-3 {
    width: 22.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-3 {
    width: 34.375%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-3:before {
    content: "3 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-3:before {
    content: "3 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-3:before {
    content: "3 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-3:before {
    content: "3 of 4";
  }
}
.col-3 .col-3-child {
  float: left;
  width: 90.90909%;
  margin-right: 4.54545%;
  margin-left: 4.54545%;
}
@media (min-width: 60.0625em) {
  .col-3 .col-3-child {
    width: 90.90909%;
    margin-right: 4.54545%;
    margin-left: 4.54545%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-3 .col-3-child {
    width: 90.90909%;
    margin-right: 4.54545%;
    margin-left: 4.54545%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-3 .col-3-child {
    width: 90.90909%;
    margin-right: 4.54545%;
    margin-left: 4.54545%;
  }
}
@media (min-width: 60.0625em) {
  .col-3 .col-3-child:before {
    content: "3 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-3 .col-3-child:before {
    content: "3 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-3 .col-3-child:before {
    content: "3 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-3 .col-3-child:before {
    content: "3 of 4";
  }
}
.col-3 div {
  height: 100% !important;
}

.col-4 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-4 {
    width: 23.4375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-4 {
    width: 31.25%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-4 {
    width: 46.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-4:before {
    content: "4 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-4:before {
    content: "4 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-4:before {
    content: "4 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-4:before {
    content: "4 of 4";
  }
}
.col-4 .col-4-child {
  float: left;
  width: 93.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-4 .col-4-child {
    width: 93.33333%;
    margin-right: 3.33333%;
    margin-left: 3.33333%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-4 .col-4-child {
    width: 93.33333%;
    margin-right: 3.33333%;
    margin-left: 3.33333%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-4 .col-4-child {
    width: 93.33333%;
    margin-right: 3.33333%;
    margin-left: 3.33333%;
  }
}
@media (min-width: 60.0625em) {
  .col-4 .col-4-child:before {
    content: "4 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-4 .col-4-child:before {
    content: "4 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-4 .col-4-child:before {
    content: "4 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-4 .col-4-child:before {
    content: "4 of 4";
  }
}
.col-4 div {
  height: 100% !important;
}

.col-5 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-5 {
    width: 29.6875%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-5 {
    width: 39.58333%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-5 {
    width: 59.375%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-5:before {
    content: "5 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-5:before {
    content: "5 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-5:before {
    content: "5 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-5:before {
    content: "4 of 4";
  }
}
.col-5 .col-5-child {
  float: left;
  width: 43.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-5 .col-5-child {
    width: 44.73684%;
    margin-right: 2.63158%;
    margin-left: 2.63158%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-5 .col-5-child {
    width: 44.73684%;
    margin-right: 2.63158%;
    margin-left: 2.63158%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-5 .col-5-child {
    width: 44.73684%;
    margin-right: 2.63158%;
    margin-left: 2.63158%;
  }
}
@media (min-width: 60.0625em) {
  .col-5 .col-5-child:before {
    content: "2.5 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-5 .col-5-child:before {
    content: "2.5 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-5 .col-5-child:before {
    content: "2.5 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-5 .col-5-child:before {
    content: "2.5 of 4";
  }
}
.col-5 div {
  height: 100% !important;
}

.col-6 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-6 {
    width: 35.9375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-6 {
    width: 47.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-6 {
    width: 71.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-6:before {
    content: "6 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-6:before {
    content: "6 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-6:before {
    content: "6 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-6:before {
    content: "4 of 4";
  }
}
.col-6 .col-6-child {
  float: left;
  width: 43.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-6 .col-6-child {
    width: 45.65217%;
    margin-right: 2.17391%;
    margin-left: 2.17391%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-6 .col-6-child {
    width: 45.65217%;
    margin-right: 2.17391%;
    margin-left: 2.17391%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-6 .col-6-child {
    width: 45.65217%;
    margin-right: 2.17391%;
    margin-left: 2.17391%;
  }
}
@media (min-width: 60.0625em) {
  .col-6 .col-6-child:before {
    content: "3 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-6 .col-6-child:before {
    content: "3 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-6 .col-6-child:before {
    content: "3 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-6 .col-6-child:before {
    content: "3 of 4";
  }
}
.col-6 div {
  height: 100% !important;
}

.col-7 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-7 {
    width: 42.1875%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-7 {
    width: 56.25%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-7 {
    width: 84.375%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-7:before {
    content: "7 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-7:before {
    content: "7 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-7:before {
    content: "7 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-7:before {
    content: "4 of 4";
  }
}
.col-7 .col-7-child {
  float: left;
  width: 43.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-7 .col-7-child {
    width: 46.2963%;
    margin-right: 1.85185%;
    margin-left: 1.85185%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-7 .col-7-child {
    width: 46.2963%;
    margin-right: 1.85185%;
    margin-left: 1.85185%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-7 .col-7-child {
    width: 46.2963%;
    margin-right: 1.85185%;
    margin-left: 1.85185%;
  }
}
@media (min-width: 60.0625em) {
  .col-7 .col-7-child:before {
    content: "3.5 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-7 .col-7-child:before {
    content: "3.5 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-7 .col-7-child:before {
    content: "3.5 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-7 .col-7-child:before {
    content: "3.5 of 4";
  }
}
.col-7 div {
  height: 100% !important;
}

.col-8 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-8 {
    width: 48.4375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-8 {
    width: 64.58333%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-8 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-8:before {
    content: "8 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-8:before {
    content: "8 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-8:before {
    content: "8 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-8:before {
    content: "4 of 4";
  }
}
.col-8 .col-8-child {
  float: left;
  width: 43.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-8 .col-8-child {
    width: 46.77419%;
    margin-right: 1.6129%;
    margin-left: 1.6129%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-8 .col-8-child {
    width: 46.77419%;
    margin-right: 1.6129%;
    margin-left: 1.6129%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-8 .col-8-child {
    width: 46.77419%;
    margin-right: 1.6129%;
    margin-left: 1.6129%;
  }
}
@media (min-width: 60.0625em) {
  .col-8 .col-8-child:before {
    content: "4 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-8 .col-8-child:before {
    content: "4 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-8 .col-8-child:before {
    content: "4 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-8 .col-8-child:before {
    content: "4 of 4";
  }
}
.col-8 div {
  height: 100% !important;
}

.col-9 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-9 {
    width: 54.6875%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-9 {
    width: 72.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-9 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-9:before {
    content: "9 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-9:before {
    content: "9 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-9:before {
    content: "8 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-9:before {
    content: "4 of 4";
  }
}
.col-9 .col-9-child {
  float: left;
  width: 43.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-9 .col-9-child {
    width: 47.14286%;
    margin-right: 1.42857%;
    margin-left: 1.42857%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-9 .col-9-child {
    width: 47.14286%;
    margin-right: 1.42857%;
    margin-left: 1.42857%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-9 .col-9-child {
    width: 46.77419%;
    margin-right: 1.6129%;
    margin-left: 1.6129%;
  }
}
@media (min-width: 60.0625em) {
  .col-9 .col-9-child:before {
    content: "4.5 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-9 .col-9-child:before {
    content: "4.5 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-9 .col-9-child:before {
    content: "4.5 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-9 .col-9-child:before {
    content: "4 of 4";
  }
}
.col-9 div {
  height: 100% !important;
}

.col-10 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-10 {
    width: 60.9375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-10 {
    width: 81.25%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-10 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-10:before {
    content: "10 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-10:before {
    content: "10 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-10:before {
    content: "8 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-10:before {
    content: "4 of 4";
  }
}
.col-10 .col-10-child {
  float: left;
  width: 43.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-10 .col-10-child {
    width: 47.4359%;
    margin-right: 1.28205%;
    margin-left: 1.28205%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-10 .col-10-child {
    width: 47.4359%;
    margin-right: 1.28205%;
    margin-left: 1.28205%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-10 .col-10-child {
    width: 46.77419%;
    margin-right: 1.6129%;
    margin-left: 1.6129%;
  }
}
@media (min-width: 60.0625em) {
  .col-10 .col-10-child:before {
    content: "5 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-10 .col-10-child:before {
    content: "5 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-10 .col-10-child:before {
    content: "5 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-10 .col-10-child:before {
    content: "4 of 4";
  }
}
.col-10 div {
  height: 100% !important;
}

.col-11 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-11 {
    width: 67.1875%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-11 {
    width: 89.58333%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-11 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-11:before {
    content: "11 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-11:before {
    content: "11 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-11:before {
    content: "8 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-11:before {
    content: "4 of 4";
  }
}
.col-11 .col-11-child {
  float: left;
  width: 43.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-11 .col-11-child {
    width: 47.67442%;
    margin-right: 1.16279%;
    margin-left: 1.16279%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-11 .col-11-child {
    width: 47.67442%;
    margin-right: 1.16279%;
    margin-left: 1.16279%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-11 .col-11-child {
    width: 46.77419%;
    margin-right: 1.6129%;
    margin-left: 1.6129%;
  }
}
@media (min-width: 60.0625em) {
  .col-11 .col-11-child:before {
    content: "5.5 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-11 .col-11-child:before {
    content: "5.5 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-11 .col-11-child:before {
    content: "5.5 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-11 .col-11-child:before {
    content: "4 of 4";
  }
}
.col-11 div {
  height: 100% !important;
}

.col-12 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-12 {
    width: 73.4375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-12 {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-12 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-12:before {
    content: "12 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-12:before {
    content: "12 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-12:before {
    content: "8 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-12:before {
    content: "4 of 4";
  }
}
.col-12 .col-12-child {
  float: left;
  width: 43.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-12 .col-12-child {
    width: 47.87234%;
    margin-right: 1.06383%;
    margin-left: 1.06383%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-12 .col-12-child {
    width: 47.87234%;
    margin-right: 1.06383%;
    margin-left: 1.06383%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-12 .col-12-child {
    width: 46.77419%;
    margin-right: 1.6129%;
    margin-left: 1.6129%;
  }
}
@media (min-width: 60.0625em) {
  .col-12 .col-12-child:before {
    content: "6 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-12 .col-12-child:before {
    content: "6 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-12 .col-12-child:before {
    content: "6 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-12 .col-12-child:before {
    content: "4 of 4";
  }
}
.col-12 div {
  height: 100% !important;
}

.col-13 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-13 {
    width: 79.6875%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-13 {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-13 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-13:before {
    content: "13 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-13:before {
    content: "12 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-13:before {
    content: "8 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-13:before {
    content: "4 of 4";
  }
}
.col-13 .col-13-child {
  float: left;
  width: 43.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-13 .col-13-child {
    width: 48.03922%;
    margin-right: 0.98039%;
    margin-left: 0.98039%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-13 .col-13-child {
    width: 47.87234%;
    margin-right: 1.06383%;
    margin-left: 1.06383%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-13 .col-13-child {
    width: 46.77419%;
    margin-right: 1.6129%;
    margin-left: 1.6129%;
  }
}
@media (min-width: 60.0625em) {
  .col-13 .col-13-child:before {
    content: "6.5 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-13 .col-13-child:before {
    content: "6.5 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-13 .col-13-child:before {
    content: "6.5 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-13 .col-13-child:before {
    content: "4 of 4";
  }
}
.col-13 div {
  height: 100% !important;
}

.col-14 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-14 {
    width: 85.9375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-14 {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-14 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-14:before {
    content: "14 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-14:before {
    content: "12 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-14:before {
    content: "8 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-14:before {
    content: "4 of 4";
  }
}
.col-14 .col-14-child {
  float: left;
  width: 43.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-14 .col-14-child {
    width: 48.18182%;
    margin-right: 0.90909%;
    margin-left: 0.90909%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-14 .col-14-child {
    width: 47.87234%;
    margin-right: 1.06383%;
    margin-left: 1.06383%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-14 .col-14-child {
    width: 46.77419%;
    margin-right: 1.6129%;
    margin-left: 1.6129%;
  }
}
@media (min-width: 60.0625em) {
  .col-14 .col-14-child:before {
    content: "7 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-14 .col-14-child:before {
    content: "7 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-14 .col-14-child:before {
    content: "7 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-14 .col-14-child:before {
    content: "4 of 4";
  }
}
.col-14 div {
  height: 100% !important;
}

.col-15 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-15 {
    width: 92.1875%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-15 {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-15 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-15:before {
    content: "15 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-15:before {
    content: "12 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-15:before {
    content: "8 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-15:before {
    content: "4 of 4";
  }
}
.col-15 .col-15-child {
  float: left;
  width: 43.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-15 .col-15-child {
    width: 48.30508%;
    margin-right: 0.84746%;
    margin-left: 0.84746%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-15 .col-15-child {
    width: 47.87234%;
    margin-right: 1.06383%;
    margin-left: 1.06383%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-15 .col-15-child {
    width: 46.77419%;
    margin-right: 1.6129%;
    margin-left: 1.6129%;
  }
}
@media (min-width: 60.0625em) {
  .col-15 .col-15-child:before {
    content: "7.5 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-15 .col-15-child:before {
    content: "7.5 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-15 .col-15-child:before {
    content: "7.5 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-15 .col-15-child:before {
    content: "4 of 4";
  }
}
.col-15 div {
  height: 100% !important;
}

.col-16 {
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
  clear: both;
}
@media (min-width: 60.0625em) {
  .col-16 {
    width: 98.4375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-16 {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-16 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
@media (min-width: 60.0625em) {
  .col-16:before {
    content: "16 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-16:before {
    content: "12 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-16:before {
    content: "8 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-16:before {
    content: "4 of 4";
  }
}
.col-16 .col-16-child {
  float: left;
  width: 43.33333%;
  margin-right: 3.33333%;
  margin-left: 3.33333%;
}
@media (min-width: 60.0625em) {
  .col-16 .col-16-child {
    width: 48.4127%;
    margin-right: 0.79365%;
    margin-left: 0.79365%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-16 .col-16-child {
    width: 47.87234%;
    margin-right: 1.06383%;
    margin-left: 1.06383%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-16 .col-16-child {
    width: 46.77419%;
    margin-right: 1.6129%;
    margin-left: 1.6129%;
  }
}
@media (min-width: 60.0625em) {
  .col-16 .col-16-child:before {
    content: "8 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-16 .col-16-child:before {
    content: "8 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-16 .col-16-child:before {
    content: "8 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-16 .col-16-child:before {
    content: "4 of 4";
  }
}
.col-16 .col-16-child .col-16-grandchild {
  float: left;
  width: 34.61538%;
  margin-right: 7.69231%;
  margin-left: 7.69231%;
}
@media (min-width: 60.0625em) {
  .col-16 .col-16-child .col-16-grandchild {
    width: 46.72131%;
    margin-right: 1.63934%;
    margin-left: 1.63934%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-16 .col-16-child .col-16-grandchild {
    width: 45.55556%;
    margin-right: 2.22222%;
    margin-left: 2.22222%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-16 .col-16-child .col-16-grandchild {
    width: 43.10345%;
    margin-right: 3.44828%;
    margin-left: 3.44828%;
  }
}
@media (min-width: 60.0625em) {
  .col-16 .col-16-child .col-16-grandchild:before {
    content: "4 of 16";
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-16 .col-16-child .col-16-grandchild:before {
    content: "4 of 12";
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-16 .col-16-child .col-16-grandchild:before {
    content: "4 of 8";
  }
}
@media (min-width: 0) and (max-width: 20em) {
  .col-16 .col-16-child .col-16-grandchild:before {
    content: "4 of 4";
  }
}

.col-third {
  float: left;
  width: 27.08333%;
  margin-right: 3.125%;
  margin-left: 3.125%;
}
@media (min-width: 60.0625em) {
  .col-third {
    width: 31.77083%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-third {
    width: 31.25%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-third {
    width: 30.20833%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
.col-third:before {
  content: "1/3";
}

.col-fourth {
  float: left;
  width: 18.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
}
@media (min-width: 60.0625em) {
  .col-fourth {
    width: 23.4375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-fourth {
    width: 22.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-fourth {
    width: 21.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
.col-fourth:before {
  content: "1/4";
}

.col-fifth {
  float: left;
  width: 13.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
}
@media (min-width: 60.0625em) {
  .col-fifth {
    width: 18.4375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-fifth {
    width: 17.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-fifth {
    width: 16.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
.col-fifth:before {
  content: "1/5";
}
.col-fifth .col-fifth-child {
  float: left;
  width: -12.12121%;
  margin-right: 22.72727%;
  margin-left: 22.72727%;
}
@media (min-width: 60.0625em) {
  .col-fifth .col-fifth-child {
    width: 24.85876%;
    margin-right: 4.23729%;
    margin-left: 4.23729%;
  }
}
@media (min-width: 40.0625em) and (max-width: 60em) {
  .col-fifth .col-fifth-child {
    width: 21.70543%;
    margin-right: 5.81395%;
    margin-left: 5.81395%;
  }
}
@media (min-width: 20.0625em) and (max-width: 40em) {
  .col-fifth .col-fifth-child {
    width: 14.81481%;
    margin-right: 9.25926%;
    margin-left: 9.25926%;
  }
}

div[class*="col"] {
  position: relative;
  font: 10px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  color: #FFF87B;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 2em 0;
  outline: #3e5873 solid 2px;
}
div[class*="col"]:before {
  position: absolute;
  top: 1em;
  left: 1em;
}

section {
  background: #0E181E;
}

.container {
  zoom: 1;
  float: none;
  max-width: 80em;
  margin-right: auto;
  margin-left: auto;
}
.container:before, .container:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.container:after {
  clear: both;
}

SassMeister-rendered.html

<section>
    <article class="container">
    	<div class="col-16">
        <div class="col-16-child">
            <div class="col-16-grandchild"></div>
            <div class="col-16-grandchild"></div>
        </div>
    </div>
    	<div class="col-15">
        <div class="col-15-child"></div>
    </div>
    	<div class="col-14">
        <div class="col-14-child"></div>
    </div>
    	<div class="col-13">
        <div class="col-13-child"></div>
    </div>
    	<div class="col-12">
        <div class="col-12-child"></div>
    </div>
    	<div class="col-11">
        <div class="col-11-child"></div>
    </div>
    	<div class="col-10">
        <div class="col-10-child"></div>
    </div>
    	<div class="col-9">
        <div class="col-9-child"></div>
    </div>
    	<div class="col-8">
        <div class="col-8-child"></div>
    </div>
    	<div class="col-7">
        <div class="col-7-child"></div>
    </div>
    	<div class="col-6">
        <div class="col-6-child"></div>
    </div>
    	<div class="col-5">
        <div class="col-5-child"></div>
    </div>
    	<div class="col-4">
        <div class="col-4-child"></div>
    </div>
    	<div class="col-3">
        <div class="col-3-child"></div>
    </div>
    	<div class="col-2">
        <div class="col-2-child"></div>
    </div>
    	<div class="col-1">
        <div class="col-1-child"></div>
    </div>
    </article>
</section>
<section>
    <article class="container">
    	<div class="col-third"></div>
    	<div class="col-third"></div>
    	<div class="col-third"></div>
    </article>
</section>
<section>
    <article class="container">
    	<div class="col-fourth"></div>
    	<div class="col-fourth"></div>
    	<div class="col-fourth"></div>
    	<div class="col-fourth"></div>
    </article>
</section>
<section>
    <article class="container">
    	<div class="col-fifth">
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
    </div>
    	<div class="col-fifth">
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
    </div>
    	<div class="col-fifth">
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
    </div>
    	<div class="col-fifth">
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
    </div>
    	<div class="col-fifth">
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
        <div class="col-fifth-child"></div>
    </div>
    </article>
</section>