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>Omnis aliquam ea velit rerum. Ut voluptates consequatur delectus incidunt magnam similique quod tempora. Molestias tempora beatae nesciunt expedita mollitia dolor dolores. In temporibus quod non ut qui in. Voluptas quo ipsam. Nihil praesentium rerum a dolore magni vel magni.</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>Omnis aliquam ea velit rerum. Ut voluptates consequatur delectus incidunt magnam similique quod tempora. Molestias tempora beatae nesciunt expedita mollitia dolor dolores. In temporibus quod non ut qui in. Voluptas quo ipsam. Nihil praesentium rerum a dolore magni vel magni.</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>Omnis aliquam ea velit rerum. Ut voluptates consequatur delectus incidunt magnam similique quod tempora. Molestias tempora beatae nesciunt expedita mollitia dolor dolores. In temporibus quod non ut qui in. Voluptas quo ipsam. Nihil praesentium rerum a dolore magni vel magni.</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>Omnis aliquam ea velit rerum. Ut voluptates consequatur delectus incidunt magnam similique quod tempora. Molestias tempora beatae nesciunt expedita mollitia dolor dolores. In temporibus quod non ut qui in. Voluptas quo ipsam. Nihil praesentium rerum a dolore magni vel magni.</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>Omnis aliquam ea velit rerum. Ut voluptates consequatur delectus incidunt magnam similique quod tempora. Molestias tempora beatae nesciunt expedita mollitia dolor dolores. In temporibus quod non ut qui in. Voluptas quo ipsam. Nihil praesentium rerum a dolore magni vel magni.</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>Omnis aliquam ea velit rerum. Ut voluptates consequatur delectus incidunt magnam similique quod tempora. Molestias tempora beatae nesciunt expedita mollitia dolor dolores. In temporibus quod non ut qui in. Voluptas quo ipsam. Nihil praesentium rerum a dolore magni vel magni.</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>Omnis aliquam ea velit rerum. Ut voluptates consequatur delectus incidunt magnam similique quod tempora. Molestias tempora beatae nesciunt expedita mollitia dolor dolores. In temporibus quod non ut qui in. Voluptas quo ipsam. Nihil praesentium rerum a dolore magni vel magni.</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>Omnis aliquam ea velit rerum. Ut voluptates consequatur delectus incidunt magnam similique quod tempora. Molestias tempora beatae nesciunt expedita mollitia dolor dolores. In temporibus quod non ut qui in. Voluptas quo ipsam. Nihil praesentium rerum a dolore magni vel magni.</p>
            </div>
        </div>
    </div>
</div>