img.img-fluid.z-depth-1 {
    cursor: pointer;
    width: 490px;
    padding-left: 2px;
    margin-bottom: 20px;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 3.9px 8px 4.9px 0px #aaa;
    background: #eee;
}


.image-box {
  /* Here's the trick */
  box-shadow: inset 0 0 0 100vw rgba(0,0,0,0.5);

  /* Basic background styles */
  background: var(--image-url) center center;
  background-size: cover;

  /* Here's the same styles we applied to our content-div earlier */
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Add a transition, just for fun */
  transition: box-shadow .3s ease-out;
}
.image-box:hover {

    box-shadow: inset 0 0 0 100vw rgba(0,0,0,0.2);
}


.myrow.personal {
    padding-bottom: 280px;
    text-align: center;
}