Headings

<div class="item heading">
    <h2 class="item__title heading__title">Headings</h2>
    <div class="item__section heading__section">
        <div class="item__item heading__item">
            <ul>
                <li><strong>Font</strong>: <code>FreightNeo Pro Bold</code></li>
                <li><strong>Value</strong>: <code>4xl</code></li>
                <li><strong>Size</strong>: <code>2.25rem</code></li>
            </ul>
            <div class="typography">
                <h1>Example Text for <strong>Level 1</strong></h1>
            </div>
        </div>
        <div class="item__item heading__item">
            <ul>
                <li><strong>Font</strong>: <code>FreightNeo Pro Bold</code></li>
                <li><strong>Value</strong>: <code>2xl</code></li>
                <li><strong>Size</strong>: <code>1.5rem</code></li>
            </ul>
            <div class="typography">
                <h2>Example Text for <strong>Level 2</strong></h2>
            </div>
        </div>
        <div class="item__item heading__item">
            <ul>
                <li><strong>Font</strong>: <code>FreightNeo Pro Bold</code></li>
                <li><strong>Value</strong>: <code>xl</code></li>
                <li><strong>Size</strong>: <code>1.25rem</code></li>
            </ul>
            <div class="typography">
                <h3>Example Text for <strong>Level 3</strong></h3>
            </div>
        </div>
        <div class="item__item heading__item">
            <ul>
                <li><strong>Font</strong>: <code>FreightNeo Pro Bold</code></li>
                <li><strong>Value</strong>: <code>base</code></li>
                <li><strong>Size</strong>: <code>1rem</code></li>
            </ul>
            <div class="typography">
                <h4>Example Text for <strong>Level 4</strong></h4>
            </div>
        </div>
    </div>
</div>