.blog-listing{ } .blog-listing .blog-listing-item{ width:25%; float:left; position:relative; } .blog-listing .blog-listing-item .inner{ padding:4px; } .blog-listing .blog-listing-item .inner .inner2{ padding-bottom:24px; text-align:center } .blog-listing .blog-listing-item a{ font-size:0; line-height:0; text-decoration:none; } .blog-listing .blog-listing-item a:hover{ text-decoration:underline; } .blitm-img-container{ display:block; line-height:0; position:relative; padding-top:100%; overflow:hidden; } .blitm-img-container img{ position:absolute; width:100%; font-size:0; line-height:0; top:0; left:0; -webkit-transition:all 400ms ease; -moz-transition:all 400ms ease; -ms-transition:all 400ms ease; -o-transition:all 400ms ease; transition:all 400ms ease; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } .blitm-img-container img:hover { } .blitm-date{ padding:10px 10px 0; color:#242424; font-size:13px; line-height:13px; display:block; position:relative; top:5px; } .blitm-title{ display:block; padding:10px 10px; color:#242424; font-size:18px; line-height:23px; font-weight:600; overflow:hidden; text-overflow:ellipsis; text-decoration:none; white-space:nowrap; margin:0; height:23px; } .blitm-title span{ } .blog-listing .blog-listing-item .blitm-description{ display:block; margin:10px; color:#242424; font-size:13px; line-height:17px; height:34px; overflow:hidden; } .blog-listing .blog-listing-item .blitm-read-more{ padding:0px 10px; padding-bottom:20px; display:inline-block; font-size:13px; color:#242424; } .blog-listing .blog-listing-item .blitm-read-more:hover{ text-decoration:underline; } @media only screen and (max-width:320px) { .blog-listing .blog-listing-item{ width:100%; } } @media only screen and (max-width:480px) { .blog-listing .blog-listing-item{ width:100%; } } @media only screen and (min-width:481px) and (max-width:767px) { .blog-listing .blog-listing-item{ width:50%; } } @media only screen and (min-width:768px) and (max-width:991px) { .blog-listing .blog-listing-item{ width:33%; } } @media only screen and (min-width:992px) { .blog-listing .blog-listing-item{ width:25%; } }