.badge {
  display: inline-block;
  width: fit-content;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple);
  background: var(--purple-light);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}
.badge-yellow {
  color: var(--yellow);
  background: rgba(251, 191, 36, .15);
}
.badge-green {
  color: var(--green-dark);
  background: var(--green-light);
}
.badge-orange {
  color: #fff;
  background: var(--orange);
}
@media (max-width: 680px) {
  .badge {
    letter-spacing: .04em;
    line-height: 1.4;
    padding: var(--space-2) var(--space-4);
  }
}
.badge-sm {
  font-size: .72rem;
  letter-spacing: .06em;
  padding: 3px var(--space-3);
  line-height: 1.6;
  white-space: nowrap;
}