Box-shadow not working with negative margin

Question

I'm working on a card design that requires a box-shadow on what you might call a "compound shape".

Basically, I've applied the box-shadow to the parent tag and within that tag a I have smaller image with a negative margin that overlaps the top of the parent container.

My goal is to apply the same shadow to both objects so that it look as though though they are one "compound shape". Is there anyway to do this? Here's the approach I've taken so far:

https://jsfiddle.net/e_video/bza0mchc/

HTML:

<section>
   <div>Image</div>
</section>

CSS:

section {
  margin: 95px 20px 20px 20px;
  background-color: #FDFDFD;
  display: inline-block;
  width: 340px;
  height: 400px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35), 0 -1px 2px rgba(0, 0, 0, 0.15);
}

div {
  width: 300px;
  height: 250px;
  margin: -75px auto 0 auto;
  display: block;
  background: salmon;
}

Answer 1

DEMO

we can make a pseudo element and give it shadow and by z-index push it below the section

css to add

div:before {
  content: "";
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35), 0 -1px 2px rgba(0, 0, 0, 0.15);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
}

and position: relative to div so that absolute positioned pseudo element is placed wrt div

div {
  width: 300px;
  height: 250px;
  margin: -75px auto 0 auto;
  display: block;
  background: salmon;
  position:relative /* add this as well */
}