.blog-post {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 4rem;
}

.blog-post > .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .blog-post > .header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}

.blog-post > .header a {
    color: inherit;
    text-decoration: underline;
}

.blog-post > .header a:hover {
    color: var(--color-text-brand);
    text-decoration: none;
}

.blog-post  h3 {
    color: var(--color-text-secondary);
    margin-top: 0px;
    margin-bottom: 0px;
}

.blog-post .summary {
    color: var(--color-text-secondary);
    margin-top: 0px;
    margin-bottom: 0px;
}

.blog-post .meta {
    color: var(--color-text-tertiary);
}