css - 複数の CSS グラデーション

Question

2 つのグラデーションを作成したい。1 つは高さが 786 ピクセルで、次に高さが 100% のものが続きます。

これが私が試したことです：

.gradient {
   min-height: 100vh;
  background: linear-gradient(#edd9af 0%, #455260 785px) no-repeat border-box, linear-gradient(#c2c2c2 786px, #616161 100%);
}

下のものは効果がないようです。私が見逃しているものについての手がかりはありますか?

jsfiddle の作業: https://jsfiddle.net/8yqdfve2/5/