@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/MaterialSymbolsRounded-opsz24-wght300-FILL0-GRAD0.woff2') format('woff2');
  font-display: block;
}

.material-symbols-outlined,
.material-symbols-rounded,
.material-icons,
.icon-regular {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-weight: 300;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  font-size: 24px;
}

.icon-regular {
  font-size: 20px;
}

.material-symbols-rounded.filled,
.icon-regular.filled {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-rounded.size-16,
.icon-regular.size-16 {
  font-size: 16px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.material-symbols-rounded.size-20,
.icon-regular.size-20 {
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.material-symbols-rounded.size-24,
.icon-regular.size-24 {
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-rounded.size-32,
.icon-regular.size-32 {
  font-size: 32px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40;
}

.material-symbols-rounded.size-40,
.icon-regular.size-40 {
  font-size: 40px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40;
}

/* Tier badge: 1/2/3 "Lightbulb 2" icons */
.tier-bulb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.tier-bulb__icons {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}