/* https://smolcss.dev/#smol-container */

@function --intrinsic-container(--inline-margin: 1rem, --max-width: 60ch) {
  result: min(100% - var(--inline-margin), var(--max-width));
}

.container {
  --inline-margin: 1rem;
  --max-width: 60ch;

  width: --intrinsic-container(var(--inline-margin), var(--max-width));

  &.large {
    --max-width: 80ch;
  }

  &.x-large {
    --max-width: 100ch;
  }
}

@layer pen {
  * {
    box-sizing: border-box;
  }
  body {
    padding: 1rem;

    > * + * {
      margin-block-start: 1rem;
    }
  }

  .container {
    outline: 2px dashed red;
    margin-inline: auto;
    padding: 1rem;
  }
}