@layer components {
  .panel {
    background-color: var(--panel-background, var(--color-canvas));
    border: var(--panel-border-size, 1px) solid var(--color-ink-lighter);
    border-radius: var(--radius);
    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));
    }
  }

  /* A single panel centered in the page, e.g. sign in */
  .panel--centered {
    --panel-size: 100%;

    @media (min-width: 640px) {
      --panel-size: 42ch;
    }

    #main:has(&) {
      display: grid;
      place-content: center;
    }
  }
}