#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;
  }