.teaser {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 40em) {
  .teaser { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s-6); align-items: start; }
}
.teaser__media { overflow: hidden; border-radius: var(--radius-sm); background: var(--c-slate-050); }
.teaser__media :is(img, picture) { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.teaser:has(.teaser__link:hover) .teaser__media img { transform: scale(1.04); }

.teaser__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin: 0 0 var(--s-2);
  font-size: var(--fs-2xs);
  color: var(--fg-faint);
}
.teaser__category { color: var(--accent-on-light); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.teaser__title { margin: 0 0 var(--s-2); font-size: var(--fs-lg); }
.teaser__link { color: inherit; text-decoration: none; }
.teaser__link::after { content: ''; position: absolute; inset: 0; }
.teaser:has(.teaser__link:hover) .teaser__title { color: var(--c-slate-600); }
.teaser__summary { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted); }

/* No image: the text takes the whole row rather than leaving a blank column. */
.teaser:not(:has(.teaser__media img)) { grid-template-columns: minmax(0, 1fr); }
.teaser:not(:has(.teaser__media img)) .teaser__media { display: none; }