/*
 * Plugin Name: Category Posts Grid
 * Description: Styling for the category posts grid.
 */

.cpg-grid {
    display: grid;
    gap: 20px; /* Adjust as needed */
}

/* Grid widths */
.cpg-grid-1 { grid-template-columns: repeat(1, 1fr); }
.cpg-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cpg-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cpg-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cpg-grid-5 { grid-template-columns: repeat(5, 1fr); }
.cpg-grid-6 { grid-template-columns: repeat(6, 1fr); }
/* Add more as needed for wider grids */

.cpg-grid-item {
    border: 1px solid #eee;
    padding: 15px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cpg-post-thumbnail img {
    max-width: 100px;
    max-height: 100px;
    height: auto;
    width: auto;
    display: block; /* Remove extra space below image */
    margin: 0 auto 10px auto; /* Center image and add bottom margin */
    object-fit: cover; /* Ensures image covers the area without distortion */
}

.cpg-post-title {
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 5px;
}

.cpg-post-title a {
    font-size: 0.5em;
    text-decoration: none;
    color: inherit;
}

/*
Add Parent Selectors to increase specificity
This is the cleanest and most robust way to increase specificity. 
Look at the HTML structure surrounding your .cpg-post-description. 
The shortcode renders the content inside .cpg-grid and .cpg-grid-item. You can leverage these.
*/
.cpg-grid .cpg-grid-item .cpg-post-description {
    font-size: 0.8em; /* Or 0.7em, etc. */
    color: #555;
    line-height: 1.4;
    margin-bottom: 0;
}