.spec-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-media);
  background: var(--color-surface);
}

.spec-card__source {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: 600;
  font-variation-settings: "FLAR" 50;
  line-height: var(--line-height-h4);
  text-wrap: balance;
}

.spec-card__quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  font-size: var(--font-size-body-case);
  line-height: var(--line-height-body-case);
}

@media (width < 768px) {
  .spec-card,
  .spec-card__quote {
    gap: var(--space-12);
  }

  .spec-card__quote {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }
}

.spec-card__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  font-size: var(--font-size-body-case);
  line-height: var(--line-height-body-case);
}

.spec-card__row p {
  margin: 0;
}

.spec-card__id {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--font-size-ui);
  font-weight: 500;
  line-height: var(--line-height-ui);
}

.spec-card__row--removed {
  color: var(--color-text-secondary);
}

@media (width < 768px) {
  .spec-card__row {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }
}