/* تخطيط الصفحة الرئيسية للمدونة. */

/* Page sections */
.blog-hero__content {
  max-width: 52rem;
  gap: var(--space-4);
}

.blog-hero__content p {
  font-size: var(--font-size-lg);
}

/* Blog-specific card layout */
.content-card--featured {
  max-width: 56rem;
  padding: var(--space-6);
  background: var(--color-surface-raised);
}

.content-card--featured h3 {
  font-size: var(--font-size-3xl);
}

.content-card time {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.content-card > a {
  justify-self: start;
}

@media (max-width: 36rem) {
  .content-card--featured {
    padding: var(--space-5);
  }
}