<div id="gallery" class="emojiImg"></div>

<script>
let folders = [
  { path: '/ava/animals/', count: 8, title: 'ცხოველები' },
  { path: '/ava/anime/', count: 8, title: 'ანიმე' },
  { path: '/ava/flowers/', count: 8, title: 'ყვავილები' },
  { path: '/ava/other/', count: 8, title: 'სხვა და სხვა' },
  { path: '/ava/animated/', count: 8, title: 'ანიმაციური' },
  { path: '/ava/blackwhite/', count: 8, title: 'შავთეთრი' }
];

let exts = ['png', 'jpg', 'gif', 'jpeg']; 
let container = document.getElementById('gallery');

folders.forEach(folder => {
  // სათაური
  let heading = document.createElement('h2');
  heading.textContent = folder.title;
  container.appendChild(heading);

  // სურათების wrapper div
  let wrapper = document.createElement('div');
  wrapper.classList.add('folder-gallery');
  container.appendChild(wrapper);

  // სურათები
  for (let i = 1; i <= folder.count; i++) {
    exts.forEach(ext => {
      let img = document.createElement('img');
      img.src = folder.path + i + '.' + ext;

      img.onerror = function() { this.remove(); };

      wrapper.appendChild(img);
    });
  }
});
</script>

.emojiImg {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 align-content: center;
 align-items: center;
}

.emojiImg img {
 border-radius: 3px;
 margin: 3px;
 background: #fff;
 width: 60px;
 height: 60px;
 object-fit: cover;
 box-shadow: 0px 2px 2px 0px rgb(153 153 153 / 50%), inset 0px -3px 6px -2px rgb(78 78 78 / 30%);
 padding: 3px;
 transition: 0.3s;
}

.emojiImg img:hover {
 cursor: pointer; -ms-transform: scale(1.4);
 -webkit-transform: scale(1.4);
 transform: scale(1.4);
 box-shadow: 1px 1px 2px #4d5054; 
 z-index:99999;
}