.use-blog-post{background-color:var(--color-background);border:1px solid var(--color-border);text-align:var(--text-align,inherit);border-radius:5px;flex-direction:column;transition:all .25s;display:flex;position:relative;overflow:hidden}@media screen and (width>=1025px){.use-blog-post.full{grid-column:1/-1;grid-template-columns:1fr 1fr;align-items:center;gap:10px;display:grid}}.use-blog-post:hover{border-color:var(--color-primary)}.use-blog-post:hover .post-header img{transform:scale(1.08)}.use-blog-post .post-header{aspect-ratio:16/9;line-height:0;position:relative;overflow:hidden}.use-blog-post .post-header img{object-fit:cover;object-position:top;width:100%;height:100%;transition:transform .3s}.use-blog-post .post-body{flex-direction:column;flex-grow:1;padding:20px;display:flex}.use-blog-post .post-body h2.post-title{font-size:22px}@media only screen and (width<=1024px){.use-blog-post .post-body h2.post-title{font-size:20px}}@media only screen and (width<=767px){.use-blog-post .post-body h2.post-title{font-size:18px}}.use-blog-post .post-body .post-link{z-index:2;position:absolute;inset:0}.use-blog-post .post-body .post-meta{align-items:center;gap:.75rem;justify-content:var(--text-align,inherit);display:flex}.use-blog-post .post-body .post-meta .post-badge{background-color:color-mix(in oklab, var(--color-primary) 10%, transparent);border:1px solid color-mix(in oklab, var(--color-primary) 30%, transparent);border-radius:5px;padding:5px 10px;font-size:80%;font-weight:700}.use-blog-post .post-body .post-meta .post-date{font-size:90%}.use-blog-post .post-body .post-title{margin-block:10px}.use-blog-post .post-body .post-description{line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin-block:0;display:-webkit-box;overflow:hidden}.use-blog-post .post-body:has(.post-author) .post-description{margin-bottom:10px}.use-blog-post .post-body .post-author{align-items:center;justify-content:var(--text-align,inherit);gap:5px;margin-top:auto;line-height:0;display:flex}.use-blog-post .post-body .post-author img{object-fit:cover;aspect-ratio:1;border-radius:5px;max-width:30px;margin:5px;transition:transform .25s}.use-blog-post .post-body .post-author .author-name{color:var(--color-text);font-size:90%}
