I've been all over this site for some solutions to my issue but nothing has seemed to work.
Referring to [This JSFiddle](https://jsfiddle.net/jafle20/h5pq20gr/4/) I'm trying to get internal drop shadows surrounding the top and bottom of the dark grey div. I've tried changing from flex to relative positions, z-index, order, various overflow options and drop shadow filters.

```
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="Bespoke">
    </head>
    <body>

<div class="grid">

<!-------- Row 1 ---------->

          <header>
          </header>

<!-------- Row 2 ---------->

           <article>
           </article>

<!-------- Row 3 ---------->   

           <blank>
           </blank>

<!-------- Row 4 ----------> 

           <subtitle>
           </subtitle>

<!-------- Row 5 ---------->   

           <blank2 class>
           </blank2>

<!-------- Row 5 ---------->   

           <footer>
           </footer>

</div>
    </body>
</html>

```

```
.grid {
    display: grid;
    grid-template-columns:auto;
    grid-gap: 0em;
    width: 100vw;
    height: 10vw;
}

}

@media all and (max-width: 100vw) {
  aside,
  article {

  }
}

body {
    margin: 0 auto;
    max-width: 100vw;
    background-image: url("https://cff2.earth.com/uploads/2019/08/15135811/Microplastics-are-raining-down-on-the-Rocky-Mountains-730x410.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: white;

}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
    text-align: center;
    background: rgba(175, 165, 255, 0);
}

article {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30vh;
    text-align: center;
    background: rgba(0, 0, 0, 0);

}

blank {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
    text-align: center;
    background: rgba(205, 225, 105, 0);
    box-shadow(10px 10px 30px #000000);    
    z-index: 10;
}

subtitle {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
    text-align: center;
    background-color: #1e1e1e;
    font-size: max(7vw, 20px);
    box-shadow(-10px -10px 30px #000000);         
    z-index: 9;

}

blank2 {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
    text-align: center;
    background-color: #fffff7;
    z-index: 8;

}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 7vh;
    text-align: center;
    background-color: #fffff7;

}

```