adding grid-template-columns to jsx elements

Please I need help with making my CSS grid-template property work with my jsx component. No matter how hard I try, it just doesn't seem to work. I have tried experimenting with the syntax in a lot of ways. I even tried referring to other peoples' examples but I still can't get it to work.

//my jsx code

function App() {
  return (
    <div className="App">
      <Header />
      <Hero />
      <div className="cards">
          <div>
          <Card 
              image= "card_images/m.jpg"
              origin= "Kenya"
              text= "Rule Your World With Rare Looks"
              from= "$20" 
          />
          </div>
          <div>
          <Card 
              image= "card_images/o.jpg"
              origin= "Ghana"
              text= "Unique Looks from Ghana"
              from= "$50"
          />
          </div>

         <div>
         <Card 
              image= "card_images/i.jpg"
              origin= "Ghana"
              text= "Unique Looks from Ghana"
              from= "$50"
          />
         </div>

          <div>
          <Card 
              image= "card_images/k.jpg"
              origin= "Ghana"
              text= "Unique Looks from Ghana"
              from= "$50"
          />
          </div>

          <div>
          <Card 
              image= "card_images/l.jpg"
              origin= "Ghana"
              text= "Unique Looks from Ghana"
              from= "$50"
          />
          </div>

          <div>
          <Card 
              image= "card_images/c.jpg"
              origin= "Ghana"
              text= "Unique Looks from Ghana"
              from= "$50"
          />
          </div>
      </div>
    </div>
  );
}

//my css

 .cards{
  padding: 3rem;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fill, 
  minmax(500px, 1fr));
}

Please what am I doing wrong?

I need the cards to display in an auto grid that is responsive to the browser window width