.cardContainer {
  height: 100%;
  border: 1px solid var(--border-neutral-tertiary);
  border-radius: 16px;
  padding: 2.5rem 2.5rem 1.5rem 2.5rem;
  background-color: var(--bg-surface-default);
  backdrop-filter: blur(10px) !important;
  color: var(--text-neutral-secondary);
  box-shadow: none !important;
}

.cardContainer:hover {
  text-decoration: none;
}

.cardTitle {
  font-size: 1.2rem;
  color: var(--text-neutral-secondary);
}

.cardDescription {
  color: var(--text-neutral-secondary);
}

.cardDescription a, .cardDescription a:hover {
  text-decoration: underline;
}

.icon {
  margin-bottom: 1.5rem;
  max-width: 30px;
  font-size: 25px;
}

.pillsContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.pill {
  border-radius: 1.5rem;
  background: #E5E7EB;
  color: #030711;
  padding: 0rem 0.75rem;
  font-size: 16px;
}

html[data-theme="dark"] .cardTitle {
  color: var(--text-inverse-secondary);
}

html[data-theme="dark"] .cardContainer {
  background-color: var(--bg-surface-inverse);
  border-color: var(--border-inverse-tertiary);
}

html[data-theme="dark"] .cardDescription {
  color: var(--text-inverse-secondary);
}

html[data-theme="dark"] .pill {
  background: #374151;
  color: #fff;
}

.glossaryCard {
  height: 100%;
  margin-bottom: 0 !important;
}
