.container {
  margin-inline: auto;

  &.default {
    width: min(100% - 1rem, var(--container-default--maw, 100%) - 1rem);

    @container app (width > 768px) {
      --container-default--maw: 768px;
    }
  }

  &.edge {
    width: min(100% - 1rem, var(--container-edge--maw, 100%) - 1rem);

    @container app (width > 430px) {
      --container-edge--maw: 360px;
    }
  }
}