<p class="ss-text-indent-first">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
            dignissim convallis est. Quisque aliquam libero nisi, imperdiet at
            tincidunt nec, gravida vehicula nisl. Praesent mattis, massa quis
            luctus fermentum, turpis mi volutpat justo.
        </p>
        <p class="ss-text-indent-first">
            Maecenas viverra orci in volutpat maximus. Vestibulum ante ipsum
            primis in faucibus orci luctus et ultrices posuere cubilia curae.
            Sed sagittis eros eu dolor elementum, ac tincidunt nunc fermentum.
        </p>

<p class="ss-text-indent-hanging">
            Smith, John D. "The Complete Guide to Typography." Design Journal,
            vol. 12, no. 3, 2024, pp. 45-67. This comprehensive article
            explores the fundamental principles of typographic design.
        </p>
        <p class="ss-text-indent-hanging">
            Johnson, Mary K., and Robert Lee. "Modern Web Design Principles."
            Web Development Quarterly, vol. 8, no. 2, 2024, pp. 12-28.
        </p>

<blockquote class="ss-text-indent-block">
            <p>
                "Typography is the craft of endowing human language with a
                durable visual form."
            </p>
            <cite>— Robert Bringhurst</cite>
        </blockquote>

<p class="ss-text-indent-01">
            Small indent (level 1) - Praesent mattis, massa quis luctus
            fermentum.
        </p>
        <p class="ss-text-indent-02">
            Medium indent (level 2) - Turpis mi volutpat justo, nec
            pellentesque.
        </p>
        <p class="ss-text-indent-03">
            Large indent (level 3) - Maecenas viverra orci in volutpat maximus.
        </p>
        <p class="ss-text-indent-04">
            Extra large indent (level 4) - Vestibulum ante ipsum primis.
        </p>

<div class="ss-text-indent-nested">
            <p>Parent level content sits at the base indent.</p>
            <div class="ss-text-indent-nested">
                <p>First child level content is indented once.</p>
                <div class="ss-text-indent-nested">
                    <p>Second child level content is indented twice.</p>
                </div>
            </div>
        </div>

<p class="ss-c-ml--02">
            This paragraph has left margin indentation. Lorem ipsum dolor sit
            amet, consectetur adipiscing elit. Nullam dignissim convallis est.
        </p>
        <p class="ss-c-ml--04">
            This paragraph has more left margin. Quisque aliquam libero nisi,
            imperdiet at tincidunt nec, gravida vehicula nisl.
        </p>

<p class="ss-c-mx--04">
            This paragraph is indented on both left and right sides. Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim
            convallis est. Quisque aliquam libero nisi.
        </p>