Как сверстать такую тень у блока?

.box h3{ 
    text-align:center; 
    position:relative; 
    top:80px; 
} 
.box { 
    width:70%; 
    height:200px; 
    background:#FFF; 
    margin:40px auto; 
} 
.effect 
{ 
  position: relative; 
  background: url('https://cdn-images-1.medium.com/max/1200/1*mONNI1lG9VuiqovpnYqicA.jpeg'); 
  background-size: cover; 
} 
.effect:before, .effect:after 
{ 
  z-index: -1; 
  position: absolute; 
  content: ""; 
  bottom: 15px; 
  left: 10px; 
  width: 50%; 
  top: 80%; 
  max-width:300px; 
  background: #777; 
  -webkit-box-shadow: 0 15px 10px #777; 
  -moz-box-shadow: 0 15px 10px #777; 
  box-shadow: 0 15px 10px #777; 
  -webkit-transform: rotate(-3deg); 
  -moz-transform: rotate(-3deg); 
  -o-transform: rotate(-3deg); 
  -ms-transform: rotate(-3deg); 
  transform: rotate(-3deg); 
} 
.effect:after 
{ 
  -webkit-transform: rotate(3deg); 
  -moz-transform: rotate(3deg); 
  -o-transform: rotate(3deg); 
  -ms-transform: rotate(3deg); 
  transform: rotate(3deg); 
  right: 10px; 
  left: auto; 
}

<div class="box effect"> 
</div>