.posts-list { 
    display: grid; 
    gap: 2rem; 
    grid-template-columns: repeat(2, 1fr);
}

/* Desktop: 3 columns */
@media (min-width: 768px) {
    .posts-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large desktop: 4 columns */
@media (min-width: 992px) {
    .posts-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Extra large: 5 columns */
@media (min-width: 1200px) {
    .posts-list {
        grid-template-columns: repeat(5, 1fr);
    }
}

.post-content { padding-top: 1rem; }

.posts-list .post-preview { margin-top: 0.5rem; margin-bottom: 2rem; color: var(--bs-gray-600); font-size: 0.9rem; line-height: 1.4; max-height: 3.6rem; overflow: hidden; text-overflow: ellipsis; }
.posts-list .post a:link, .posts-list .post a:visited { color: #000; text-decoration: none; }
.posts-list .post a:hover { text-decoration: none; color: var(--edm-color); }

.post-meta {
    font-size: 0.9rem;
    color: var(--bs-gray-600);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.post img {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.thumbnail-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1; /* 4:3 aspect ratio (modern approach) */
    background-color: var(--bs-gray-100); /* Light gray background */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-200); /* Gray color for the icon */
    font-size: 4rem; /* Size of the icon */
    border-radius: 0.375rem; /* Optional: rounded corners */
}