<!--HTML-->
<div class="cyberpunk-display">
    <div class="cyberpunk-container">

<!-- Cyber Toys Section -->
<div id="cyber-toys">
  <div class="cyber-title">Киберигрушки:</div>
  <div class="cyber-grid">
    <!-- Card 1 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/629438.webp" alt="cyber-toy-1">
      </div>
      <div class="cyber-card-title">Шар 1</div>
    </div>

    <!-- Card 2 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/21322.webp" alt="cyber-toy-2">
      </div>
      <div class="cyber-card-title">Шар 2</div>
    </div>

    <!-- Card 3 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/793443.webp" alt="cyber-toy-3">
      </div>
      <div class="cyber-card-title">Шар 3</div>
    </div>

    <!-- Card 4 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/880561.webp" alt="cyber-toy-4">
      </div>
      <div class="cyber-card-title">Шар 4</div>
    </div>

    <!-- Card 5 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/406707.webp" alt="cyber-toy-5">
      </div>
      <div class="cyber-card-title">Шар 5</div>
    </div>

    <!-- Card 6 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/754796.webp" alt="cyber-toy-6">
      </div>
      <div class="cyber-card-title">Шар 6</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/529505.webp" alt="cyber-toy-7">
      </div>
      <div class="cyber-card-title">Шар 7</div>
    </div>

    <!-- Card 8 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/40022.webp" alt="cyber-toy-8">
      </div>
      <div class="cyber-card-title">Шар 8</div>
    </div>

    <!-- Card 9 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/955053.webp" alt="cyber-toy-9">
      </div>
      <div class="cyber-card-title">Шар 9</div>
    </div>

    <!-- Card 10 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/636071.webp" alt="cyber-toy-10">
      </div>
      <div class="cyber-card-title">Шар 10</div>
    </div>

    <!-- Card 11 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/640147.webp" alt="cyber-toy-11">
      </div>
      <div class="cyber-card-title">Шар 11</div>
    </div>

    <!-- Card 12 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/27745.webp" alt="cyber-toy-12">
      </div>
      <div class="cyber-card-title">Шар 12</div>
    </div>

    <!-- Card 13 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/958430.webp" alt="cyber-toy-13">
      </div>
      <div class="cyber-card-title">Шар 13</div>
    </div>

    <!-- Card 14 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/467899.webp" alt="cyber-toy-14">
      </div>
      <div class="cyber-card-title">Шар 14</div>
    </div>

    <!-- Card 15 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/389246.webp" alt="cyber-toy-15">
      </div>
      <div class="cyber-card-title">Шар 15</div>
    </div>

    <!-- Card 16 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/745679.webp" alt="cyber-toy-16">
      </div>
      <div class="cyber-card-title">Шар 16</div>
    </div>

    <!-- Card 17 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/119644.webp" alt="cyber-toy-17">
      </div>
      <div class="cyber-card-title">Шар 17</div>
    </div>

    <!-- Card 18 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/13807.webp" alt="cyber-toy-18">
      </div>
      <div class="cyber-card-title">Шар 18</div>
    </div>

    <!-- Card 19 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/95737.webp" alt="cyber-toy-19">
      </div>
      <div class="cyber-card-title">Шар 19</div>
    </div>

    <!-- Card 20 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/972087.webp" alt="cyber-toy-20">
      </div>
      <div class="cyber-card-title">Шар </div>
    </div>

    <!-- Card 21 -->
    <div class="cyber-card toy-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/907558.webp" alt="cyber-toy-21">
      </div>
      <div class="cyber-card-title">Шар 21</div>
    </div>

  </div>
</div>

<!-- Cyber Decorations Section -->
<div id="cyber-decor">
  <div class="cyber-title">Украшения для стола и Нибблз:</div>
  <div class="cyber-grid">
    <!-- Card 1 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/314586.webp" alt="champaradise">
      </div>
      <div class="cyber-card-title">Шампарадайс</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Глотни заряд блаженства.</div>
    </div>

    <!-- Card 2 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/191350.webp" alt="сentzon-еotochtin">
      </div>
      <div class="cyber-card-title">Сенцон Тоточтин</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Текила, которой нет равных.</div>
    </div>

    <!-- Card 3 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/857309.webp" alt="ab-synth">
      </div>
      <div class="cyber-card-title">Аб-Синт</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Будь богемой.</div>
    </div>

    <!-- Card 4 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/846521.webp" alt="sake-utagawa">
      </div>
      <div class="cyber-card-title">Сакэ Утагава</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Идеальный подарок себе.</div>
    </div>

    <!-- Card 5 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/149402.webp" alt="romvlvs-gin">
      </div>
      <div class="cyber-card-title">Ромулус Джин</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Сделай глоток престижа.</div>
    </div>

    <!-- Card 6 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/760926.webp" alt="paul-night">
      </div>
      <div class="cyber-card-title">Пол Найт</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Любимый напиток художников и мечтателей.</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/875284.webp" alt="chateau-delen-2012">
      </div>
      <div class="cyber-card-title">Шато Делен 2012</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Всего 200 бутылок. Завладей своей.</div>
    </div>

    <!-- Card 8 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/368756.webp" alt="calavera-feliz">
      </div>
      <div class="cyber-card-title">Калавера Фелиз</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Фиеста? Калавера.</div>
    </div>

    <!-- Card 9 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/988568.webp" alt="baalbek-arak">
      </div>
      <div class="cyber-card-title">Баальбек Арак</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Мы запечатали жар пустынного солнца в бутылки.</div>
    </div>

    <!-- Card 10 -->
    <div class="cyber-card decor-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/716470.webp" alt="armagnac-massy">
      </div>
      <div class="cyber-card-title">Арманьяк Месси</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Не пей - наслаждайся им.</div>
    </div>
  </div>
</div>

<!-- Cyber Gifts Section -->
<div id="cyber-gifts">
  <div class="cyber-title">Формы подарковых коробок:</div>
  <div class="cyber-grid">
    <!-- Card 1 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/882397.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Коробка 1</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Квадратная. Сбалансированная. Классика.</div>
    </div>

    <!-- Card 3 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/192237.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Коробка 2</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Для любителей классики, распробовавших элегантность.</div>
    </div>

    <!-- Card 4 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/799466.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Коробка 3</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Когда выпендреж - ваше все.</div>
    </div>

    <!-- Card 5 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/718754.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Коробка 4</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Форма и содержание - соответствуют друг другу.</div>
    </div>

    <!-- Card 6 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/760043.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Коробка 5</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Да, может быть, не самая аккуратная упаковка, зато от души!</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/977520.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Коробка 6</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Вы можете подарить все, что хотите. Даже головы врагов! Вы... вы же не восприняли это как руководство к действию?</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/764287.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Коробка 7</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Не голова. Или не та. Или не всему.</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/788704.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Коробка 8</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Для ценителей теплоты, уюта, хэндмейда и щепотки любви.</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/596202.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Коробка 9</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Классика, но другая.</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/290411.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Коробка 10</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Когда часы 12 бьют, а ты спешишь на праздник под тикающий таймер.</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/178922.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Коробка 11</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">А это точно подарок??</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/612284.webp" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Коробка 12</div>
      <div class="cyber-expand-indicator"></div>
      <div class="cyber-card-description">Когда размер не имеет значения</div>
    </div>

<!-- Cyber Gifts Section -->
<div id="cyber-gifts">
  <div class="cyber-title">Киберобёртка для подарков:</div>
  <div class="cyber-grid">
    <!-- Card 1 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/331657.png" alt="gift-wrap-1">
      </div>
      <div class="cyber-card-title">Обёртка 1</div>
    </div>

    <!-- Card 2 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/928253.png" alt="gift-wrap-2">
      </div>
      <div class="cyber-card-title">Обёртка 2</div>
    </div>

    <!-- Card 3 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/277088.png" alt="gift-wrap-3">
      </div>
      <div class="cyber-card-title">Обёртка 3</div>
    </div>

    <!-- Card 4 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/231943.png" alt="gift-wrap-4">
      </div>
      <div class="cyber-card-title">Обёртка 4</div>
    </div>

    <!-- Card 5 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/725147.png" alt="gift-wrap-5">
      </div>
      <div class="cyber-card-title">Обёртка 5</div>
    </div>

    <!-- Card 6 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/238980.png" alt="gift-wrap-6">
      </div>
      <div class="cyber-card-title">Обёртка 6</div>
    </div>

    <!-- Card 7 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/10243.png" alt="gift-wrap-7">
      </div>
      <div class="cyber-card-title">Обёртка 7</div>
    </div>

    <!-- Card 8 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/906973.png" alt="gift-wrap-8">
      </div>
      <div class="cyber-card-title">Обёртка 8</div>
    </div>

    <!-- Card 9 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/674472.png" alt="gift-wrap-9">
      </div>
      <div class="cyber-card-title">Обёртка 9</div>
    </div>

    <!-- Card 10 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/203248.png" alt="gift-wrap-10">
      </div>
      <div class="cyber-card-title">Обёртка 10</div>
    </div>

    <!-- Card 11 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/893306.png" alt="gift-wrap-11">
      </div>
      <div class="cyber-card-title">Обёртка 11</div>
    </div>

    <!-- Card 12 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/286136.png" alt="gift-wrap-12">
      </div>
      <div class="cyber-card-title">Обёртка 12</div>
    </div>

    <!-- Card 13 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/614346.png" alt="gift-wrap-13">
      </div>
      <div class="cyber-card-title">Обёртка 13</div>
    </div>

    <!-- Card 14 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/374523.png" alt="gift-wrap-14">
      </div>
      <div class="cyber-card-title">Обёртка 14</div>
    </div>

    <!-- Card 15 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/920551.png" alt="gift-wrap-15">
      </div>
      <div class="cyber-card-title">Обёртка 15</div>
    </div>

    <!-- Card 16 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/142570.png" alt="gift-wrap-16">
      </div>
      <div class="cyber-card-title">Обёртка 16</div>
    </div>

    <!-- Card 17 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/935133.png" alt="gift-wrap-17">
      </div>
      <div class="cyber-card-title">Обёртка 17</div>
    </div>

    <!-- Card 18 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/226506.png" alt="gift-wrap-18">
      </div>
      <div class="cyber-card-title">Обёртка 18</div>
    </div>

    <!-- Card 19 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/46864.png" alt="gift-wrap-19">
      </div>
      <div class="cyber-card-title">Обёртка 19</div>
    </div>

    <!-- Card 20 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/501053.png" alt="gift-wrap-20">
      </div>
      <div class="cyber-card-title">Обёртка 20</div>
    </div>

    <!-- Card 21 -->
    <div class="cyber-card gift-card">
      <div class="cyber-image-wrapper">
        <img src="https://upforme.ru/uploads/001c/98/42/2/742988.png" alt="gift-wrap-21">
      </div>
      <div class="cyber-card-title">Обёртка 21</div>
    </div>

    </div>

  </div>
</div>

<style>
/* ================================================
   Scoped Styles for Cyberpunk Display
=============================================== */
.cyberpunk-display {
  --background-card: rgba(19, 19, 22, 0.9); /* Dark background for cards */
  --background-hover: rgba(32, 32, 45, 0.9); /* Subtle hover background */
  --color-text: #f5f5f5; /* Light text for readability */
  --color-accent: #FFE81F; /* Cyberpunk yellow */
  --color-accent-transparent: rgba(255, 216, 31, 0.5); /* Полупрозрачный желтый */
  --color-hover: #FF007E; /* Hot pink Neomancer */
  --color-border: rgba(255, 248, 31, 0.5); /* Faint yellow border */
  --font-primary: 'Orbitron', monospace;
  --font-title: 'Orbitron', monospace;
  --radius: 10px;
  --spacing-small: 5px;
  --spacing-medium: 10px;
  --spacing-large: 20px;
}

.cyberpunk-display * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cyberpunk-display .cyberpunk-container {
  width: 100%;
  max-width: 1200px;
  margin: var(--spacing-medium) auto;
  padding: var(--spacing-large);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}

/* ================================================
   Section Titles
=============================================== */
.cyberpunk-display .cyber-title {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  color: var(--color-hover);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--spacing-medium);
  border-bottom: 1px solid var(--color-hover);
}

/* ================================================
   Grid Layout
=============================================== */
.cyberpunk-display .cyber-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--spacing-medium);
}

/* ================================================
   Individual Cards
=============================================== */
.cyberpunk-display .cyber-card {
  position: relative;
  width: 120px;
  background: var(--background-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  padding: 1px;
    clip-path: polygon(0% 0%, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%); /* Применяем обрезание УГЛА только к обертке, а не к изображению */
}

/* Image Behavior */
.cyberpunk-display .cyber-image-wrapper {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cyberpunk-display .cyber-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease, z-index 0.3s ease;
  padding: 1px;
}

.cyberpunk-display .cyber-image-wrapper img:hover {
  transform: scale(1.1); /* Enlarges the image */
  filter: saturate(150%) brightness(110%);
  z-index: 10; /* Brings the image to the front */
  box-shadow: 0px 5px 8px -4px rgba(255, 255, 31, 0.8), 
              0px 8px 10px -4px rgba(255, 0, 126, 0.6); /* Подсветка только снизу */
}

/*оквадрачивание обёрток*/
#cyber-gifts .cyber-image-wrapper {
  width: 100%;
  height: 100px; /* Высота картинки равна высоте карточки */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Скрываем части изображения, которые выходят за пределы */
}

#cyber-gifts .cyber-image-wrapper img {
  width: 100%; /* Заполняет всю ширину доступного пространства */
  height: 100%; /* Заполняет всю высоту доступного пространства */
  object-fit: cover; /* Обрезает изображение, чтобы заполнить квадрат, сохраняя пропорции */
  transition: transform 0.3s ease; /* Добавляем плавное увеличение при наведении */
}

#cyber-gifts .cyber-image-wrapper img:hover {
  transform: scale(1.1); /* Увеличиваем изображение при наведении */
}

/* Hover Effect for Card */
.cyberpunk-display .cyber-card:hover {
  background: var(--background-hover);
  box-shadow: 0 0 16px 0 rgba(255, 255, 31, 0.6), 0px 0px 12px 0 var(--color-hover);
  transform: translateY(-3px);
}

/* Text Below Image */
.cyberpunk-display .cyber-card-title {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--color-accent);
  background: rgba(0, 0, 0, 0.8);
  padding: var(--spacing-small);
  /*border-radius: var(--radius-small);*/
  margin-top: var(--spacing-small);
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;

  /* Эффект при наведении мышью на карточку */
  .cyber-card:hover & {
    color: var(--color-hover); /* Меняем цвет текста заголовка на розовый (hover) */
    transition: all 0.3s ease; /* Плавный переход */
  }
}

/* Expand indicator (triangle) */
.cyberpunk-display .cyber-expand-indicator {
  width: 0;
  height: 0;
  margin: 3px auto 3px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-accent); /* Yellow Triangle */
  transition: transform 0.3s ease;
}

/* Initially hide the description text */
.cyberpunk-display .cyber-card-description {
  opacity: 0; /* Скрываем текст */
  max-height: 0; /* Ограничиваем высоту */
  overflow: hidden;
  font-family: var(--font-primary);
  font-size: 10px;
  color: #aaaaaa;
  text-align: left;
  margin: 0 1em 0.25em;
  line-height: 1.4;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Show the description on hover */
.cyberpunk-display .cyber-card:hover .cyber-card-description {
  opacity: 1; /* Показываем текст */
  max-height: 100px; /* Увеличиваем высоту для отображения текста */
}

.cyberpunk-display .cyber-card:hover .cyber-expand-indicator {
  transform: rotate(180deg); /* Flip the triangle to point upwards */
  margin-bottom: var(--spacing-small); /* Add spacing when hovered */
}

/* ================================================
   Responsive Design
=============================================== */
@media (max-width: 768px) {

.cyberpunk-display .cyber-card {
  width: 100px;
}

.cyberpunk-display .cyber-image-wrapper img:hover {
    box-shadow: none;
}

  .cyberpunk-display .cyber-card-title {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
.cyberpunk-display .cyber-card {
  width: 100px;
}

.cyberpunk-display .cyber-image-wrapper img:hover {
    box-shadow: none;
}

  .cyberpunk-display .cyber-card-title {
    font-size: 10px;
  }
}
</style>