// Helpers
$full:              100%;
$half:              100% / 2;

// Media Queries Breakpoints
// Can be tweaked if need be.
$small:             30em; // Portrait mobile to landscape mobile
$medium:            50em; // Portrait tablet to landscape tablet
$large:             68.750em; // Small desktop to large desktop

// Example padding for grid
// Doesn't actually need to be kept in.
$bit-padding:       0.3em;

// Grid widths
// ----------------------------------------------
// Feel free to change this to how many columns 
// you want this grid system to have.
$start:             1;
$end:               12;

// Frame width (grid wrapper) 
$frame-width:       100%;

// Demo Colors
$lemonade-color:    #FCD920;
$new-grid-color:    #87D37C; 

// Mixins, not worth having its own file.
// Border box
// Should probably use auto-prefix on this.
@mixin box-sizing($type) {
  -webkit-box-sizing: $type;
     -moz-box-sizing: $type;
          box-sizing: $type;
}

// Start the grid.
// Optional hard reset
* {
margin: 0;
padding: 0;
@include box-sizing(border-box);
}

// clearfix
.frame {
    margin: 0 auto;
    max-width: $frame-width;
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

// Attribute selector
// Also I've removed :last-of-type
[class*='bit-'] {
    float: left;
    padding: $bit-padding;
}

// Create grid widths (1-12)
@for $i from $start through $end {
    .bit-#{$i} {
        width: $full / $i;
    }
}

// Common widths
// Please use the media queries below to respond these widths
// Feel free to pull request new widths
.bit-25 { width: $full - 75; }
.bit-40 { width: $full - 60; }
.bit-60 { width: $full - 40; }
.bit-75 { width: $full - 25; }

.box {
    border: 2px solid lighten($color-black, 90%);
    padding: 15px 0;
}

.content {
    max-width: 1200px;
    margin: 40px auto;

    h2 {
        font-size: 2.5em;
        text-align: center;
        margin-bottom: 10px;
    }
}