@layer layout {
  :root {
    /* Container inner widths */
    --container-width-sm: 320px;
    --container-width-md: 544px;
    --container-width-lg: 1144px;
    --container-width-xl: 1440px;

    /* Container outer margins */
    --container-margin-sm: 16px;
    --container-margin-md: 32px;
    --container-margin-lg: 32px;
  }

  .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-width-sm);
    padding-left: var(--container-margin-sm);
    padding-right: var(--container-margin-sm);
    box-sizing: border-box;
  }

  /* Max size content can reach. No limits below that */
  .container-content-max {
    width: 100%;
    max-width: var(--container-width-xl);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: var(--container-margin-sm);
    padding-right: var(--container-margin-sm);
  }

  /* Used to give some max on ultrawide */
  .container-full {
    max-width: var(--container-width-xl);
    margin-left: auto;
    margin-right: auto;
  }

  /* Medium: 768-1279px - 32px outer margin */
  @media (min-width: 768px) {
    .container {
      max-width: calc(
        var(--container-width-md) + 2 * var(--container-margin-md)
      );
      padding-left: var(--container-margin-md);
      padding-right: var(--container-margin-md);
    }
    .container-content-max {
      padding-left: var(--container-margin-md);
      padding-right: var(--container-margin-md);
    }
  }

  /* Large: 1280-inf - 32px outer margin */
  @media (min-width: 1280px) {
    .container {
      max-width: calc(
        var(--container-width-lg) + 2 * var(--container-margin-lg)
      );
      padding-left: var(--container-margin-lg);
      padding-right: var(--container-margin-lg);
    }

    .container-content-max {
      padding-left: var(--container-margin-lg);
      padding-right: var(--container-margin-lg);
    }
  }
}