#appeal（アピールエリア）に高さが指定されていないからです。
そこに高さを指定すればOKです。
以下のソースはその最低の高さを300pxに設定している例です。

#appeal {
  min-height:300px; /* 最低の高さを300pxに指定 */
}

因みに、autoやパーセントは親要素に対する相対的なサイズです。
親要素に有効なサイズが指定されていないと意図した通りにならないので注意！

迅速な対応ありがとうございます

実際に入力し試したところ、画像のような表示になりました

高さは指定した通り表示されるようになりましたが、左右画像が消えてしまいます。

この表示に対しては横幅(width、min-width:等)を指定することで改善されますか？

CSSでイケるんですけど、コンテンツを先に入れることは可能ですか？

それによって高さを変えてあげないといけないような！？気もします。実際の様子を見ないとわからないんで、多分ですけどね。

最終的にどうなるか分からないだけに、修正を繰り返すとか嫌だな、って思いまして。

コンテンツなしで良い感じですか？？？

気になっても一回見に来たら、問題なさそうかも？しれないですね？

一応CSSは以下です。

あとCocoon設定の高さは指定なしでいける？のであれば、指定なしでいきましょっ！

#appeal,
.appeal .appeal-in {
	min-height: 24vw;
}
@media screen and (min-width: 1267px) {
	#appeal,
	.appeal .appeal-in {
		min-height: 300px;
	}
}
.appeal {
	background-size: contain;
}

投稿者:: かうたっく

#appeal,
.appeal .appeal-in {
	min-height: 24vw;
}
@media screen and (min-width: 1267px) {
	#appeal,
	.appeal .appeal-in {
		min-height: 300px;
	}
}
.appeal {
	background-size: contain;
}

上記csss指定にて望んでいた表示となりました

修正していただきありがとうございました