@layer components {
    .panel {
        --row-gap: var(--block-space);
        --column-gap: var(--block-space);
        --panel-padding: var(--block-space-double);
        --panel-bg: var(--color-theme-cinnamon-bg-light);
        --panel-border-color: transparent;

        background-color: var(--panel-bg, var(--color-canvas));
        border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-ink-lighter));
        border-radius: var(--panel-border-radius, 1em);
        color: var(--color-ink);
        inline-size: var(--panel-size, 60ch);
        max-inline-size: 100%;
        padding: var(--panel-padding, var(--block-space));

        @media (min-width: 640px) {
            padding: var(--panel-padding, var(--block-space-double));
        }
    }

    .panel--narrow {
        --panel-size: 60ch;
    }

    .panel--wide {
        --panel-size: 80ch;
    }

    .panel--full-width {
        --panel-size: 100%;
    }

    .panel--centered {
        --panel-border-size: 0;
        margin-left: auto;
        margin-right: auto;

        #main:has(&) {
            margin: auto;
        }
    }
}