/* Category page (category.html): heading and app grid */
@layer pages {
  /* Section header */
  .section-head {
    margin-block-end: 1rem;
    & h1 {
      font-size: 1.125rem;
      font-weight: 600;
      letter-spacing: -.025em;
      line-height: 1.75rem;
      @media (width >= 640px) { font-size: 1.25rem; }
    }
    & p { margin-block-start: .25rem; font-size: .875rem; color: var(--muted-foreground); }
  }

  /* App grid — container queries drive the column count */
  .feed { container: feed / inline-size; }
  .grid {
    display: grid;
    column-gap: 1.5rem;
    row-gap: .25rem;
    @container feed (width >= 720px)  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @container feed (width >= 1000px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}