in my React app i have a grid element .container, i have style for it and media request in it

here is Products.jsx

import React, { Component } from 'react'
import classes from "./Products.module.css"
import Product from "../Product/Product"
                    
export default function Products(props) {
  return (
    <main>
        <div className={classes.container}>
          {props.items.map(el =>(
            <Product item={el} key={el.id} />
          ))}    
        </div>                                                                     
    </main>  
  )
}

here is "./Products.module.css"

.container{    
    display: grid;
    grid-template-columns: repeat(auto-fill, 25%);   
}

@media screen and (max-width: 1024px) {
    .container{
        grid-template-columns: repeat(auto-fill, 50%);
    }
} 

The problem is that in browser the media request starts working when the screen width is 1973px,
but when i change the version from dekstop to mobile it works properly.

I made same layout and styles without using React and it also works properly, so i think the problem is in React