@layer ds.block {
    .block-blog-post-hero { position: relative; overflow: clip; border-bottom: 1px solid var(--color-border); }

    .blog-post-hero__motif { position: absolute; right: 8%; bottom: calc(-1 * var(--space-4)); width: 8rem; opacity: 0.3; color: var(--brand-sage); }

    .blog-post-hero__inner { position: relative; display: flex; flex-direction: column; gap: var(--space-4); }

    .blog-post-hero__back { align-self: flex-start; color: var(--color-secondary); text-decoration: none; font-size: var(--text-small); font-weight: var(--font-weight-medium); }
    .blog-post-hero__back:hover { color: var(--color-primary); }

    .blog-post-hero__meta { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-xs); }

    .blog-post-hero__category { font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-primary); }

    .blog-post-hero__readtime { color: var(--color-text-muted); }

    .blog-post-hero__title { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-medium); font-size: var(--text-h1); line-height: 1.1; color: var(--color-heading); }

    .blog-post-hero__byline { margin: 0; font-size: var(--text-small); color: var(--color-text-muted); }
}