/* Real artwork, not a monochrome mask. Keep the spoken word as the first child. */
.word-studio-shell .word-with-picture:has(.word-picture-illustration) {
  gap: clamp(24px, 3vw, 40px);
  flex-wrap: wrap;
}
.word-studio-shell .word-picture-illustration {
  display: block;
  width: clamp(144px, 15vw, 192px);
  height: clamp(144px, 15vw, 192px);
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 20px;
  background: white;
  pointer-events: none;
}
.word-studio-shell .word-picture-illustration[hidden] { display: none; }
.word-studio-shell .has-live-feedback .word-picture-illustration,
.word-studio-shell .feedback-view .word-picture-illustration { width: 80px; height: 80px; }
@media (max-width: 780px) {
  .word-studio-shell .word-with-picture:has(.word-picture-illustration) { gap: 20px 24px; }
  .word-studio-shell .word-picture-illustration { width: 112px; height: 112px; border-radius: 14px; }
  .word-studio-shell .has-live-feedback .word-picture-illustration,
  .word-studio-shell .feedback-view .word-picture-illustration { width: 64px; height: 64px; }
}
@media (max-width: 360px) {
  .word-studio-shell .word-picture-illustration { width: 96px; height: 96px; }
}