<div class="richText">
  <p>Paragraph ipsum possimus illum debitis enim odio Distinctio praesentium explicabo mollitia voluptatem nostrum sunt. Ut iste dignissimos soluta unde repudiandae. <a href="#">Voluptate et neque</a> non aspernatur aliquid asperiores tenetur amet reprehenderit? Numquam.</p>

  <hr />

  <p>Lorem ratione temporibus beatae doloremque?</p>

  <ul>
    <li>Lorem nobis impedit labore quod at qui esse. Quo velit?</li>
    <li>Lorem cumque fugit nisi consectetur aliquid Natus suscipit modi nam.</li>
    <li>Ipsum repellat exercitationem rerum eos iste? Impedit quos at dignissimos.</li>
  </ul>

  <p>Consectetur nulla voluptatem a veniam perspiciatis omnis quam. Adipisci fugit explicabo obcaecati hic ab. Repudiandae amet veniam vero sapiente harum Explicabo numquam facilis dolor at numquam Molestiae assumenda laboriosam asperiores.</p>

  <ol>
    <li>Amet quis hic deleniti fugit obcaecati Libero fuga doloribus corrupti.</li>
    <li>Lorem totam vitae commodi illum ab? Quos quibusdam ducimus dignissimos</li>
    <li>Elit incidunt aut omnis dolorem eaque. Elit tenetur nostrum dolores</li>
  </ol>

  <hr />

  <blockquote>
    <p>Consectetur amet magnam vitae nisi rem Dolore assumenda unde fuga ex doloremque. Harum veniam eveniet aspernatur maiores ex Eius eaque ab quam dicta sequi! Aut eaque ratione quasi enim voluptate</p>
    <cite> First Lastername </cite>
  </blockquote>

  <p>Elit temporibus quos officiis qui unde beatae. Repellendus pariatur temporibus velit sit voluptate Expedita quibusdam eaque quod magnam eaque Sint sequi consequuntur aperiam accusantium porro? <code>Code snippet</code> eaque at saepe</p>

  <pre>
    module Main where

    main :: IO ()
    main = putStrLn "Hello World!"</pre
  >
</div>

@use '../../molecules/list';
@use '../../organisms/table';

.richText {
  /**
   * Automatically use list component styles even without the class.
   */
  dl,
  ol,
  ul {
    @extend .list;
  }

  table {
    @extend .table;
  }
}