#tiles{width:100%;margin-bottom:20px;display:inline-block}#tiles .tile{position:relative;float:left;margin:0;overflow:hidden}@media screen and (max-width:600px){#tiles .tile{width:calc(100%/2);padding-bottom:calc(100%/2)}}@media screen and (min-width:600px) and (max-width:900px){#tiles .tile{width:calc(100%/3);padding-bottom:calc(100%/3)}}@media screen and (min-width:900px){#tiles .tile{width:calc(100%/4);padding-bottom:calc(100%/4)}}#tiles .tile #inner{position:absolute;top:8%;left:8%;width:84%;height:84%;background-color:#eee}@media(min-width:500px){#tiles .tile #inner{box-shadow:0;transition:transform .1s,box-shadow .1s;transform:none;transition-timing-function:ease-in}#tiles .tile #inner:hover{transition-timing-function:ease-out;box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.3);transform:scale(1.05)}#tiles .tile #inner:hover:active{transition-duration:.05s;transform:scale(1.02);box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3)}#tiles .tile #inner:hover #image #animated{display:block}}@media(max-width:500px){#tiles .tile #inner:active #image #animated{display:block}}#tiles .tile #inner #image{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;transition:opacity .2s}#tiles .tile #inner #image img{width:100%;height:100%;top:0;left:0;position:absolute}#tiles .tile #inner #image #animated{display:none}#tiles .tile #inner #image.loaded{opacity:1}#tiles .tile #inner a{z-index:1000;width:100%;height:100%;top:0;left:0;position:absolute}#tiles .tile #title{position:absolute;text-transform:uppercase;bottom:0;left:8%;color:#000;font-size:12px;font-family:monospace}