.border-box{ box-sizing:border-box;-moz-box-sizing:border-box}body{ background:#111111 !important}#works{ display:grid;grid-template-columns:repeat(4,25%)}#works .work{ overflow:hidden;position:relative}#works .work .overlay{ position:absolute;z-index:10;width:100%;height:100%;text-align:center;background:rgba(0,0,0,0.2);transition:all .25s ease-out;-webkit-transition:all .25s ease-out}#works .work .overlay:hover{ background:rgba(0,0,0,0)}#works .work .overlay .inner{ position:relative;height:100%}#works .work .overlay .inner .title{ position:absolute;right:0px;bottom:0px;padding:1.4rem;font-size:1.4rem;text-transform:uppercase;color:#fff;background:rgba(0,0,0,0.5);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";transition:all .25s ease-out;-webkit-transition:all .25s ease-out}#works .work .overlay .inner:hover .title{ opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";background:rgba(0,0,0,0.75)}#works .work img{ width:100%}@media(max-width:1200px){ #works{ grid-template-columns:repeat(3,33.33333333%)}}@media(max-width:800px){ #works{ grid-template-columns:repeat(2,50%)}}@media(max-width:480px){ #works{ grid-template-columns:repeat(1,100%)}#works .work .overlay .inner .title{ opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"}}