@layer components {
    .container {
        margin-inline: auto;
    }

    .container--size-narrow {
        inline-size: min(100%, 24rem);
    }

    .container--size-readable {
        inline-size: min(100%, 40rem);
    }

    .container--size-wide {
        inline-size: min(100%, 64rem);
    }

    .container--style-card {
        block-size: 100dvh;
        inline-size: 100dvw;

        @media (width > 32rem) {
            display: grid;
            padding-block: 4rem;
            place-content: center;

            &.container > * {
                background-color: var(--system-grouped-background);
                block-size: min(100dvh - 8rem, calc(32rem * 16 / 9));
                border-radius: 1rem;
                box-shadow:
                    0 0 0 1px var(--hairline),
                    0 1rem 3rem
                        light-dark(
                            oklch(0% 0 0deg / 8%),
                            oklch(0% 0 0deg / 50%)
                        );
                inline-size: 32rem;
                overflow: hidden;
            }
        }
    }
}