body {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-areas:
        'header header'
        'side   main'
        'footer footer';
    gap: 1rem;
    padding: 1rem;

}

@media (max-width: 600px) {
    body {
        grid-template-columns: 1fr;
        grid-template-areas:
            'header'
            'side'
            'main'
            'footer';
    }
}

body>header {
    grid-area: header;

    ul {
        gap: 1rem;
    }
}

body>main {
    grid-area: main;
    padding-block: unset !important;
}

body>aside {
    grid-area: side;
    max-width: 8rem;
}

body>footer {
    grid-area: footer;
    text-align: center;
}

/* Theme */

/* LIGHT THEME — Stripe-like Business UI */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  /* Typography */
  --pico-font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --pico-font-size: 14px;
  --pico-line-height: 1.4;
  --pico-font-weight: 400;

  /* Layout + spacing */
  --pico-border-radius: 6px;
  --pico-border-width: 1px;
  --pico-spacing: 0.875rem;
  --pico-typography-spacing-vertical: 0.75rem;

  /* Buttons */
  --pico-button-border-radius: 6px;
  --pico-button-spacing-vertical: 0.55rem;
  --pico-button-spacing-horizontal: 1rem;
}