@font-face {
    font-family: 'SVN-GangOfThree'; /*a name to be used later*/
    src: url('fonts/svn-gang of three.otf'); /*URL to font*/
}
	 
	 .rewards {
        padding: 1rem;
        color: white;
        background: transparent;
        border-radius: 12px;
        min-height: 6rem;
		max-height: 28vh;
		overflow: scroll;
		font-family: SVN-GangOfThree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      }

      .rewards__container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.rewards__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
/*   min-width: calc(50% - 0.75rem); Ensures 2 items per row with gap */
  width: 100%;
  flex: 1;
}
/* .rewards__item:nth-child(even) {
  justify-content: flex-end;
} */
.rewards__item-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.rewards__item-text {
  font-size: 1.125rem;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

.rewards__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.rewards__title {
  font-weight: 500;
  font-size: 1rem;
  color: #fff;
}

.rewards__total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
}

.rewards__total-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.rewards__total-amount {
  font-weight: 600;
  font-size: 0.875rem;
}