.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tags > .award {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem 0.25rem 0.375rem;
  background: #da8e24;
  border-radius: 5rem;
  cursor: pointer;
  transition: background 100ms, box-shadow 100ms;
  color: white;
  font-weight: 500;
}
.tags > .award > ion-icon {
  font-size: 1.125em;
}
.tags > .award[data-active="true"] {
  background: #feb54f;
  box-shadow: 0 0 1rem #da8e24;
}


.tags > .tag {
  padding: 0.25rem 0.5rem;
  background: var(--bg-3);
  border-radius: 5rem;
  cursor: pointer;
  transition: background 100ms;
}
.tags > .tag:hover {background: var(--bg-4)}
.tags > .tag[data-active="true"] {background: var(--bg-5)}

.tags > .award > .icon-notActive {display: inline-block; --ionicon-stroke-width: 48px;}
.tags > .award[data-active="true"] > .icon-notActive {display: none;}

.tags > .award > .icon-active {display: none;}
.tags > .award[data-active="true"] > .icon-active {display: inline-block;}