.article {
  margin-bottom: var(--gap);
  padding: var(--gap);
  border-radius: var(--border-radius);
  background-color: color-mix(in srgb, var(--main-color), transparent 95%);
}

.article__title {
  margin-top: 0;
}

.soul-gems {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gap) / 2);
}

.soul-gems__item {
  flex: 1 1 auto;
  text-align: center;
  padding: calc(var(--gap) / 2);
  border-radius: var(--border-radius);
  background-color: color-mix(in srgb, var(--main-color), transparent 95%);
}