Anki2 CSS: скрываемые "пустые поля", завернутые в красивые коробки

Question

Итак, у меня есть 3 поля для ответов на обороте моих закрытых карточек: "Глагол", "Dativ" и "Akkusativ". Я настроил CSS и все поля внутри коробки, используя тег div. С каждой картой идет глагол с Dativ или Akkusativ. Так, например, поля Verb и Akkusativ имеют входные данные, а поле Dativ остается пустым.

Мне нужно знать, есть ли способ скрыть поле без каких-либо записей, иначе пустое поле, заключенное в коробку. Я уже пробовал псевдо-селекторы ": empty" и ": blank", но они скрывали и отображали оба поля соответственно, независимо от того, являются ли они пустыми или содержат текст, img и т. Д.

Снимок экрана: https://ibb.co/jLtvvw Полный код: https://uploadfiles.io/zpeq8

Вот CSS и HTML для коробок: Css:

.box2 {
  position: relative;
  width: 60%;
  background: #f4bf42;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
font-size: 25px;
font-weight: bold;
color: #6d4500;
 text-shadow: 0px 1px 0px rgba(255,255,255,.5);
  line-height: 1.5;
  margin: 10px auto;
  overflow: hidden;
-webkit-box-shadow: 0px 8px 9px 0px rgba(0,0,0,0.3); 
box-shadow: 0px 8px 9px 0px rgba(0,0,0,0.3);
   font-family: arialblack;
}

.box3 {
  position: relative;
  width: 60%;
  background: #5ec9ff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
font-size: 25px;
font-weight: bold;
color: #005b89;
 text-shadow: 0px 1px 0px rgba(255,255,255,.5);
  line-height: 1.5;
  margin: 10px auto;
  overflow: hidden;
-webkit-box-shadow: 0px 8px 9px 0px rgba(0,0,0,0.3); 
box-shadow: 0px 8px 9px 0px rgba(0,0,0,0.3);
   font-family: arialblack;
}

Задний шаблон:

<div class="box2">
{{Dativ}}
</div>

<div class="box3">
{{Akkusativ}}
</div>