.relatedPosts {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  padding-block: var(--tome-space-lg);
  padding-inline: var(--tome-space-md);
  border-block-start: 1px solid var(--tome-color-border);
}

.header {
  grid-column: 1 / -1;
  margin-block-end: var(--tome-space-sm);
}

.title {
  font-size: var(--tome-type-size-xl);
  font-weight: var(--tome-type-weight-bold);
  line-height: var(--tome-type-leading-snug);
  color: var(--tome-color-foreground);
}

.description {
  font-size: var(--tome-type-size-sm);
  color: var(--tome-color-on-surface-muted);
  line-height: var(--tome-type-leading-normal);
  margin-block-start: var(--tome-space-1);
}

.grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--tome-space-sm);
}

.card {
  padding: var(--tome-space-sm);
  border: 1px solid var(--tome-color-border);
  border-radius: var(--tome-radius-md);
  background-color: var(--tome-color-background);
  transition: box-shadow var(--tome-motion-fast) var(--tome-motion-ease-out);
}

.card:hover {
  box-shadow: var(--tome-shadow-sm);
}

.cardTitle {
  font-size: var(--tome-type-size-base);
  font-weight: var(--tome-type-weight-semibold);
  line-height: var(--tome-type-leading-snug);
  color: var(--tome-color-foreground);
}

.cardTitle a {
  color: inherit;
  text-decoration: none;
}

.cardTitle a:hover {
  color: var(--tome-color-primary);
}

.placeholder {
  font-size: var(--tome-type-size-sm);
  color: var(--tome-color-on-surface-muted);
  grid-column: 1 / -1;
}