.grid-area{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:2em;max-width:1200px;margin:0 auto}.grid-item{display:flex;position:relative;overflow:hidden}.item-pic{height:15em;width:100%;background:center no-repeat;background-size:cover;border-bottom:.25em #de373b solid}.item-desc{position:absolute;height:25em;padding:0 2em 2.5em 2em;font-family:roboto;background-color:#444;color:#e2ac3a;transition:.2s ease-in-out;top:192px;transition:all .2s ease-in-out .2s;-webkit-transition:all .2s ease-in-out .2s;-moz-transition:all .2s ease-in-out .2s;-o-transition:all .2s ease-in-out .2s}.grid-item:hover .item-desc{height:25em;position:absolute;width:386px;cursor:pointer;transition:all .2s ease-in-out .2s;-webkit-transition:all .2s ease-in-out .2s;-moz-transition:all .2s ease-in-out .2s;-o-transition:all .2s ease-in-out .2s;top:0}.item-desc p{font-size:16px}.item-desc h2{font-size:17px}.item-desc a{position:absolute;left:2em;color:white;padding:.5em 1em;background:#9c9c9c;border:white solid .5px;text-decoration:none;text-transform:uppercase;letter-spacing:3px;font-weight:lighter;transition:.15s background ease-out}.item-desc a:hover{color:white;background-color:#444}@media screen and (max-width:980px){.grid-area{grid-template-columns:1fr 1fr}}@media screen and (max-width:700px){.grid-area{grid-template-columns:1fr}.item-desc{top:192px}}