.posts { display: grid; grid-gap: 1rem; grid-template-columns: 1fr 1fr 1fr; } @media(max-width: 1024px) { .posts { grid-template-columns: 1fr 1fr; } } @media(max-width: 640px) { .posts { grid-template-columns: 100%; } } .post-card { display: flex; flex-direction: column; gap: 1rem; padding: 8px; background-color: var(--bg-color-secondary); box-shadow: 2px 2px 4px var(--shadow-color); justify-content: space-between; transition: background-color 0.3s; } .post-card h2 { margin-top: 0; margin-bottom: 0rem; } .post-card .title-text { margin-top: 1rem; } .post-card .excerpt { flex-grow: 1; } .post-metadata { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 1rem 2rem; } .post-metadata .tag, .post-metadata .serie { border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--bg-color-secondary); padding: 0 0.25rem; transition: background-color 0.3s, border-color 0.3s; white-space: nowrap; } .post-metadata svg.icon { margin-right: 0.25rem; }