<input type="range" min=".9" max="4" step=".1" value="2" id="slider"> 
<header>
  <p>Well isn't this neat? <b>Logical rhythm</b> with the <code>lh</code> and <code>rlh</code> unit. It even scales with a user's preferred reading size!</p>
</header>

<main>
  <aside>
    <ul>
      <li><a href="#">Some link</a></li>
      <li><a href="#">Another thing to click</a></li>
      <li><a href="#">Vertical rhythm</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <a href="#">Random link</a>
  </aside>
  <article>
    <h1>Some headline that wraps onto a new line just to show it working as we expect</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae sit cumque eaque, eum nisi natus. Eaque numquam dolorum rerum amet. Deleniti et repellendus aperiam saepe excepturi tempora nulla molestiae delectus?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae sit cumque eaque, eum nisi natus. Eaque numquam dolorum rerum amet. Deleniti et repellendus aperiam saepe excepturi tempora nulla molestiae delectus?</p>
  </article>
</main>

@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);

@layer demo {
  html {
    /* adapts to the user font size preference! */
    line-height: 2;
  }
  
  body, main, article, aside {
    gap: 1rlh;
  }
  
  body, aside, header, article {
    padding: 1rlh;
  }
  
  h1, li, a, p {
    line-height: 1rlh;
  }
  
  ul {
    display: grid;
    grid-auto-rows: 1rlh;
  }
}

@layer demo.support {
  body {
    display: grid;
    align-content: start;
    justify-content: center;
  }
  
  header {
    background: var(--surface-2);
    border-radius: var(--radius-2);
    margin-block-start: 2lh;
    
    > p {
      max-inline-size: 100%;
    }
    
    code {
      border: 1px solid var(--surface-3);
    }
  }
  
  main {
    display: grid;
    grid-template-columns: max-content 1fr;
  }
  
  ul {
    padding: 0
  }
  
  aside li {
    list-style-type: none;
    padding: 0;
  }
  
  aside {
    display: grid;
    align-content: space-between;
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-2);
  }
  
  aside a {
    padding: 0;
    margin: 0;
  }
  
  article {
    display: grid;
  }
  
  h1 {
    font-size: var(--font-size-4);
    text-wrap: balance;
  }
  
  input[type="range"] {
    max-inline-size: var(--size-content-1);
    position: fixed;
    top: 25px;
    left: 25px;
  }
}

slider.oninput = () =>
  document.firstElementChild.style.lineHeight = slider.value