.beautiful-posts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers items horizontally, including in incomplete rows */
    gap: 20px;
    max-width: 1200px; /* Optional: Set a max-width to prevent ultra-wide grids on large screens; adjust as needed */
    margin: 0 auto; /* Centers the entire grid container horizontally on the page */
    width: 100%;
}

.beautiful-post-item {
    background: #fff;
    border: 1px solid #2C3E2CCC; /* Updated border color with alpha */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    min-width: 0 !important; /* prevents image from expanding container */
}

.beautiful-post-image {
    position: relative;
    width: 100% !important; 
    overflow: hidden !important; 
}

.beautiful-post-image img {
    width: 100%;
    height: auto; 
    display: block;
    object-fit: contain !important; 
    object-position: center !important; 
    image-rendering: auto; /* Helps with sharpness on scaling */
}

.beautiful-post-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2C3E2CCC;
    opacity: 0.5 !important; /* Adjust for filter strength */
    transition: opacity 0.3s;
}

.beautiful-post-image:hover .beautiful-post-overlay {
    opacity: 0.1 !important;
}

.beautiful-post-info {
    padding: 15px;
}

.beautiful-post-title {
    font-size: 1.2em;
    margin: 0 0 10px;
    color: #2C3E2C !important;
    font-family: "Averia Serif Libre";
}

.beautiful-post-title a {
    color: #2C3E2C !important;
}

.beautiful-post-excerpt {
    font-size: 0.9em;
    margin: 1em !important;
    font-family: "Verdana";
}

.beautiful-post-author {
    font-style: italic;
    margin: 0 0 5px;
    color: #0275BD;
    font-family: "Verdana";
}

.beautiful-post-date {
    font-size: 0.8em;
    color: #666;
    margin: 0 0 10px;
    font-family: "Verdana";
}

.beautiful-post-readmore {
    display: inline-block;
    padding: 1em !important;
    background: #FFFFFF !important;
    color: #2C3E2C !important;
    text-decoration: none;
    border-style:solid;
    border-width:1px;
    border-color:#2C3E2C !important;
    border-radius: 4px;
    font-family: "Verdana"!important;
    margin-top:1em !important;
}

/* Column width classes (for desktop; avoids custom properties) */
@media (min-width: 769px) { /* Outside mobile breakpoint */
    .beautiful-posts-grid.columns-1 .beautiful-post-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .beautiful-posts-grid.columns-2 .beautiful-post-item {
        flex: 0 0 calc( (100% - 20px) / 2 );
        max-width: calc( (100% - 20px) / 2 );
    }

    .beautiful-posts-grid.columns-3 .beautiful-post-item {
        flex: 0 0 calc( (100% - 40px) / 3 );
        max-width: calc( (100% - 40px) / 3 );
    }

    .beautiful-posts-grid.columns-4 .beautiful-post-item {
        flex: 0 0 calc( (100% - 60px) / 4 );
        max-width: calc( (100% - 60px) / 4 );
    }

    .beautiful-posts-grid.columns-5 .beautiful-post-item {
        flex: 0 0 calc( (100% - 80px) / 5 );
        max-width: calc( (100% - 80px) / 5 );
    }

    .beautiful-posts-grid.columns-6 .beautiful-post-item {
        flex: 0 0 calc( (100% - 100px) / 6 );
        max-width: calc( (100% - 100px) / 6 );
    }
}

/* Responsive adjustments */
@media (max-width: 768px) { /* Adjust breakpoint as needed for your mobile definition */
    .beautiful-post-item {
        flex: 0 0 100%; /* Full width on mobile */
        max-width: 100%;
    }
}