Typography

<div class="item">
    <h2 class="item__title">Fonts</h2>
    <div class="item__section">
        <div class="item__item">
            <ul>
                <li><strong>Name</strong>: <code>Display</code></li>
                <li><strong>Value</strong>: <code>font-display</code></li>
                <li><strong>Font</strong>: <code>FreightNeo Pro Bold</code></li>
                <li><strong>Resource</strong>: <a href="https://fonts.adobe.com/fonts/freight-neo">Adobe Fonts</a></li>
            </ul>
            <div class="font-display">
                <h1>Display Font</h1>
                <p>Sint sit doloremque dolorem eaque corrupti explicabo. Enim blanditiis consequatur. Soluta eaque sed. Sequi similique nihil sit deleniti est neque velit cum sunt. Itaque officiis reprehenderit molestiae velit quasi et. Est molestiae recusandae culpa itaque fugit consequatur veniam est accusantium.</p>
            </div>
        </div>
        <div class="item__item">
            <ul>
                <li><strong>Name</strong>: <code>Body</code></li>
                <li><strong>Value</strong>: <code>font-body</code></li>
                <li><strong>Font</strong>: <code>Sofia Pro Medium</code></li>
                <li><strong>Resource</strong>: <a href="https://fonts.adobe.com/fonts/sofia">Adobe Fonts</a></li>
            </ul>
            <div class="font-body">
                <h1>Body Font</h1>
                <p>Sint sit doloremque dolorem eaque corrupti explicabo. Enim blanditiis consequatur. Soluta eaque sed. Sequi similique nihil sit deleniti est neque velit cum sunt. Itaque officiis reprehenderit molestiae velit quasi et. Est molestiae recusandae culpa itaque fugit consequatur veniam est accusantium.</p>
            </div>
        </div>
        <div class="item__item">
            <ul>
                <li><strong>Name</strong>: <code>Quote</code></li>
                <li><strong>Value</strong>: <code>font-quote</code></li>
                <li><strong>Font</strong>: <code>FreightNeo Pro Semi-Italic</code></li>
                <li><strong>Resource</strong>: <a href="https://fonts.adobe.com/fonts/freight-neo">Adobe Fonts</a></li>
            </ul>
            <div class="font-quote">
                <h1>Quote Font</h1>
                <p>Sint sit doloremque dolorem eaque corrupti explicabo. Enim blanditiis consequatur. Soluta eaque sed. Sequi similique nihil sit deleniti est neque velit cum sunt. Itaque officiis reprehenderit molestiae velit quasi et. Est molestiae recusandae culpa itaque fugit consequatur veniam est accusantium.</p>
            </div>
        </div>
    </div>
</div>

<div class="item">
    <h2 class="item__title">Body Font Variants</h2>
    <div class="item__section">
        <div class="item__item">
            <ul>
                <li><strong>Value</strong>: <code>font-body-italic</code></li>
                <li><strong>Font</strong>: <code>Sofia Pro Medium Italic</code></li>
            </ul>
            <div class="font-body-italic">
                <h2>Italic</h2>
                <p>Sint sit doloremque dolorem eaque corrupti explicabo. Enim blanditiis consequatur. Soluta eaque sed. Sequi similique nihil sit deleniti est neque velit cum sunt. Itaque officiis reprehenderit molestiae velit quasi et. Est molestiae recusandae culpa itaque fugit consequatur veniam est accusantium.</p>
            </div>
        </div>
        <div class="item__item">
            <ul>
                <li><strong>Value</strong>: <code>font-body-semi-bold</code></li>
                <li><strong>Font</strong>: <code>Sofia Pro Semi-Bold</code></li>
            </ul>
            <div class="font-body-semi-bold">
                <h2>Semi Bold</h2>
                <p>Sint sit doloremque dolorem eaque corrupti explicabo. Enim blanditiis consequatur. Soluta eaque sed. Sequi similique nihil sit deleniti est neque velit cum sunt. Itaque officiis reprehenderit molestiae velit quasi et. Est molestiae recusandae culpa itaque fugit consequatur veniam est accusantium.</p>
            </div>
        </div>
        <div class="item__item">
            <ul>
                <li><strong>Value</strong>: <code>font-body-bold</code></li>
                <li><strong>Font</strong>: <code>Sofia Pro Bold</code></li>
            </ul>
            <div class="font-body-bold">
                <h2>Bold</h2>
                <p>Sint sit doloremque dolorem eaque corrupti explicabo. Enim blanditiis consequatur. Soluta eaque sed. Sequi similique nihil sit deleniti est neque velit cum sunt. Itaque officiis reprehenderit molestiae velit quasi et. Est molestiae recusandae culpa itaque fugit consequatur veniam est accusantium.</p>
            </div>
        </div>
        <div class="item__item">
            <ul>
                <li><strong>Value</strong>: <code>font-body-bold-italic</code></li>
                <li><strong>Font</strong>: <code>Sofia Pro Bold Italic</code></li>
            </ul>
            <div class="font-body-bold-italic">
                <h2>Bold Italic</h2>
                <p>Sint sit doloremque dolorem eaque corrupti explicabo. Enim blanditiis consequatur. Soluta eaque sed. Sequi similique nihil sit deleniti est neque velit cum sunt. Itaque officiis reprehenderit molestiae velit quasi et. Est molestiae recusandae culpa itaque fugit consequatur veniam est accusantium.</p>
            </div>
        </div>
        <div class="item__item">
            <ul>
                <li><strong>Value</strong>: <code>font-body-black</code></li>
                <li><strong>Font</strong>: <code>Sofia Pro Black</code></li>
            </ul>
            <div class="font-body-black">
                <h2>Black</h2>
                <p>Sint sit doloremque dolorem eaque corrupti explicabo. Enim blanditiis consequatur. Soluta eaque sed. Sequi similique nihil sit deleniti est neque velit cum sunt. Itaque officiis reprehenderit molestiae velit quasi et. Est molestiae recusandae culpa itaque fugit consequatur veniam est accusantium.</p>
            </div>
        </div>
    </div>
</div>