/* 
 * Bootstrap-style responsive container with max-widths at each breakpoint.
 * Uses project breakpoints as defined in README.md:
 * - X-Small: <576px (no max-width)
 * - Small: ≥576px (540px)
 * - Medium: ≥768px (720px) 
 * - Large: ≥992px (960px)
 * - X-Large: ≥1200px (1140px)
 * - XX-Large: ≥1400px (1320px)
 */

.container {
  --narrow-width: 43em;
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;
  --container-pad: var(--size-4);

  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  grid-template-areas: "content";
  overflow: auto;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 0 50% 50% 0;
    grid-template-areas: ". content content .";
    grid-template-columns:
      1fr var(--narrow-width) calc(var(--container-md) - var(--narrow-width))
      1fr;
  }

  .container.is-narrow {
    grid-template-areas: ". content . .";
  }
}

@media (min-width: 992px) {
  .container {
    grid-template-columns:
      1fr var(--narrow-width) calc(var(--container-lg) - var(--narrow-width))
      1fr;
  }
}

@media (min-width: 1200px) {
  .container {
    grid-template-columns:
      1fr var(--narrow-width) calc(var(--container-xl) - var(--narrow-width))
      1fr;
  }
}

@media (min-width: 1400px) {
  .container {
    grid-template-columns:
      1fr var(--narrow-width) calc(var(--container-xxl) - var(--narrow-width))
      1fr;
  }
}

.container__content {
  grid-area: content;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}