<div class="header-group">
  <h2>Blog Post Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae ut odit nulla quidem pariatur? Sit tempore, dignissimos id eligendi eaque quod reiciendis quis possimus. Repellendus saepe similique corrupti tenetur.</p>
</div>

<div class="header-group">
  <h2>Blog Post Title</h2>
  <div class="subtitle">
    This is a subtitle
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae ut odit nulla quidem pariatur? Sit tempore, dignissimos id eligendi eaque quod reiciendis quis possimus. Repellendus saepe similique corrupti tenetur.</p>
</div>

@layer base;

h2,
.subtitle {
  margin-block-end: 1.5rem;
}

.header-group:has(h2):has(.subtitle) h2 {
  margin-block-end: 0.2rem;
}

@layer base {
  body {
    background: #ffab00;
    display: flex;
    gap: 3rem;
    justify-content: center;
    line-height: 1.35;
    padding: 3rem;
  }
}