between main 8 and popular
    <button class="button" data-filter=".agent">Agent</button>
    
    below main 8 in list
    <div class="element-item splatoon1 popular agent fem ink">
    <p class="name">Fem Agent 3</p>
    <a href="imgs/fagent3.png"><img src="imgs/fagent3.png"></a>
  </div>
    <div class="element-item splatoon1 popular agent masc ink">
    <p class="name">Masc Agent 3</p>
    <a href="imgs/magent3.png"><img src="imgs/magent3.png"></a>
  </div>
  
  
  <div class="element-item splatoon2 popular agent fem ink">
    <p class="name">Agent 4</p>
    <a href="imgs/agent4.png"><img src="imgs/agent4.png"></a>
  </div>
    <div class="element-item splatoon2 popular agent fem octo">
    <p class="name">Fem Agent 8 (s2)</p>
    <a href="imgs/f2agent8.png"><img src="imgs/f2agent8.png"></a>
  </div>
  <div class="element-item splatoon2 popular agent masc octo">
    <p class="name">Masc Agent 8 (s2)</p>
    <a href="imgs/m2agent8.png"><img src="imgs/m2agent8.png"></a>
  </div>
  
  
  <div class="element-item splatoon3 popular agent fem ink">
    <p class="name">Neo Agent 3</p>
    <a href="imgs/neo3.png"><img src="imgs/neo3.png"></a>
  </div>
    <div class="element-item splatoon3 popular agent fem ink">
    <p class="name">Captian</p>
    <a href="imgs/captain.png"><img src="imgs/captain.png"></a>
  </div>
  <div class="element-item splatoon3 popular agent fem octo">
    <p class="name">Fem Agent 8 (s3)</p>
    <a href="imgs/f3agent8.png"><img src="imgs/f3agent8.png"></a>
  </div>
  <div class="element-item splatoon3 popular agent masc octo">
    <p class="name">Masc Agent 8 (s2)</p>
    <a href="imgs/m3agent8.png"><img src="imgs/m3agent8.png"></a>
  </div>