.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);
    }
}


.posts-list .post { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.post-content { padding: 1.2rem; border: solid 1px var(--bs-gray-300); }

.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;
}

.like-btn {
    color: #000;
    font-size: 0.9rem;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
}

.thumbnail-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3; /* 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 */
}