/** * This is file is only for masonry post * * @package Articled * @subpackage Admin * @since Articled 1.0 * */ .posts-masonry{column-count:3;column-gap:14px;padding:0 15px}.posts-masonry article{background-color:rgba(255,255,255,.25);display:inline-block;margin:0 0 1em;width:100%}.post-thumbnail{width:100%;height:auto;margin:0;padding:0;margin-bottom:10px}.blog-type-masonry .wp-playlist{padding:0!important}.post-thumbnail .video-frame{background-color:black}.post-thumbnail img,.post-thumbnail iframe,.wp-playlist video{display:block;width:100%;margin:auto;height:180px!important}.post-thumbnail .wp-playlist-current-item{width:100%}.post-thumbnail .mejs-controls{padding:0}.post-thumbnail .wp-playlist img{width:60px!important;height:60px!important;border-radius:5px!important;min-height:inherit;object-fit:scale-down}.prev-slider,.next-slider{cursor:pointer;position:absolute;top:50%;transform:translateY(-80%);padding:14px;color:white!important;font-weight:700;font-size:18px;background:rgba(0,0,0,.3);margin:0 0}.post-info{width:100%;height:auto;display:block;padding:8px 0}.blog-post-title{font-size:19px;margin-top:0;margin-bottom:2px;letter-spacing:.8px;line-height:inherit}.blog-post-meta{margin-top:10px}.blog-post-meta span,.blog-post-meta .type{padding-right:4px}.blog-post-meta{line-height:1.5}.index-excerpt{border-bottom:1px dotted #ddd;padding-bottom:0;margin-bottom:30px}.blog-post-meta .comments,.blog-post-meta .author,.blog-post-meta .category{display:inline-block}@media (min-width:1281px){.posts-masonry{column-count:4}}@media only screen and (min-width:1024px){.posts-masonry{column-count:3}}@media only screen and (max-width:1023px) and (min-width:768px){.posts-masonry{column-count:3}}@media only screen and (max-width:767px) and (min-width:540px){.posts-masonry{column-count:2}}@media only screen and (max-width:540px){.posts-masonry{column-count:1}.post-thumbnail img,.post-thumbnail iframe,.wp-playlist video{display:block;width:100%;margin:auto;height:200px!important}} /* You can start your css from below */