// Media Queries using Sass List Maps
// Define our breakpoints in $breakpoints variable and assign key value pairs in ems.
@mixin wider-than($screen-size) {
    @if map-has-key($breakpoints, $screen-size) {
        @media (min-width: map-get($breakpoints, $screen-size)) {
            @content;
        }
    } @else if ($screen-size) {
        @media (min-width: $screen-size) {
            @content;
        }
    } @else {
        // Debugging - can be used thanks to map-has-key() instead of loop
        @warn "Breakpoint '#{$screen-size}' does not exist!"
    }
}

@mixin col ($col, $sum, $gap: 1em, $align: top, $first: false, $last: false) {
    font-size: 16px;
    vertical-align: $align;
    display: inline-block;
    
    @media only screen and (min-width: 768px) {
        width: percentage($col/$sum);
        vertical-align: $align;
    }

    &.fluid { width: percentage($col/$sum); }
}