.box-nav-item-link {
position: absolute;
  z-index:50;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.inner-wrap-box {
margin:0 auto;
  position: relative;
  max-width:1300px
}
.box-nav-item:hover h2 {
  text-decoration: underline ;
}

.box-nav-item:hover .nav-darker {
background-color: rgba(0,0,0,.7) !important
}



.box-nav-item-wrap {
display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2px;
 grid-auto-rows: 1fr;
  max-width:1000px; 
  margin:0 auto;
}
.box-nav-item {
background-color:#000;
  -webkit-transition: background-color 500ms ease-out;
  -moz-transition: background-color 500ms ease-out;
  -o-transition: background-color 500ms ease-out;
  transition: background-color 500ms ease-out;
  padding:1.5em 1em;
  display:grid;
  grid-template-rows: 1fr min-content;
  background-size: cover;
  background-position: center;
  position: relative
}
.box-nav-item  h2 {
color: #fff;
  text-align:center;
  text-transform: uppercase;
  font-size: 1.4rem;
  
    line-height: 1.2em;
  font-weight:400;
  position: relative;
  z-index:2
  
  
}
.arrow-icon i {
font-size: 2rem;
  color:#fff
}

.arrow-icon {position: relative;
  z-index:2}
.box-nav-item:hover {
cursor:pointer;
  background-color: #0057b8
}

@media(max-width:1000px){
.box-nav-item-wrap {
display:grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2px;
}
}

@media(max-width:760px){
.box-nav-item-wrap {
display:grid;
  grid-template-columns: 1fr;
  grid-gap: 2px;
}
  {#.box-nav-wrap {
  display: none
  }#}
}