/* Blog index and posts (/blog/, /en/blog/). Post text uses .prose from site.css. */

.blog-list {
    padding-bottom: 96px
}

.post-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    list-style: none
}

.post-card {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.post-card__series {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent)
}

.post-card h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.25
}

.post-card h2 a {
    color: var(--text);
    text-decoration: none
}

/* the whole card is the link */
.post-card h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px
}

.post-card p {
    color: var(--muted);
    font-size: 15.5px
}

.post-card .page-meta {
    margin-top: auto;
    padding-top: 8px;
    font-size: 12px
}

.post .page-header {
    padding-bottom: 32px
}

@media (max-width: 560px) {
    .post-list {
        grid-template-columns: 1fr
    }
}