@layer components {
  /* Container Layout
     ========================================================================== */

  .container {
    container-type: inline-size;
    width: 100%;
    padding-right: var(--space-xs, 0.5rem);
    padding-left: var(--space-xs, 0.5rem);
    margin-left: auto;
    margin-right: auto;
  }

  @media (min-width: 50rem) {
    .container {
      padding-right: var(--space-m, 1rem);
      padding-left: var(--space-m, 1rem);
      max-width: 90rem;
    }

    .container--narrow {
      max-width: 62rem;
    }

    .container--more-narrow {
      max-width: 42rem;
    }
  }
}