@layer page {
  .hero {
    background: var(--color-hero-bg);
    color: #fff;
    padding: 90px 0;
  }
  .hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .hero__heading { max-width: 720px; width: 100%; }
  .hero__heading-img { display: block; width: 100%; height: auto; }
  .hero__subheading { color: #c9c9d4; max-width: 560px; font-size: 1.05rem; }
  .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }

  .home-blog { padding-block: 64px; }
  .home-blog__header { margin-bottom: 28px; }
  .home-blog__footer { display: flex; justify-content: center; margin-top: 36px; }

  .post-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
  }
  .post-card__image { aspect-ratio: 16 / 9; background: var(--color-border); overflow: hidden; }
  .post-card__image img { width: 100%; height: 100%; object-fit: cover; }
  .post-card__title { padding: 16px 18px; font-weight: 700; }
}