you can set many shadows on a single element. if increase offset and set negative spread radius, you can draw 2 shadows for your expected result.
see https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
possible example, use your size and own values for your shadow(s)
div {
aspect-ratio: 16/9;
background: #377172;
width: 90vmin;
box-shadow: 0 15vmin 0 -8vmin #CCD5CB, 0 -15vmin 0 -8vmin #CCD5CB
}
/* demo purpose */
html {
display: grid;
min-height: 100vh;
place-items: center
}
div {
color: white;
font-size: 10vmin;
display: grid;
place-items: center
}
<div>div & 2 shadows</div>
clip-path could also be an option
div {
aspect-ratio: 16/9;
background: #377172;
width: 90vmin;
box-shadow: 0 0 0 8vmin #CCD5CB;
clip-path: polygon(0 0, 8vmin 0, 8vmin -8vmin, calc(100% - 8vmin) -8vmin, calc(100% - 8vmin) 0, 100% 0, 100% 100%, calc(100% - 8vmin) 100%, calc(100% - 8vmin) calc(100% + 8vmin), 8vmin calc(100% + 8vmin), 8vmin 100%, 0% 100%);
}
/* demo purpose */
html {
display: grid;
min-height: 100vh;
place-items: center;
/* gives a shadow to the div and its shadow
filter:drop-shadow(0 0 5px red);
... for infos only not needed */
}
div {
color: white;
font-size: 10vmin;
display: grid;
place-items: center
}
<div>div & 1 shadow</div>