queries

$media-products-list: "only screen and (max-width : 499px)";
$media-products-grid: "only screen and (min-width : 500px)";
$media-products-grid-compact: "only screen and (min-width : 500px max-width 767px)";
$media-products-grid-compact-expanded: "only screen and (min-width : 768px)";

@mixin use-query($query) {
  @media #{$query} {
    @content;
  }
}

.product {
  @include use-query($media-products-list) {
    width: 100%;
    padding: 10px 15px;
  }

  @include use-query($media-products-grid) {
    float: left;
  }

  @include use-query($media-products-grid-compact) {
    width: 1/2 * 100%;
  }

  @include use-query($media-products-grid-compact-expanded) {
    width: 1/4 * 100%;
  }
}