main { overflow-x: clip; }
.blog-hero { padding-block: clamp(48px, 9vw, 112px) clamp(32px, 5vw, 56px); }
.blog-hero h1 { font-size: clamp(2.8rem, 1rem + 6.4vw, 6rem); }
.posts { list-style: none; margin: 0 auto; padding: 0 var(--gutter) clamp(80px, 10vw, 120px); max-width: 1240px; }
.post {
  display: grid;
  gap: 6px 32px;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.post:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
@media (min-width: 860px) {
  .post { grid-template-columns: 160px minmax(0, 1fr) 140px; align-items: baseline; padding: 36px 0; }
}
.post-topic { margin: 0; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .5); }
.post-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.post-desc { margin: 12px 0 0; max-width: 40em; color: rgba(255, 255, 255, .62); }
.post-status { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .4); }
@media (min-width: 860px) { .post-status { text-align: right; } }