<div>
  <h2>Not in an <code>&lt;article&gt;</code></h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga maxime, assumenda cum quam porro consequuntur voluptatum repellat perferendis ullam, obcaecati, inventore quibusdam. Ducimus libero, voluptatem sunt aut blanditiis voluptatum necessitatibus.</p>
  <!-- an ordered list -->
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>

  <!-- an unordered list -->
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>

  <!-- an interactive unordered list -->
  <menu>
    <li><button>Button 1</button></li>
    <li><button>Button 2</button></li>
    <li><button>Button 3</button></li>
  </menu>
</div>

<article>
  <h2>In an <code>&lt;article&gt;</code></h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga maxime, assumenda cum quam porro consequuntur voluptatum repellat perferendis ullam, obcaecati, inventore quibusdam. Ducimus libero, voluptatem sunt aut blanditiis voluptatum necessitatibus.</p>
  <!-- an ordered list -->
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>

  <!-- an unordered list -->
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>

  <!-- an interactive unordered list -->
  <menu>
    <li><button>Button 1</button></li>
    <li><button>Button 2</button></li>
    <li><button>Button 3</button></li>
  </menu>
</article>

@layer base, demo;

@layer demo {
  :where(ol, ul, menu) {
    padding-left: 0;
  }

  article :where(ol, ul, menu) {
    list-style-position: inside;
  }
}

@layer base {
  body {
    display: flex;
    gap: 1.5rem;
    padding: 3rem;
  }

  p {
    max-width: 60ch;
  }
}