/*
 * Breakpoints
 * 768px  - tablet: features / install-steps switch to multi-column grids (screenshots use
 *          an auto-fit grid that scales at every width, no fixed breakpoint needed)
 * 1024px - desktop: navigation switches from hamburger menu to a horizontal nav bar
 * Component-specific @media rules live in layout.css / components.css next to the
 * selectors they affect. Only cross-component, global rules belong here.
 */

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-6);
  }

  h1 {
    font-size: var(--fs-2xl);
  }

  h2 {
    font-size: var(--fs-xl);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--space-7);
  }
}