how can i remove space between these two divs?

#tab-2-content {
  display: grid;
  grid-template-rows: 1fr 2fr;
  width: 70%;
  margin: 0 auto;
  grid-gap: 0;
}

.tab-2-content-bottom img {
  width: 250px;
  margin-bottom: 1rem;
}

.tab-2-content-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
}

.tab-2-content-top .push {
  justify-self: right;
}

.tab-2-content-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

#tab-2-content .btn {
  background: var(--primary-color);
  padding: 1rem 1.8rem;
  border-radius: 0.1rem;
  text-transform: uppercase;
}

.tab-2-content-top div {
  padding-bottom: 2rem;
}

#tab-2-content div h2 {
  margin-bottom: 1.5rem;
  font-weight: normal;
  margin-right: 1rem;
  margin-left: 1rem;
  max-width: 500px;
}

.tab-2-content-bottom figcaption {
  width: 200px;
  margin: auto;
}

#tab-2-content .btn {
  background: var(--primary-color);
  padding: 1rem 1.8rem;
  border-radius: 0.1rem;
  text-transform: uppercase;
}

.tab-2-content-top div {
  padding-bottom: 2rem;
}

#tab-2-content div h2 {
  margin-bottom: 1.5rem;
  font-weight: normal;
  margin-right: 1rem;
  margin-left: 1rem;
  max-width: 500px;
}

.tab-2-content-bottom figcaption {
  max-width: 200px;
  margin: auto;
}


/* the problem happens when browser width < 700px I have the following change in my media queries */

@media screen and (max-width:800px) {/* reset to your own value */
  #tab-2-content {
    grid-template-rows: auto;
  }
  .tab-2-content-bottom {
    grid-template-columns: 1fr;
    grid-gap: 2rem;
    align-items: start;
  }
  .tab-2-content-top {
    grid-template-columns: 1fr;
    / grid-auto-rows: auto;
    grid-gap: 0;
  }
  #tab-2-content div h2 {
    margin: 0;
    text-align: center;
  }
  .tab-2-content-top .push {
    justify-self: center;
    align-self: start;
  }
}

<div id="tab-2-content" class="tab-content-item">
  <div class="tab-2-content-top">
    <h2>Watch TV shows and movies anytime, anywhere — personalized for you.</h2>

    <div class="push">
      <a href="#" class="btn">Watch free for 30 days</a>
    </div>
  </div>
  <div class="tab-2-content-bottom">
    <figure>
      <img src="img/tab-content-2-1.png" alt="#" />
      <figcaption>
        <h4>Watch on your TV</h4>
        <p>Smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more.</p>
      </figcaption>
    </figure>

    <figure>
      <img src="img/tab-content-2-2.png" alt="#" />
      <figcaption>
        <h4>Watch instantly or download for later</h4>
        <p>Available on phone and tablet, wherever you go.</p>
      </figcaption>
    </figure>

    <figure>
      <img src="img/tab-content-2-3.png" alt="#" />
      <figcaption>
        <h4>Use any computer</h4>
        <p>Watch right on Netflix.com.</p>
      </figcaption>
    </figure>
  </div>
</div>