@layer ds.block {
    .blog-teaser-grid__head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--space-6);
        margin-bottom: var(--space-7);
    }

    .blog-teaser-grid__title { margin: 0; font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--font-weight-medium); color: var(--color-heading); }

    .blog-teaser-grid__all {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        white-space: nowrap;
        color: var(--color-heading);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-small);
    }

    .blog-teaser-grid__all-hit { position: absolute; inset: 0; color: transparent; text-decoration: none; }

    .blog-teaser-grid__all:hover { color: var(--color-primary); }

    .blog-teaser-grid__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }

    .blog-teaser-grid__card {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--color-surface);
        border: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
        border-radius: var(--radius-ui);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        color: var(--color-text);
        transition: border-color var(--duration-fast) ease;
    }

    .blog-teaser-grid__card-hit { position: absolute; inset: 0; z-index: 1; color: transparent; text-decoration: none; }

    .blog-teaser-grid__card:hover { border-color: var(--color-primary); }

    .blog-teaser-grid__cover {
        position: relative;
        height: 13rem;
        background: var(--color-heading);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .blog-teaser-grid__cover-icon { width: 2rem; height: 2rem; color: var(--brand-apricot); stroke-width: 1.1; }

    .blog-teaser-grid__cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }

    .blog-teaser-grid__cover:has(.blog-teaser-grid__cover-img[src]:not([src=""])) .blog-teaser-grid__cover-icon { display: none; }

    .blog-teaser-grid__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }

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

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

    .blog-teaser-grid__readtime { color: var(--color-text-muted); }

    .blog-teaser-grid__card-title { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--font-weight-bold); line-height: 1.2; color: var(--color-heading); }

    .blog-teaser-grid__card-text { margin: 0; font-size: var(--text-small); line-height: var(--line-height-base); color: var(--color-text); }

    @media (max-width: 64rem) {
        .blog-teaser-grid__grid { grid-template-columns: 1fr; }
        .blog-teaser-grid__head { flex-direction: column; align-items: flex-start; }
    }
}