бум бам

[html]
<div class="country">
<div class="country-title">Риалан</div>
<div class="cards">
<div class="card" onclick="openOverlay('banshee')">
<img class="card-image" src="https://i.imgur.com/GO1Hd5t.png">
<div class="card-title">Банши</div>
<div class="card-description">Духи в женском обличье, предвещающие смерть.</div>
</div>
<div class="card" onclick="openOverlay('barghest')">
<img class="card-image" src="https://i.imgur.com/6JtgRkk.png">
<div class="card-title">Баргест</div>
<div class="card-description">Чудовища с острыми рогами и клыками.</div>
</div>
<div class="card" onclick="openOverlay('white_stag')">
<img class="card-image" src="https://i.imgur.com/7JJ8ziq.png">
<div class="card-title">Белый Олень</div>
<div class="card-description">Мифическое существо, исполняющее желания.</div>
</div>
<div class="card" onclick="openOverlay('wandering_lights')">
<img class="card-image" src="https://i.imgur.com/nyZBDGk.png">
<div class="card-title">Блуждающие огни</div>
<div class="card-description">Злобные шары света, заманивающие путников в ловушки.</div>
</div>
<div class="card" onclick="openOverlay('boggart')">
<img class="card-image" src="https://i.imgur.com/ENSTktZ.png">
<div class="card-title">Боггарт</div>
<div class="card-description">Существа, превращающиеся в самый большой страх жертвы.</div>
</div>
<div class="card" onclick="openOverlay('bruxa')">
<img class="card-image" src="https://i.imgur.com/H7jLvlz.png">
<div class="card-title">Брукса</div>
<div class="card-description">Уродливые существа, питающиеся человечиной.</div>
</div>
<div class="card" onclick="openOverlay('vampire')">
<img class="card-image" src="https://i.imgur.com/D2TXS30.png">
<div class="card-title">Вампир</div>
<div class="card-description">Существа, питающиеся кровью и избегающие солнечного света.</div>
</div>
<div class="card" onclick="openOverlay('wampus')">
<img class="card-image" src="https://i.imgur.com/5BGEcHl.png">
<div class="card-title">Вампус</div>
<div class="card-description">Дикие кошки с шестью ногами и светящимися глазами.</div>
</div>
<div class="card" onclick="openOverlay('basilisk')">
<img class="card-image" src="https://i.imgur.com/v83bYg3.png">
<div class="card-title">Василиск</div>
<div class="card-description">Огромные змееподобные монстры с ядовитым укусом.</div>
</div>
<div class="card" onclick="openOverlay('wendigo')">
<img class="card-image" src="https://i.imgur.com/D40xgc4.png">
<div class="card-title">Вендиго</div>
<div class="card-description">Кровожадные монстры, некогда бывшие людьми.</div>
</div>
<div class="card" onclick="openOverlay('harpy')">
<img class="card-image" src="https://i.imgur.com/7a9tLtm.png">
<div class="card-title">Гарпия</div>
<div class="card-description">Полуженщины-полуптицы отвратительного вида.</div>
</div>
<div class="card" onclick="openOverlay('hippocampus')">
<img class="card-image" src="https://i.imgur.com/qgeVtcQ.png">
<div class="card-title">Гиппокамп</div>
<div class="card-description">Морские существа с рыбьим хвостом и головой коня.</div>
</div>
<div class="card" onclick="openOverlay('goblin')">
<img class="card-image" src="https://i.imgur.com/DWRQVec.png">
<div class="card-title">Гоблин</div>
<div class="card-description">Маленькие, эгоистичные существа с чёрными сердцами.</div>
</div>
<div class="card" onclick="openOverlay('grossvalur')">
<img class="card-image" src="https://i.imgur.com/CMDVgvV.png">
<div class="card-title">Гроссвалур</div>
<div class="card-description">Китообразные чудовища морей.</div>
</div>
<div class="card" onclick="openOverlay('daemon')">
<img class="card-image" src="https://i.imgur.com/Fvmvxyb.png">
<div class="card-title">Деймон</div>
<div class="card-description">Спутники чародеев.</div>
</div>
<div class="card" onclick="openOverlay('kelpie')">
<img class="card-image" src="https://i.imgur.com/yBporZu.png">
<div class="card-title">Келпи</div>
<div class="card-description">Водяные духи, обитающие в реках и озёрах.</div>
</div>
<div class="card" onclick="openOverlay('centaur')">
<img class="card-image" src="https://i.imgur.com/jTaLS7I.png">
<div class="card-title">Кентавр</div>
<div class="card-description">Существа с головой и торсом человека на теле лошади.</div>
</div>
<div class="card" onclick="openOverlay('nightmare')">
<img class="card-image" src="https://i.imgur.com/uSMtXgj.png">
<div class="card-title">Кошмар</div>
<div class="card-description">Чудовища, напоминающие чешуйчатых коней.</div>
</div>
<div class="card" onclick="openOverlay('manticore')">
<img class="card-image" src="https://i.imgur.com/YRpHdOF.png">
<div class="card-title">Мантикора</div>
<div class="card-description">Чудовища с телом льва, головой человека и хвостом скорпиона.</div>
</div>
<div class="card" onclick="openOverlay('nymph')">
<img class="card-image" src="https://i.imgur.com/hDCan3y.png">
<div class="card-title">Нимфа</div>
<div class="card-description">Покровительницы природы, души объектов или явлений.</div>
</div>
<div class="card" onclick="openOverlay('werewolf')">
<img class="card-image" src="https://i.imgur.com/t3S5oCg.png">
<div class="card-title">Оборотень</div>
<div class="card-description">Люди, способные превращаться в зверей.</div>
</div>
<div class="card" onclick="openOverlay('pegasus')">
<img class="card-image" src="https://i.imgur.com/BGCENNW.jpeg">
<div class="card-title">Пегас</div>
<div class="card-description">Благородные белоснежные кони с крыльями.</div>
</div>
<div class="card" onclick="openOverlay('pixie')">
<img class="card-image" src="https://i.imgur.com/ZcrNOXN.png">
<div class="card-title">Пикси</div>
<div class="card-description">Зловредные домовые, разновидность фейри.</div>
</div>
<div class="card" onclick="openOverlay('ghost')">
<img class="card-image" src="https://i.imgur.com/R3KiCXW.png">
<div class="card-title">Призрак</div>
<div class="card-description">Души умерших, проявляющиеся в реальной жизни.</div>
</div>
<div class="card" onclick="openOverlay('frost_ghost')">
<img class="card-image" src="https://i.imgur.com/I9rBdpD.png">
<div class="card-title">Морозный призрак</div>
<div class="card-description">Духи павших воинов, проклятые холодом.</div>
</div>
<div class="card" onclick="openOverlay('rugaru')">
<img class="card-image" src="https://i.imgur.com/33FyNsR.png">
<div class="card-title">Ругару</div>
<div class="card-description">Разновидность оборотней, не сумевших вернуть человеческую форму.</div>
</div>
<div class="card" onclick="openOverlay('mermaid')">
<img class="card-image" src="https://i.imgur.com/g3wpS6X.png">
<div class="card-title">Русалка</div>
<div class="card-description">Морские существа, девы с рыбьими хвостами.</div>
</div>
<div class="card" onclick="openOverlay('salamander')">
<img class="card-image" src="https://i.imgur.com/Qqnjh00.png">
<div class="card-title">Саламандра</div>
<div class="card-description">Маленькие огненные ящерки.</div>
</div>
<div class="card" onclick="openOverlay('salvannelli')">
<img class="card-image" src="https://i.imgur.com/YgKMf6B.png">
<div class="card-title">Сальванелли</div>
<div class="card-description">Лесные духи, похожие на крошечных человечков.</div>
</div>
<div class="card" onclick="openOverlay('sleipnir')">
<img class="card-image" src="https://i.imgur.com/Mcpszbn.png">
<div class="card-title">Слейпнир</div>
<div class="card-description">Агрессивные существа в виде восьминогих коней.</div>
</div>
<div class="card" onclick="openOverlay('scrimsl')">
<img class="card-image" src="https://i.imgur.com/S5rRgMD.png">
<div class="card-title">Скримсл</div>
<div class="card-description">Морские змеи с головой тюленя.</div>
</div>
<div class="card" onclick="openOverlay('succubus')">
<img class="card-image" src="https://i.imgur.com/fU1uv67.png">
<div class="card-title">Суккуб</div>
<div class="card-description">Духи природы, высасывающие жизненные силы.</div>
</div>
<div class="card" onclick="openOverlay('faun')">
<img class="card-image" src="https://i.imgur.com/w9gN1PY.png">
<div class="card-title">Фавн</div>
<div class="card-description">Жизнерадостные существа с козлиными копытцами и рожками.</div>
</div>
<div class="card" onclick="openOverlay('phoenix')">
<img class="card-image" src="https://i.imgur.com/AnOlDVR.png">
<div class="card-title">Феникс</div>
<div class="card-description">Птицы, способные возрождаться из пепла.</div>
</div>
<div class="card" onclick="openOverlay('fenke')">
<img class="card-image" src="https://i.imgur.com/0sLI65n.png">
<div class="card-title">Фенке</div>
<div class="card-description">Лесные и горные великаны, косматые и кровожадные.</div>
</div>
<div class="card" onclick="openOverlay('flerus')">
<img class="card-image" src="https://i.imgur.com/QfzIWhF.png">
<div class="card-title">Флерус</div>
<div class="card-description">Подневольные духи-домовики.</div>
</div>
<div class="card" onclick="openOverlay('chimera')">
<img class="card-image" src="https://i.imgur.com/BvSJvhj.jpeg">
<div class="card-title">Химера</div>
<div class="card-description">Чудовища с головой льва, туловищем козы и хвостом змеи.</div>
</div>
<div class="card" onclick="openOverlay('cerberus')">
<img class="card-image" src="https://i.imgur.com/Z5l4YMA.png">
<div class="card-title">Цербер</div>
<div class="card-description">Огромные трёхголовые псы.</div>
</div>
<div class="card" onclick="openOverlay('tenekryl')">
<img class="card-image" src="https://i.imgur.com/784RsNA.png">
<div class="card-title">Тенекрыл</div>
<div class="card-description">Ночной хищник, способный сливаться с тенью.</div>
</div>
<div class="card" onclick="openOverlay('zlomag')">
<img class="card-image" src="https://i.imgur.com/OLYhBTc.png">
<div class="card-title">Зломаг</div>
<div class="card-description">Магический двойник умершего чародея.</div>
</div>
<div class="card" onclick="openOverlay('stone_eater')">
<img class="card-image" src="https://i.imgur.com/1XX1ka7.png">
<div class="card-title">Камнеед</div>
<div class="card-description">Массивное существо, пожирающее минералы.</div>
</div>
<div class="card" onclick="openOverlay('giblozub')">
<img class="card-image" src="https://i.imgur.com/mNXeJwK.png">
<div class="card-title">Гиблозуб</div>
<div class="card-description">Огромная рыба с светящимися наростами.</div>
</div>
</div>
</div>

<div class="country">
<div class="country-title">Ледракс</div>
<div class="cards">
<div class="card" onclick="openOverlay('varg')">
<img class="card-image" src="https://forumupload.ru/uploads/001c/52/36/73/113458.png">
<div class="card-title">Варги</div>
<div class="card-description">Чёрные волки размером с небольшую лошадь.</div>
</div>
<div class="card" onclick="openOverlay('giant')">
<img class="card-image" src="https://forumupload.ru/uploads/001c/52/36/73/975213.png">
<div class="card-title">Великаны</div>
<div class="card-description">Гигантские человекоподобные существа.</div>
</div>
<div class="card" onclick="openOverlay('glusun')">
<img class="card-image" src="https://forumupload.ru/uploads/001c/52/36/73/50003.png">
<div class="card-title">Глусун</div>
<div class="card-description">Гигантские свиньи с острой щетиной.</div>
</div>
<div class="card" onclick="openOverlay('kraken')">
<img class="card-image" src="https://forumupload.ru/uploads/001c/52/36/73/172234.png">
<div class="card-title">Кракен</div>
<div class="card-description">Огромные головоногие моллюски.</div>
</div>
<div class="card" onclick="openOverlay('lingbakr')">
<img class="card-image" src="https://i.imgur.com/CODGL8C.png">
<div class="card-title">Лингбакр</div>
<div class="card-description">Морские чудовища, похожие на черепах.</div>
</div>
<div class="card" onclick="openOverlay('trollval')">
<img class="card-image" src="https://i.imgur.com/lyaozdo.png">
<div class="card-title">Тролльвал</div>
<div class="card-description">Огромные китообразные чудовища.</div>
</div>
<div class="card" onclick="openOverlay('frost_walker')">
<img class="card-image" src="https://i.imgur.com/y40GDz6.png">
<div class="card-title">Мерзлотники</div>
<div class="card-description">Ходячие мертвецы, проклятые холодом.</div>
</div>
<div class="card" onclick="openOverlay('myling')">
<img class="card-image" src="https://i.imgur.com/c7346Pe.png">
<div class="card-title">Мюлинг</div>
<div class="card-description">Злые существа, бывшие младенцами.</div>
</div>
<div class="card" onclick="openOverlay('panzerbjorn')">
<img class="card-image" src="https://i.imgur.com/XlPdcvF.jpg">
<div class="card-title">Панцербьёрн</div>
<div class="card-description">Белые медведи огромного размера.</div>
</div>
<div class="card" onclick="openOverlay('tenebris')">
<img class="card-image" src="https://i.imgur.com/BsM1emH.png">
<div class="card-title">Тенебрис</div>
<div class="card-description">Слепые существа, питающиеся светлыми эмоциями.</div>
</div>
<div class="card" onclick="openOverlay('troll')">
<img class="card-image" src="https://i.imgur.com/vivh0gb.png">
<div class="card-title">Тролль</div>
<div class="card-description">Уродливые существа, питающиеся человечиной.</div>
</div>
<div class="card" onclick="openOverlay('huldra')">
<img class="card-image" src="https://i.imgur.com/83AkXsD.png">
<div class="card-title">Хульдра</div>
<div class="card-description">Привлекательные девушки с коровьим хвостом.</div>
</div>
</div>
</div>

<div class="country-wrapper">
<div class="country">
<div class="country-title">Деламар</div>
<div class="cards">
<div class="card" onclick="openOverlay('dragon')">
<img class="card-image" src="https://i.imgur.com/qkwbr4s.png">
<div class="card-title">Дракон</div>
<div class="card-description">Гигантские крылатые ящероподобные существа.</div>
</div>
<div class="card" onclick="openOverlay('drakett')">
<img class="card-image" src="https://i.imgur.com/yeNIqPk.png">
<div class="card-title">Дракетт</div>
<div class="card-description">Драконы-карлики, домашние любимцы.</div>
</div>
</div>
</div>

<div class="country">
<div class="country-title">Виероли</div>
<div class="cards">
<div class="card" onclick="openOverlay('griffin')">
<img class="card-image" src="https://i.imgur.com/hkGb2w0.png">
<div class="card-title">Грифон</div>
<div class="card-description">Крылатые существа с телом льва и головой орла.</div>
</div>
<div class="card" onclick="openOverlay('goreglot')">
<img class="card-image" src="https://i.imgur.com/1EkXqrH.png">
<div class="card-title">Гореглот</div>
<div class="card-description">Гигантский горный червь, извергающий раскалённый газ.</div>
</div>
</div>
</div>
</div>

<div class="country">
<div class="country-title">Эфлингтон</div>
<div class="cards">
<div class="card" onclick="openOverlay('jackalope')">
<img class="card-image" src="https://i.imgur.com/CySL1za.png">
<div class="card-title">Джекалоп</div>
<div class="card-description">Рогатые кролики, популярные домашние любимцы.</div>
</div>
<div class="card" onclick="openOverlay('unicorn')">
<img class="card-image" src="https://i.imgur.com/uVkYSXA.png">
<div class="card-title">Единорог</div>
<div class="card-description">Белые лошади с магическим рогом.</div>
</div>
<div class="card" onclick="openOverlay('leprechaun')">
<img class="card-image" src="https://i.imgur.com/dSdeBnr.png">
<div class="card-title">Лепрекон</div>
<div class="card-description">Низкорослые бородатые человечки, хранители сокровищ.</div>
</div>
<div class="card" onclick="openOverlay('nacker')">
<img class="card-image" src="https://i.imgur.com/55h2M1A.png">
<div class="card-title">Накер</div>
<div class="card-description">Водяные монстры, напоминающие огромных змей.</div>
</div>
<div class="card" onclick="openOverlay('selkie')">
<img class="card-image" src="https://i.imgur.com/UcRCSA5.png">
<div class="card-title">Шелки</div>
<div class="card-description">Миролюбивые морские существа, полулюди-полутюлени.</div>
</div>
</div>
</div>

<div class="country">
<div class="country-title">Эрцхафен</div>
<div class="cards">
<div class="card" onclick="openOverlay('grula')">
<img class="card-image" src="https://i.imgur.com/q3Abwue.jpeg">
<div class="card-title">Грюла</div>
<div class="card-description">Гигантские людоеды с многочисленными хвостами.</div>
</div>
<div class="card" onclick="openOverlay('kobold')">
<img class="card-image" src="https://i.imgur.com/6eIhJr8.jpeg">
<div class="card-title">Кобольд</div>
<div class="card-description">Духи-хранители подземных ископаемых.</div>
</div>
<div class="card" onclick="openOverlay('krampus')">
<img class="card-image" src="https://i.imgur.com/KxeLoYD.jpeg">
<div class="card-title">Крампус</div>
<div class="card-description">Лохматые существа, карающие непослушных детей.</div>
</div>
</div>
</div>

<div class="country">
<div class="country-title">Тель-Ханадин</div>
<div class="cards">
<div class="card" onclick="openOverlay('genie')">
<img class="card-image" src="https://i.imgur.com/cNmOHg9.jpeg">
<div class="card-title">Джинн</div>
<div class="card-description">Духи стихии, исполняющие желания.</div>
</div>
<div class="card" onclick="openOverlay('sand_worm')">
<img class="card-image" src="https://i.imgur.com/kwFb1PG.jpeg">
<div class="card-title">Песчаный червь</div>
<div class="card-description">Монстры пустыни, движущиеся под песком.</div>
</div>
<div class="card" onclick="openOverlay('sphinx')">
<img class="card-image" src="https://i.imgur.com/UtGvOzQ.jpeg">
<div class="card-title">Сфинкс</div>
<div class="card-description">Существа с телом льва и головой человека.</div>
</div>
<div class="card" onclick="openOverlay('ur_kas')">
<img class="card-image" src="https://i.imgur.com/jXq2cUm.jpg">
<div class="card-title">Ур-Каc</div>
<div class="card-description">Пожиратель Света, высасывающий магию.</div>
</div>
<div class="card" onclick="openOverlay('sand_guardian')">
<img class="card-image" src="https://i.imgur.com/1QYko26.jpeg">
<div class="card-title">Песчаный хранитель</div>
<div class="card-description">Магически оживлённые статуи, охраняющие места силы.</div>
</div>
</div>
</div>