<style>
  .shops-list {
    display: flex;
    overflow-x: auto;
    gap: 24px;
    background: linear-gradient(1deg, #212129 30%, #292932 100%);
    border-radius: 18px;
    padding: 11px;
    margin-bottom: 24px;
  }

  .shop-item {
    border-radius: 18px;
    flex: 0 0 auto;
    position: relative; /* iconni joylashtirish uchun */
  }

  @media (max-width: 599px) {
    .shop-item {
      flex-basis: 40%;
    }
  }

  .shop-item img {
    width: 100%;
    height: 233px;
    border-radius: 18px;
    transition: 0.3s all;
  }

  .shop-item:hover {
    cursor: pointer;
  }

  /* Hover effekti (o‘zingizda bor edi, qoldirdim) */
  .shop-item.shop-item-vip:hover {
    box-shadow: 0px 0px 15px 14px rgba(0, 41, 255, 0.2);
  }
  .shop-item.shop-item-zombie:hover {
    box-shadow: 0px 0px 15px 14px rgba(94, 255, 0, 0.2);
  }
  .shop-item.shop-item-gun:hover {
    box-shadow: 0px 0px 15px 14px rgba(255, 0, 0, 0.2);
  }
  .shop-item.shop-item-public:hover {
    box-shadow: 0px 0px 15px 14px rgba(251, 0, 255, 0.2);
  }
  .shop-item.shop-item-cases:hover {
    box-shadow: 0px 0px 15px 14px rgba(255, 255, 255, 0.2);
  }

  /* ICONLAR STYLE */
  .shop-item i {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 18px;
    color: #fff;
    border-radius: 8px;
    padding: 6px;
  }

  .shop-item-vip i {
    background: radial-gradient(100% 100% at 50% 0, #3791ff 0, #225ea7 100%);
  }
  .shop-item-zombie i {
    background: radial-gradient(100% 100% at 50% 0, #4cd7a7 0, #237558 100%);
  }
  .shop-item-gun i {
    background: radial-gradient(100% 100% at 50% 0, #ff4949 0, #912d2d 100%);
  }
  .shop-item-public i {
    background: radial-gradient(100% 100% at 50% 0, #ff00ff 0, #770077 100%);
  }
  .shop-item-cases i {
    background: radial-gradient(100% 100% at 50% 0, #ffffff 0, #aaaaaa 100%);
  }
</style>

<div class="shops-list">
  <a href="/store" class="shop-item shop-item-vip">
    <i class="bx bx-cart-alt"></i>
    <img src="/templates/solution2/img/index_vip.png" alt="vip shop banner">
  </a>

  <a href="/shop/product?id=1" class="shop-item shop-item-zombie">
    <i class="bx bx-crosshair"></i>
    <img src="/templates/solution2/img/index_anew.png" alt="ANEW model banner">
  </a>

  <a href="/digital_store?category=3" class="shop-item shop-item-gun">
    <i class="bx bx-bowling-ball"></i>
    <img src="/templates/solution2/img/index_weapons.png" alt="gun shop banner">
  </a>

  <a href="/digital_store" class="shop-item shop-item-public">
    <i class="bx bx-images"></i>
    <img src="/templates/solution2/img/index_model.png" alt="public model banner">
  </a>

  <a href="/cases" class="shop-item shop-item-cases">
    <i class="bx bx-gift"></i>
    <img src="/templates/solution2/img/custom_shop/index_cases.png" alt="cases banner">
  </a>
</div>