@layer sections{
  [ui-section=page]{
    --bg-shade-color:oklch(from var(--bg-color) calc(l - 0.0225) calc(c + 0.0181) calc(h + 6.6));
    display:flex;
    flex-direction:column;
    gap:var(--spacing-24);
  }
  [ui-section=page] [ui-slot=alert]{
    width:-moz-fit-content;
    width:fit-content;
  }
  [ui-section=page]:has(> form){
    align-items:center;
    justify-content:center;
  }
  [ui-section=page] > form{
    display:grid;
    grid-gap:var(--spacing-24);
    gap:var(--spacing-24);
    width:100%;
  }
  @media (min-width: 769px){
    [ui-section=page] > form{
      width:50%;
    }
  }
  [ui-section=page] > form .fields{
    display:grid;
    grid-gap:var(--spacing-24);
    gap:var(--spacing-24);
  }
  [ui-section=page] > form .fields fieldset{
    display:grid;
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
  }
  [ui-section=page] > form .fields fieldset [ui-slot=input],
  [ui-section=page] > form .fields fieldset [ui-slot=textarea]{
    background-color:var(--bg-shade-color);
  }
}