Why tabs not working when using mobile view (media queries)?

My tabs don't seem to be working when it gets to mobile view. It works normally when the media queries are not activated. But once it get to mobile, it doesn't work.

I think it has something to do with using div.main. The red colour is what I want which is why I used div.main for media queries, however the tabs don't work.

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 0.4fr 1fr 1fr 1fr;
  grid-template-rows: 100px 10% 10% 10% 10% 10% 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header header header header header"
    "main main main text text download"
    "main main main lion lion download"
    "main main main select select download"
    "main main main color color download"
    "main main main deselect deselect download";
}

@media (max-width: 1200px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "main"
      "text"
      "lion"
      "select"
      "color"
      "deselect"
      "download";
  }
}

@media only screen and (max-width: 1200px) {
  div.main {
    background-color: red;
    /* padding: 0; */
    margin: 0;
    height: 400px;
    width: auto;
  }
}

@media only screen and (max-width: 1200px) {
  #background-image {
    padding-top: 180px;
    padding-left: 100px;
    margin: 0;
    height: 400px;
    width: auto;
  }
}

@media only screen and (max-width: 1200px) {
  #product-svg {
    padding-bottom: 100px;
    padding-left: 100px;
    margin: 0;
    height: 400px;
    width: auto;
  }
}

.header {
  grid-area: header;
  /* background-color: red; */
  margin: 50px;
}

.logo {
  position: fixed;
  display: inline-block;
  left: 13px;
  top: 15px;
}

.navbar {
  position: fixed;
  display: inline-block;
  top: 47px;
  right: 13px;
  font-family: "Khula", sans-serif;
  line-height: 38px;
  font-weight: 400;
  font-size: 16px;
}

.nav-link {
  margin: 18px;
  color: #222222;
  text-decoration: none;
}

.main {
  grid-area: main;
  background-color: #f8f8f8;
  margin: 18px;
}

.text {
  grid-area: text;
  background-color: blue;
  margin-top: 18px;
  margin-right: 18px;
}

.lion {
  grid-area: lion;
  background-color: orange;
  margin-right: 18px;
}

.color {
  grid-area: color;
  background-color: green;
  margin-right: 18px;
}

.download {
  grid-area: download;
  background-color: pink;
  margin-top: 18px;
  margin-right: 18px;
  margin-bottom: 18px;
}

.select {
  grid-area: select;
  background-color: dodgerblue;
  margin-right: 18px;
}

.deselect {
  grid-area: deselect;
  background-color: grey;
  margin-bottom: 18px;
  margin-right: 18px;
}

.tab {
  float: left;

  background-color: #f1f1f1;
}
.tab button {
  display: inline-block;
  background-color: inherit;
  color: black;

  border: none;
  outline: none;

  cursor: pointer;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  float: left;
  padding: 0px 12px;
  border-left: none;
}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

#background-image {
  position: relative;
  bottom: 685px;
}

path {
  fill: #cccccc;
}

<div class="grid-container">

  <div class="header">
    <img class="logo" src="logo.png" alt="">

    <nav class="navbar">
      <a href=about.html class="nav-link">About</a>
      <a href=contact.html class="nav-link">Contact</a>
    </nav>
  </div>

  <div class="main">

    <div id="London" class="tabcontent">
      <div id="container">
        <svg id="product-svg" viewBox="0 0 550 678">

        </svg>
        <img id="background-image" src="l7008.png" alt="">
      </div>

    </div>

    <div id="Paris" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p>
    </div>

    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
  </div>
  <div class="text">c</div>
  <div class="lion">
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>

      <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>
  </div>

  <div class="download">f</div>

  <div class="select">j</div>
  <div class="deselect">k</div>
</div>

from Recent Questions - Stack Overflow https://ift.tt/2SzzdA4
https://ift.tt/eA8V8J