SCSS and grid-template-columns causing errors

Question

I have made some responsive cards and using the below grid rule in SCSS:

.cards{
place-items: center center;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px,1fr));
padding: 20px;
grid-gap: 40px;
min-height: 500px;}

However, when it gets compiled over into my CSS file it produces the below code with a bunch of errors, possibly a format issue but any ideas on how to resolve this?

  .cards {
  place-items: center center;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(400px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  padding: 20px;
  grid-gap: 40px;
  min-height: 500px;
}