grid and grid-template-columns not working in sass and css

This is the weirdest thing I come across ever. I placed grid in container, but either grid and grid-template-columns are not affecting the children of container.

<div class="container tabs-content__item tab-1-content tab-content__show">
      <div>
        <p class="text-white">
          If you decide Netflix isn't for you - no problem. No commitment.
          Cancel online anytime.
        </p>
        <a href="#" class="btn">WATCH FREE FOR 30 DAYS</a>
      </div>
      <div>
        <img src="./imgs/img-1-1.png" alt="" />
      </div>
    </div>

and wrote the following sass

  .tab-1-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: center;

    div {
      border: 1px solid yellow;
    }

    .btn {
      padding: 0.5em;
      border-radius: 4px;
    }
  }

  .tabs-content__item {
    display: none;
  }

  .tab-content__show {
    display: block;
  }

this is how it looks

but if I add display:grid !important it works fine,

but another weird thing that happens is that it causes some problem JavaScript I wrote.

I tried writing inline css, again the same problem.

This is the how it is compiled in css

.tabs-content .tab-1-content {
  display: -ms-grid !important;
  display: grid !important;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.tabs-content .tab-1-content div {
  border: 1px solid yellow;
}

.tabs-content .tab-1-content .btn {
  padding: 0.5em;
  border-radius: 4px;
}

I hope a legend out there can help me with this, thank you!