.view { float: left; overflow: hidden; position: relative; text-align: center; cursor: default; margin-bottom: 2em; } .view .mask,.view .content { width: 350px; height: 260px; position: absolute; overflow: hidden; top: 0; left: 4%; } .view img { display: block; position: relative; } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 60px 0 0 0; } .view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center; } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; } .view a.info: hover { -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } @media(max-width:1024px){ .view .mask, .view .content { width: 283px; height: 205px; left: 5%; } .view h2 { margin: 35px 0 0 0; } .view{ float:left; width:33.33%; } } @media(max-width:768px){ .view .mask, .view .content { width: 230px; height: 166px; left: 2%; } .view h2 { margin: 15px 0 0 0; } .view h2 { font-size: 13px; padding: 7px; } span.gall { font-size: 0.9em; } .view { padding: 0 5px; margin-bottom:10px; } } @media(max-width:640px){ .view .mask, .view .content { width: 188px; height: 136px; } .view h2 { font-size: 11px; padding: 7px; margin: 8px 0 0 0; } .view p { font-size: 12px; padding: 2px 6px 7px; } span.gall { font-size: 0.75em; padding: 0.3em 1em; } } @media(max-width:480px){ .view { width: 50%; } .view .mask, .view .content { width: 207px; height: 149px; } .view h2 { margin: 24px 0 0 0; } } @media(max-width:320px){ .view h2 { margin: 40px 0 0 0; } .view .mask, .view .content { width: 127px; height: 91px; } .view h2 { margin: 4px 0 0 0; } .view { width: 100%; } .view .mask, .view .content { width:263px; height: 190px; } .view h2 { margin: 5em 0 0 0; } }