#grid {
  width: 75%;
  margin: 50px auto;
  position: relative;
  transition: height 300ms ease-in-out;
  -o-transition: height 300ms ease-in-out;
  -ms-transition: height 300ms ease-in-out;
  -moz-transition: height 300ms ease-in-out;
  -webkit-transition: height 300ms ease-in-out;
}
@media screen and (min-width: 961px) and (max-width: 1250px) {
  #grid {
    width: 85%;
    margin: 25px auto;
  }
}
@media screen and (max-width: 960px) {
  #grid {
    width: 100%;
    margin: 15px auto;
  }
}
#grid .element {
  box-shadow: 0 3px 6px rgba(0,0,0, 0.16), 0 3px 6px rgba(0,0,0, 0.23);
  position: absolute;
  text-align: center;
  transition: top 300ms ease-in-out, left 300ms ease-in-out;
  -o-transition: top 300ms ease-in-out, left 300ms ease-in-out;
  -ms-transition: top 300ms ease-in-out, left 300ms ease-in-out;
  -moz-transition: top 300ms ease-in-out, left 300ms ease-in-out;
  -webkit-transition: top 300ms ease-in-out, left 300ms ease-in-out;
}
#grid .element a {
  display: flex;
  width: 100%;
  height: 100%;
}
#grid .element .content {
  display: block;
  margin: auto;
  color: #545454;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
}
#grid .element p {
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 300;
}
#grid .element span {
  font-style: italic;
  font-size: .9em;
}

.made_by {
  color: #545454;
  font-size: 0.9em;
  font-style: italic;
  font-weight: 300;
  transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
}
.made_by:hover {
  color: #3498db;
}