Elemento sobrepondo outro HTML/CSS – Stack Overflow em Português

Olá! Meu problema é o seguinte:

Fiz esse grid seguido de um botão. No desktop ele aparece corretamente, porém no mobile o botão fica sobreposto no grid… Alguém tem ideia do que pode ser?

(OBS: O grid no total tem 6 imagens, no print não aparecem todas)

No desktop
No mobile

HTML

<div class="section-1-grid">
  <div class="section-1-grid-item"><img src="https://i.imgur.com/yVGoimh.png"></div>
  <div class="section-1-grid-item"><img src="https://i.imgur.com/yVGoimh.png"></div>
  <div class="section-1-grid-item"><img src="https://i.imgur.com/yVGoimh.png"></div>
  <div class="section-1-grid-item"><img src="https://i.imgur.com/yVGoimh.png"></div>
  <div class="section-1-grid-item"><img src="https://i.imgur.com/yVGoimh.png"></div>
  <div class="section-1-grid-item"><img src="https://i.imgur.com/yVGoimh.png"></div>
</div>
<center><a href="#"><button style="cursor: pointer;" class="button button-1">What we do</button></a></center>

CSS

.section-1-grid {
  display:grid;
  grid-template-columns:auto auto auto;
  margin:0 auto;
  width:90vw;
  grid-row-gap:5%;
  grid-column-gap:3%;
  margin-bottom:10vw;
}

.section-1-grid-item {
  border:none;
}

.button {
  border-radius:90px;
  padding:15px 30px;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.2em;
  display:inline;
  font-family:'Inter', sans-serif;
  font-size:0.8em;
  font-weight:800;
  transition: all 0.2s;
}

.button-1 {
  background:#212121;
  border:1px solid #212121;
  color:#fff;
}

.button-1:hover {
  background:transparent;
  color:#212121;
}

@media (max-width: 1024px) {

  .section-1-grid {
    display:grid;
    grid-template-columns:auto;
    width:90vw;
    grid-row-gap:1%;
  }
  
  .button {
    border-radius:90px;
    padding:4% 8%;
    font-size:1.8em;
    font-weight:800;
  }
  
}