.main{
  grid-template:
         'navbar navbar navbar navbar' auto
         'hero hero hero hero' minmax(600px,2.5fr)
         '. video video .' auto
         'footer footer footer footer' 1fr / 20px 4fr 1.5fr 20px;
}

.hero {
    grid-area: hero;
}

.hero-content {
    position: relative;
    height: 100%;
    z-index: 0;
}

#homepage-container{
  display: inline-grid;
  grid-column-gap: 5%;
  width: 100%;
  grid-template-columns: 30% 30% 30%;
  margin-top:6rem;
}

#homepage-container > div{
  text-align: center;
  height: 60vh;
  position: relative;
  background-size: cover;
  background-position: center center;
  cursor: pointer;
}

#homepage-container > div > span{
  position: absolute;
  bottom:0px;
  left:0px;
  width: 100%;
  background:#36b39fbf;
  font-size: 1.4rem;
  color:white;
  font-weight: bold;
  padding:15px 0;
}

@media screen and (max-width:991px){
  #homepage-container{
    grid-column-gap: 0%;
    grid-template-columns: 100%;
  }

  #homepage-container > div{
    margin-bottom:20px;
  }
}