.clubInfoCardComponent {
  --Text-primaryNoneBg: var(--base-black);
  --Surface-bgSecondary15: var(--opacity-15b);
  --Text-prizeHolder: var(--highlight-100);
  --Border-rgb60: var(--highlight-60);
  --Icon-disabled: var(--neutral-800);
}

@media (prefers-color-scheme: dark) {
  .clubInfoCardComponent {
    --Text-primaryNoneBg: var(--base-white);
    --Surface-bgSecondary15: var(--opacity-15w);
    --Text-prizeHolder: var(--highlight-100);
    --Border-rgb60: var(--highlight-60);
    --Icon-disabled: var(--neutral-800);
  }
}

.clubInfoCardComponent {
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem;
}

.clubInfoCardComponent .clubCardContainer {
  padding: 1.25rem 1.75rem;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1.25rem;
  border: min(0.063rem, 1px) solid
    color-mix(in srgb, var(--Border-rgb60) 40%, transparent);
  background-color: var(--Surface-bgSecondary15);
  box-shadow: 0 0 9px 1px
    color-mix(in srgb, var(--Text-primaryNoneBg) 54%, transparent);
}

.clubInfoCardComponent .clubCardContainer .clubImage {
  border: min(0.188rem, 3px) solid var(--Text-prizeHolder);
  border-radius: 1rem;
}

.clubInfoCardComponent .clubName {
  color: var(--Text-primaryNoneBg);
  text-align: center;
}

.clubInfoCardComponent .clubRating  {
    margin: 0.39rem 0;
    display: flex;
    justify-content: center;
  }

.clubInfoCardComponent .clubRating .ratingStar:after {
  font-family: "dr-odds";
  font-size: 0.5rem;
  content: "star";
  text-align: center;
  margin-left: 0.03rem;
  color: var(--Icon-disabled);
}

.clubInfoCardComponent .clubRating .ratingStar.filledStar:after {
    color: var(--Text-prizeHolder);
  }

.clubInfoCardComponent .clubId {
  color: var(--Text-primaryNoneBg);
  text-align: center;
}