<main>

    <div class="tabs">
      <p class="tabs__tab" data-selector=".shopWrapper.sw1">SW1</p>
      <p class="tabs__tab" data-selector=".shopWrapper.sw2">SW2</p>
      <p class="tabs__tab" data-selector=".shopWrapper.sw3">SW3</p>
    </div>

    <div class="shopWrapper sw1">
      <div class="shopWrapper__cell">SW1</div>
      <div class="shopWrapper__cell">2</div>
      <div class="shopWrapper__cell">3</div>
      <div class="shopWrapper__cell">4</div>
      <div class="shopWrapper__cell">5</div>
      <div class="shopWrapper__cell">6</div>
      <div class="shopWrapper__cell">7</div>
      <div class="shopWrapper__cell">8</div>
      <div class="shopWrapper__cell">9</div>
      <div class="shopWrapper__cell">10</div>
      <div class="shopWrapper__cell">11</div>
      <div class="shopWrapper__cell">12</div>
      <div class="shopWrapper__cell">13</div>
      <div class="shopWrapper__cell">14</div>
      <div class="shopWrapper__cell">15</div>
      <div class="shopWrapper__cell">16</div>
      <div class="shopWrapper__cell">17</div>
      <div class="shopWrapper__cell">18</div>
    </div>

    <div class="shopWrapper sw2">
      <div class="shopWrapper__cell">SW2</div>
      <div class="shopWrapper__cell">2</div>
      <div class="shopWrapper__cell">3</div>
      <div class="shopWrapper__cell">4</div>
      <div class="shopWrapper__cell">5</div>
      <div class="shopWrapper__cell">6</div>
      <div class="shopWrapper__cell">7</div>
      <div class="shopWrapper__cell">8</div>
      <div class="shopWrapper__cell">9</div>
      <div class="shopWrapper__cell">10</div>
      <div class="shopWrapper__cell">11</div>
      <div class="shopWrapper__cell">12</div>
      <div class="shopWrapper__cell">13</div>
      <div class="shopWrapper__cell">14</div>
      <div class="shopWrapper__cell">15</div>
      <div class="shopWrapper__cell">16</div>
      <div class="shopWrapper__cell">17</div>
      <div class="shopWrapper__cell">18</div>
    </div>

    <div class="shopWrapper sw3">
      <div class="shopWrapper__cell">SW3</div>
      <div class="shopWrapper__cell">2</div>
      <div class="shopWrapper__cell">3</div>
      <div class="shopWrapper__cell">4</div>
      <div class="shopWrapper__cell">5</div>
      <div class="shopWrapper__cell">6</div>
      <div class="shopWrapper__cell">7</div>
      <div class="shopWrapper__cell">8</div>
      <div class="shopWrapper__cell">9</div>
      <div class="shopWrapper__cell">10</div>
      <div class="shopWrapper__cell">11</div>
      <div class="shopWrapper__cell">12</div>
      <div class="shopWrapper__cell">13</div>
      <div class="shopWrapper__cell">14</div>
      <div class="shopWrapper__cell">15</div>
      <div class="shopWrapper__cell">16</div>
      <div class="shopWrapper__cell">17</div>
      <div class="shopWrapper__cell">18</div>
    </div>
  </main>

.tabs {
  display: flex;
  gap: 10%;
  padding-bottom: 1.5%;
  justify-content: center;
  align-items: center;
  &__tab {
    font-weight: 500;
    font-size: calc(15px + 15 * (100vw / 1440));  
    color: #7B7B7B;
    cursor: pointer;
    &._active{
      color: inherit;
    }
  }
}

.shopWrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);  
  &__cell {
    border: 1px solid black;
    min-width: 16.6666667vw;
    min-height: 16.6666667vw;
  } 
    &.sw1 {
      display: none;
      &._active {
          display: grid;
      }
    }
  
    &.sw2 {
      display: none;
      &._active {
          display: grid;
      }
    }
  
    &.sw3 {
      display: none;
      &._active {
        display: grid;
      }
    }
}

document.addEventListener(
  'click',
  (e) => {
    const tgt = e.target.closest('.tabs__tab');
    if (tgt === null) {
      return;
    }
    document.querySelector('.shopWrapper._active')?.classList.remove('_active');
    document.querySelector('.tabs__tab._active')?.classList.remove('_active');
    tgt.classList.add('_active');
    document.querySelector(tgt.dataset.selector)?.classList.add('_active');
  },
);