layout,
[layout] {
  position: relative;
  display: flex;
}

[flex] {
  flex: 1;
}

.ele-qry {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  visibility: hidden;
  pointer-events: none;
  z-index: -99;
}


@mixin element-query($mq) {
  $mq: "'" + $mq + "'";

  $attr: str-replace($mq, ':', '-');
  $attr: str-replace($attr, ' ', '-');
  $attr: str-replace($attr, '--', '-');
  $attr: str-replace($attr, '(', '');
  $attr: str-replace($attr, ')', '');

  &.#{$attr} {
    @content;
  }

  .ele-qry {
    font-family: $mq;
  }

}

/*
div {

  @include element-query( (min-width: 300px) ) {
    background: blue;
  };

  @include element-query( (min-width: 400px) And (max-width: 800px) ) {
    background: green;
  };

}
*/