/* Archive cards share the site's dark surfaces, typography and buttons. */
#hero-section-wrapper { padding: 160px 0 60px; background: var(--pg-color-ink); }
#hero-section-wrapper .hero-content-wrapper { max-width: 720px; color: var(--pg-color-muted);}
#hero-section-wrapper h1 { font-size: 67px;  }
#hero-section-wrapper .primary-button {display: inline-block;}
#hero-section-wrapper .subtitle { color: var(--pg-orange); font-size: 20px; }
#posts-archive-wrapper { padding: 60px 0; }
#posts-archive-wrapper .post-box { min-width: 0; margin-bottom: 40px; }
#posts-archive-wrapper .post-holder { height: 100%; border: 1px solid var(--pg-color-gray); border-radius: 8px; overflow: hidden; }
#posts-archive-wrapper .post-holder > a { display: block; }
#posts-archive-wrapper .post-holder > a > img { display: block; width: 100%; max-width: 100%; height: auto; }
#posts-archive-wrapper .post-content { padding: 24px; overflow-wrap: anywhere; }
#posts-archive-wrapper .post-content h3 { font-size: 24px; margin-bottom: 16px; }
#posts-archive-wrapper .post-content p { font-size: 16px; color: var(--pg-color-muted); }
#posts-archive-wrapper .tags-holder { margin-bottom: 12px; color: var(--pg-orange); }
#posts-archive-wrapper .post-content .primary-button-transparent { display: inline-block;}
@media (max-width: 767px) {
  #hero-section-wrapper { padding: 120px 0 40px; }
  #posts-archive-wrapper { padding: 40px 0; }
}