如何在CSS网格中使用@media隐藏div

Question

我有以下代码：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0.3em;
}

.a1 {
  grid-column: 1/4;
  background-color: #B8336A;
}

.a2 {
  grid-row: 2/4;
  background-color: #726DA8;
}

.a3 {
  background-color: #7C8CC4;
}

.a4 {
  background-color: #9FD2DB;
}

.a5 {
  grid-column: 2/4;
  background-color: #C490D2;
}

.a6 {
  grid-column: 1/3;
  background-color: #B8336A;
}

.a7 {
  grid-column: 3/4;
  background-color: #726DA8;
}

.a8 {
  grid-column: 1/4;
  background-color: #726DA8;
}

@media (max-width: 1200px) {
  .a8 {
    display: none;
  }
}

<div class="wrapper">
  <div class="a1">1</div>
  <div class="a2">2</div>
  <div class="a3">3</div>
  <div class="a4">4</div>
  <div class="a5">5</div>
  <div class="a6">6</div>
  <div class="a7">7</div>
  <div class="a8">8</div>
</div>

当使用@media时最大宽度为1200px时，我需要使用类“ a8”隐藏div，我尝试使用display：none，但这是行不通的，我还尝试了可视性：hidden但它不是。我需要的。我该做什么？谢谢你的帮助