div.grid {
  display: grid;
  grid-gap: 30px;
  height: 100%;
}

#allcategoriesgrid {
  grid-template: 1fr 1fr / 100%;
}

@media only screen and (min-width: 768px) {
  #allcategoriesgrid {
    grid-template: 100% / 1fr 1fr;
  }
}

#artcategoriesgrid {
  grid-template: 1fr 1fr 1fr 1fr / 100%;
}

@media only screen and (min-width: 768px) {
  #artcategoriesgrid {
    grid-template: 100% / 1fr 1fr 1fr 1fr;
  }
}

#artgrid {
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
}

a {
  height: 100%;
}

div.category {
  border-radius: 0px;
  height: 100%;
  background-size: cover;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-end;
  /*transition: height 0.5s linear 0s;*/
  box-sizing: content-box;
}

div.category:hover {
  outline: solid 3px #3344cf;
  box-shadow: 0px 0px 15px 5px #3344cf, inset 0px 0px 10px 0px #3344cf;
}

.categorylegend {
  margin: 20px;
}