<header class="header">
  <h1>Title</h1>
  <nav class="main-navigation">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="foo.html">Foo</a></li>
      <li><a href="bar.html">Bar</a></li>
    </ul>
  </nav>
</header>
<aside>
  <h2>Side Navigation</h2>
  <ul>
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
    <li><a href="">Link 4</a></li>
    <li><a href="">Link 5</a></li>
    <li><a href="">Link 6</a></li>
  </ul>
  <p>
    At vero eos et accusam et justo duo dolores et ea rebum. Stet
    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
  </p>
</aside>
<main>
  <h2>Lorem Ipsum</h2>
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua. At vero eos et accusam et justo duo dolores
    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
    est Lorem ipsum dolor sit amet.
  </p>
  <div class="split-2">
    <img src="" class="" />
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
      diam nonumy eirmod tempor invidunt ut labore et dolore magna
      aliquyam erat, sed diam voluptua. At vero eos et accusam et
      justo duo dolores et ea rebum. Stet clita kasd gubergren, no
      sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  </div>
</main>
<footer>
  <p>Lorem Ipsum Dolor</p>
</footer>
</body>

:root {
  --paragraph-width: 90ch;
  --sidebar-width: 30ch;
  --layout-s: "header header" "sidebar sidebar" "main main" "footer footer";
  --layout-l: "header header" "main sidebar" "footer footer";
  --template-s: auto auto minmax(100%, 1fr) auto /
    minmax(70%, var(--paragraph-width)) minmax(30%, var(--sidebar-width));
  --template-l: auto minmax(100%, 1fr) auto /
    minmax(70%, var(--paragraph-width)) minmax(30%, var(--sidebar-width));
  --layout: var(--layout-s);
  --template: var(--template-s);
  --gap-width: 1rem;

  --theme-hue: 210deg;
  --theme-sat: 20%;
  --theme-lit-l: 90%;
  --theme-lit-d: 20%;

  --theme-accent-hue: 200deg;
  --theme-accent-sat: 100%;
  --theme-accent-lit-l: 25%;
  --theme-accent-lit-d: 80%;

  --background-color: hsl(
    var(--theme-hue),
    var(--theme-sat),
    var(--theme-lit)
  );

  --font-color: hsl(
    var(--theme-hue),
    var(--theme-sat),
    clamp(10%, calc(100% - (var(--theme-lit) - 47%) * 1000), 95%)
  );

  --accent-color: hsl(
    var(--theme-accent-hue),
    var(--theme-accent-sat),
    var(--theme-accent-lit)
  );

  --accent-contrast-color: hsl(
    var(--theme-accent-hue),
    var(--theme-accent-sat),
    clamp(0%, calc(100% - (var(--theme-accent-lit) - 47%) * 1000), 100%)
  );

  --color-scheme: light dark;

  color-scheme: var(--color-scheme);
}

@media (min-width: 48rem) {
  :root {
    --layout: var(--layout-l);
    --template: var(--template-l);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-lit: var(--theme-lit-d);
    --theme-accent-lit: var(--theme-accent-lit-d);
  }
}

body {
  margin: 0 auto;
  display: grid;
  grid-template: var(--template);
  grid-template-areas: var(--layout);
  grid-gap: var(--gap-width);
  justify-content: center;
  min-height: 100vh;
  max-width: calc(
    var(--paragraph-width) + var(--sidebar-width) + var(--gap-width)
  );
  padding: 0 var(--gap-width);
  background-color: var(--background-color);
  color: var(--font-color);
  font-family: sans-serif;
}

body > header {
  grid-area: header;
}

.main-navigation ul {
  display: flex;
  gap: 1rem;
}

body > aside {
  grid-area: sidebar;
  align-self: start;
}

body > main {
  grid-area: main;
}

body > footer {
  grid-area: footer;
  margin-top: 5rem;
  border-top: 1px solid currentColor;
}

:where(ul) {
  list-style: none;
  padding-left: 0;
}

:where(a[href]) {
  color: var(--accent-color);
}