.post-grid{
 display:flex;
 flex-wrap:wrap;
 gap:20px;
}

.post-item{
 width:calc(25% - 15px);
 position:relative;
margin-bottom: 5px;
}

.post-thumbnail-wrap{
 position:relative;
 display:block;
 overflow:hidden;
}

.post-thumbnail-wrap img{
 width:100%;
 display:block;
}

.post-audio-widget{
 position:absolute;
 inset:0;
 display:flex;
 justify-content:center;
 align-items:center;
 z-index:5;
 pointer-events:none;
}

.post-audio-widget .audioplayer,
.post-audio-widget .dzsap-container{
 pointer-events:auto;
}

.post-title{
 position:absolute;
 bottom:0;
 left:0;
 right:0;
 background:rgba(0,0,0,.6);
 color:#fff;
 padding:8px;
 font-size:14px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}

/* ===== Pagination like screenshot ===== */
.pager_wrapper{
 margin:40px 0;
 display:flex;
 justify-content:center;
 align-items:center;
 gap:28px;
 flex-wrap:wrap;
}

.pager_numbers{
 display:inline-flex;
 align-items:center;
 background:#f2f2f2;
 border-radius:6px;
 overflow:hidden;
}

.pager_numbers a,
.pager_numbers span{
 display:inline-block;
 padding:10px 14px;
 line-height:1;
 font-size:16px;
 color:#9a9a9a;
 text-decoration:none !important;
}

.pager_numbers a:hover{
 color:#666;
}

.pager_numbers .current{
 background:#111;
 color:#fff;
}

.pager_numbers .dots{
 color:#9a9a9a;
}

.pager_next{
 font-size:18px;
 color:#666;
 text-decoration:none !important;
 white-space:nowrap;
}

.pager_next:hover{
 color:#333;
}

/* Responsive grid */
@media (max-width:1024px){
 .post-item{ width:calc(33.333% - 14px); }
}
@media (max-width:768px){
 .post-item{ width:calc(50% - 10px); }
}
@media (max-width:480px){
 .post-item{ width:100%; }
}