.wrapper{
  display:grid;
  grid-template-columns: repeat(3, 3fr);
  grid-gap: 5px;
  column-count: 3;
  grid-template-areas:
  "hd"
  "hero  "
  "casestudies"
  "contact"
  "ft";
}
.casestudies {
  align-items: stretch;
  display:grid;
  grid-area: casestudies;
  grid-template-columns: repeat(3, 3fr);
  grid-gap: 5px;
  column-count: 3;
}
@media (max-width: 576px){
  .wrapper,
  .casestudies {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2px;
}
}
.content{
  position:relative;
}
.content .content-overlay {
  background: rgba(0,0,0,0.8);
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 1;
  margin:0;
  padding:0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  background: rgba(0,0,0,0.6);
  /*opacity: 0;*/
  cursor:pointer;
}

.content-image{
  width: 100%;
  /*max-height:300px;*/
  height:300px;
}

.content-details {
  position: absolute;
  width: 100%;
  left: 0;
  top: 20%;
  opacity: 1;
  margin:0;
  padding:5px;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
  
}

.content:hover .content-details{
  opacity: 1;
}

.content-details h2{
  color: #F4FAFF;
  font-size:24px;
  font-weight: 100;
  margin-bottom: 0.5rem;
}

.content-details p{
  color: #F4FAFF;
  font-size: 12px;
}
.content:hover h2,
.content:hover p{
  color:var(--default-color);	
}