thoughtbot/neat

$medium-screen: 1000px;

$custom-neat-grid: (
  columns: 12,
  gutter: 50px,
  media: $medium-screen,
);

$specific-neat-grid: (
  columns: 12,
  gutter: 80px,
  media: "only screen and (min-width: 1000px) and (max-width: 1100px)",
);


$print-neat-grid: (
  columns: 10,
  gutter: 20px,
  media: print,
);

.grid-column--media-3-to-6 {
  @include grid-column(3);

  &::before {
    content: "#{map-get($neat-grid, media)}";
  }

  @include grid-media($custom-neat-grid, $specific-neat-grid, $print-neat-grid) {
    @include grid-column(6);

    &::before {
      content: "#{map-get($neat-grid, media)}";
    }
  }
}