refactor(style): Make member list grid layout a resusable mixin (#27)

* refactor(style): Move breakpoint values to separate map for easier reuse

* feat(style): Create `mq-between` media query mixin

Add a mixin that allows you to include a media query that is true 
between two breakpoints.

* refactor(style): Make member list grid layout a reusable mixin

Write a mixin that allows specification of number of columns and gutter 
size and use it to show a 4-column grid on medium-sized screens, 
5-column on full-width.

.sass-lint.yml

@@ -15,7 +15,7 @@ rules:
   mixins-before-declarations:
     - 1
     -
-      exclude: ['mq']
+      exclude: ['mq', 'mq-between']
 
   # Line Spacing
   one-declaration-per-line: 1

scss/_vars.scss

@@ -40,13 +40,37 @@ $max-width: 60em;
 
 // Media query mixin
 $breakpoints: (
-  xs: "max-width: 22em",  // EXTRA SMALL (old mobile) screens, ≤ 352px
-  m: "min-width: 45em",   // MEDIUM (laptop) screens, ≥ 720px
-  fw: "min-width: 63em",  // FULL-WIDTH, ≥ 1008px
+  xs: 22em, // EXTRA SMALL (old mobile) screens, ≤ 352px
+  m: 45em,  // MEDIUM (laptop) screens, ≥ 720px
+  fw: 63em, // FULL-WIDTH, ≥ 1008px
+);
+
+$queries: (
+  xs: "max-width: #{map-get($breakpoints, xs)}",
+  m: "min-width: #{map-get($breakpoints, m)}",
+  fw: "min-width: #{map-get($breakpoints, fw)}",
 );
 
 @mixin mq ($size) {
-  @media only screen and (map-get($breakpoints, $size)) {
+  @media only screen and (map-get($queries, $size)) {
+    @content;
+  }
+}
+
+@mixin mq-between ($minsize, $maxsize) {
+  @media only screen and (min-width: map-get($breakpoints, $minsize)) and (max-width: calc(#{map-get($breakpoints, $maxsize)} - 1px)) {
     @content;
   }
 }
+
+// Composer List Grid Mixin
+@mixin composers-grid($cols, $gutter: .75em) {
+  float: left;
+  margin-right: $gutter;
+  margin-bottom: $gutter - .375em;
+  width: calc((100% - #{($cols - 1) * $gutter}) / #{$cols});
+
+  &:nth-child(#{$cols}n) {
+    margin-right: 0;
+  }
+}

scss/style.scss

@@ -726,15 +726,12 @@ iframe {
     transition: padding .2s ease-out;
     margin-bottom: 1em;
 
-    @include mq (m) {
-      float: left;
-      margin-right: 1.25%;
-      margin-bottom: .375em;
-      width: 19%;
+    @include mq-between (m, fw) {
+      @include composers-grid($cols: 4)
+    }
 
-      &:nth-child(5n) {
-        margin-right: 0;
-      }
+    @include mq (fw) {
+      @include composers-grid($cols: 5)
     }
 
     a {