.tags {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

.tag {
  color: var(--color-secondary);
  font-size: var(--font-size-small);
  padding: 0.1rem 1.2rem 0.1rem 1.2rem;
  margin-left: calc(var(--spacer) / 8);
  margin-right: calc(var(--spacer) / 8);
  margin-bottom: calc(var(--spacer) / 4);
  text-align: center;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tag:hover:not(span),
.tag:focus:not(span) {
  color: var(--color-primary);
}

.more {
  font-size: var(--font-size-mini);
  margin-left: calc(var(--spacer) / 8);
}
