how to apply a css code for a specific screen size

i am new in Drupal , in my case i have added a css code to implement it for just a specific width but in return i see it displayed for all screen size not the small or medium size it appears in all website’s size, i wonder where is the problem here ? See the code below

libraries.yml

global-styling:
  version: VERSION
  js:
    js/popper.min.js: {}
    js/bootstrap.min.js: {}
    js/global.js: {}
  css:
    component:
      css/style.css: {}
      css/small.css: {breakpoint: small}
      css/medium.css: {breakpoint: medium}
  dependencies:
    - core/jquery
    - core/drupal

breakpoints.yml

mymodule.small:
  label: small
  mediaQuery: 'all and (min-width: 740px) and (min-device-width: 740px)'
  weight: 0
  multipliers:
    - 1x
mymodule.medium:
  label: medium
  mediaQuery: 'all and (min-width: 1300px)'
  weight: 1
  multipliers:
    - 1x

css code :

body {
  background: red !important;
}

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }