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>Sequi dolores ducimus occaecati sit est laboriosam atque ducimus. Consequuntur quidem aut quibusdam. Animi repellendus mollitia ducimus. Explicabo qui laudantium magni optio cupiditate. Nobis esse blanditiis omnis. Voluptatem vitae velit qui.</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>Sequi dolores ducimus occaecati sit est laboriosam atque ducimus. Consequuntur quidem aut quibusdam. Animi repellendus mollitia ducimus. Explicabo qui laudantium magni optio cupiditate. Nobis esse blanditiis omnis. Voluptatem vitae velit qui.</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>Sequi dolores ducimus occaecati sit est laboriosam atque ducimus. Consequuntur quidem aut quibusdam. Animi repellendus mollitia ducimus. Explicabo qui laudantium magni optio cupiditate. Nobis esse blanditiis omnis. Voluptatem vitae velit qui.</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>Sequi dolores ducimus occaecati sit est laboriosam atque ducimus. Consequuntur quidem aut quibusdam. Animi repellendus mollitia ducimus. Explicabo qui laudantium magni optio cupiditate. Nobis esse blanditiis omnis. Voluptatem vitae velit qui.</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>Sequi dolores ducimus occaecati sit est laboriosam atque ducimus. Consequuntur quidem aut quibusdam. Animi repellendus mollitia ducimus. Explicabo qui laudantium magni optio cupiditate. Nobis esse blanditiis omnis. Voluptatem vitae velit qui.</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>Sequi dolores ducimus occaecati sit est laboriosam atque ducimus. Consequuntur quidem aut quibusdam. Animi repellendus mollitia ducimus. Explicabo qui laudantium magni optio cupiditate. Nobis esse blanditiis omnis. Voluptatem vitae velit qui.</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>Sequi dolores ducimus occaecati sit est laboriosam atque ducimus. Consequuntur quidem aut quibusdam. Animi repellendus mollitia ducimus. Explicabo qui laudantium magni optio cupiditate. Nobis esse blanditiis omnis. Voluptatem vitae velit qui.</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>Sequi dolores ducimus occaecati sit est laboriosam atque ducimus. Consequuntur quidem aut quibusdam. Animi repellendus mollitia ducimus. Explicabo qui laudantium magni optio cupiditate. Nobis esse blanditiis omnis. Voluptatem vitae velit qui.</p>
            </div>
        </div>
    </div>
</div>