/* .cpm-grid { display: flex; flex-wrap: wrap; gap: 20px; } */
.cpm-post { padding: 10px; width: 200px; }
.cpm-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; }
.modal-content { background: #fff; margin: 50px auto; padding: 20px; width: 80%; position: relative; max-height: 90vh; overflow-y: auto; }
.cpm-close
 {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    z-index: 1001;
    background: #f38120;
    border: 1px solid #f38120;
    color: #fff;
    right: 30px;
}
.cpm-modal {
    z-index: 1111;
}


.cpm-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -15px; /* offset child padding */
  box-sizing: border-box;
}

.cpm-grid .cpm-post {
  padding: 15px;
  box-sizing: border-box;
  width: 25%; /* 4 per row */
}

@media (max-width: 1024px) {
  .cpm-grid .cpm-post {
    width: 33.3333%; /* 3 per row on tablets */
  }
}

@media (max-width: 768px) {
  .cpm-grid .cpm-post {
    width: 50%; /* 2 per row on small tablets/large phones */
  }
	.cpm-grid{padding: 14px;}
}

@media (max-width: 480px) {
  .cpm-grid .cpm-post {
    width: 100%; /* 1 per row on phones */
  }
}
.cpm-post h3 a {
    color: #333;
    font-size: 17px;
    font-weight: 600;
    display: block;
    text-align: left;
	margin-top:10px;
}
.cpm-post .cpm-role {
    text-align: left;
    font-weight: 400;
    font-size: 14px!important;
    color: #999;
}
.cpm-post h3 {
    margin: 0;
}
.cpm-post img {
    border-radius: 5px !important;
    height: 330px !important;
    object-fit: cover;
    width: 100%;
}
.cpm-view-btn .ribon_badge {
    display: inline-block;
    margin: 0 5px;
}
.cpm-post .cpm-year {
    text-align: left;
    text-align: left;
    font-weight: 400;
    font-size: 14px!important;
    color: #999;
}
/* Mobile styles */