@mixin x-min-widths($map) {
  @each $width, $value in $map {
    %x-min-width-#{$width} {
      min-width: ($value / 1px ) / 16 * 1rem ; // Convert px to rem
    }
    .x-min-width-#{$width} {
      @extend %x-min-width-#{$width};
    }
  }
}

@mixin x-max-widths($map) {
  @each $width, $value in $map {
    %x-max-width-#{$width} {
      max-width: ($value / 1px ) / 16 * 1rem !important; // Convert px to rem
                                                         // Important to override Bootstrap
    }

    .x-max-width-#{$width} {
      @extend %x-max-width-#{$width};
    }
  }
}


@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}