@layer components {
  .section {
    padding: var(--space-lg-x4) var(--space-md);
    width: 100%;
    max-width: var(--max-reach-lg-x6);
    margin-inline: auto;
    display: grid;
    gap: var(--space-lg-x3);
  }

  .section--small-gap {
    gap: var(--space-md);
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >=40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >=48rem) {
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >=64rem) {
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >=80rem) {
  }
}