.card-content-text {
  display: block;
}

.card-content-image {
  display: block;
  width: 100%;
  max-width: 520px;
  max-height: min(34vh, 280px);
  margin: 0 auto 14px;
  object-fit: contain;
}

/* Short flashcard text behaves like content written on a fixed paper card. */
.prompt,
.answer {
  text-align: center;
}

/* Fixed, renderer-owned flashcard face. The SVG scales as one unit, so the
   question and notation keep one stable composition. */
.prompt:has(.card-content-face) {
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
}

.card-content-face {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 560px;
  max-height: 320px;
  margin: 0 auto;
}

.card-content-face-divider {
  stroke: #d9dde5;
  stroke-width: 2;
}

.card-content-face-question {
  fill: currentColor;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 28px;
  font-weight: 700;
}

/* Ordinary text questions are intentionally quieter than revealed answers. */
.prompt:not(:has(.card-content-face)) {
  font-size: clamp(1.15rem, 3.4vw, 1.6rem);
}

@media (max-height: 650px) {
  .card-content-image {
    max-height: 210px;
    margin-bottom: 10px;
  }

  .card-content-face {
    max-height: 250px;
  }
}