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

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

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

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