section.featured-categories{
  .cell{
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
    position:relative;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(14,14,14,0.25);
    -moz-box-shadow: 0px 0px 7px 0px rgba(14,14,14,0.25);
    box-shadow: 0px 0px 7px 0px rgba(14,14,14,0.25);
    transition: box-shadow 350ms ease-in-out;
    &:hover{
      -webkit-box-shadow: 0px 0px 11px 0px rgba(14,14,14,0.75);
      -moz-box-shadow: 0px 0px 11px 0px rgba(14,14,14,0.75);
      box-shadow: 0px 0px 11px 0px rgba(14,14,14,0.75);
      z-index:1;
      h4{
        -webkit-box-shadow: 0px 0px 11px 0px rgba(14,14,14,0.5);
        -moz-box-shadow: 0px 0px 11px 0px rgba(14,14,14,0.5);
        box-shadow: 0px 0px 11px 0px rgba(14,14,14,0.5);

        z-index:1;
          background-color:$white;
          color: rgba(14,14,14,.75);
      }
    }
  }
  .cell h4{
    transition: all 1s ease-in-out;
    background-color: rgba(14,14,14,.75);
    width:100%;
    color:$white;
    font-size:85%;
    font-weight: 600;
    letter-spacing: 1px;
    padding:.5rem 0;
    text-transform: uppercase;
    position:absolute;
    top:calc(50% - 1rem);
    -webkit-box-shadow: 0px 0px 7px 0px rgba(14,14,14,0.25);
    -moz-box-shadow: 0px 0px 7px 0px rgba(14,14,14,0.25);
    box-shadow: 0px 0px 7px 0px rgba(14,14,14,0.25);
  }
}
@media screen and (max-width: 40em) {
  section.featured-categories .cell{
  height:7rem;
  h4{
    font-size: 50%;
  }
  }
}

@media screen and (min-width: 40em) {
  section.featured-categories .cell{
    height:50vh;
  }
}