.stats__wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  width: 100%;
  gap: .5rem;
}

.stats__container {
  display: flex;
  /* background-image: linear-gradient(320deg, color-mix(in srgb, var(--span) 10%, transparent), transparent); */
  border-radius: var(--br-16);
  background-color: var(--card);
  padding: 1rem;
  flex-direction: column;
  overflow: hidden;
  justify-content: center;
  width: 100%;
  align-items: center;
  transition: var(--transition-duration);
  position: relative;
  color: var(--span);
  cursor: pointer;
}

.stats__number,
.stats__new-count span {
  font-family: var(--font-family-1);
  font-size: var(--font-size-xxxl);
  font-weight: var(--font-weight-7);
  color: var(--text-default);
  line-height: normal;
}

.stats__name {
  color: var(--text-custom);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-6);
}

.stats__counter {
  display: flex;
  align-items: center;
  transition: var(--transition-duration);
  color: var(--span);
  position: relative;
  justify-content: center;
  flex-direction: column-reverse;
}

.stats__container svg {
  position: absolute;
  width: 10rem;
  height: 10rem;
  fill: var(--text-secondary);
  opacity: .035;
  transition: var(--transition-duration);
  pointer-events: none;
}

.stats__container.vip .stats__name {
  color: #FFEEC3;
}

.stats__container.vip {
  background-image: linear-gradient(
360deg, color-mix(in srgb, var(--money) 10%, transparent), transparent);
}

.stats__container.vip .stats__number {
  color: var(--money);
}

.stats__container.vip svg {
  fill: var(--money);
}

@media (max-width: 768px) {
  .stats__wrapper {
    flex-direction: column;
  }
}

.stats__new-count {
  display: flex;
  color: var(--text-custom);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-5);
  align-items: center;
  position: absolute;
  inset: 0;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.5rem);
  transition: var(--transition-duration);
}

.stats__container:hover .stats__new-count {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.stats__container:hover .stats__counter {
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
}

.stats__container.vip .stats__new-count {
  color: #FFEEC3;
}

.stats__container.vip .stats__new-count span {
  color: var(--money);
}

.stats__container.vip.skeleton--default::after {
  background: linear-gradient(90deg, rgb(243, 202, 128, 0) 0%, rgb(243, 202, 128, 0.1) 40%, rgb(243, 202, 128, 0.1) 50%, rgb(243, 202, 128, 0) 60%);
}

.stats__container.vip.skeleton--default:hover .stats__new-count,
.stats__container.skeleton--default:hover .stats__new-count {
  opacity: 0;
  visibility: hidden;
}

.stats__container:hover svg {
  opacity: .07;
}