<ul class="c-section-list">
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Quia, voluptas?</h5>
        <p>Unde atque in eveniet voluptate excepturi alias deleniti aut magnam sequi, ea doloremque dolores aspernatur voluptatibus facere ratione dolore qui.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Consequatur, ratione.</h5>
        <p>Molestias nulla, eius autem ad voluptatum temporibus in et assumenda. Quisquam fugiat laboriosam iusto facilis quam molestiae repellat, omnis eaque.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Commodi, blanditiis!</h5>
        <p>Soluta commodi dolorem placeat molestias fugit nam provident, id, minima dolor sunt explicabo atque ratione fugiat dolorum, quae, nulla in.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Ipsum, ea.</h5>
        <p>Quos quo odio hic nostrum dolore, nemo fugiat incidunt facilis laborum saepe dignissimos itaque esse rem odit dolorum distinctio est.</p>
    </li>
</ul>

<ul class="c-section-list c-section-list--border-top">
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Quia, voluptas?</h5>
        <p>Unde atque in eveniet voluptate excepturi alias deleniti aut magnam sequi, ea doloremque dolores aspernatur voluptatibus facere ratione dolore qui.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Consequatur, ratione.</h5>
        <p>Molestias nulla, eius autem ad voluptatum temporibus in et assumenda. Quisquam fugiat laboriosam iusto facilis quam molestiae repellat, omnis eaque.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Commodi, blanditiis!</h5>
        <p>Soluta commodi dolorem placeat molestias fugit nam provident, id, minima dolor sunt explicabo atque ratione fugiat dolorum, quae, nulla in.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Ipsum, ea.</h5>
        <p>Quos quo odio hic nostrum dolore, nemo fugiat incidunt facilis laborum saepe dignissimos itaque esse rem odit dolorum distinctio est.</p>
    </li>
</ul>

<ul class="c-section-list c-section-list--border-bottom">
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Quia, voluptas?</h5>
        <p>Unde atque in eveniet voluptate excepturi alias deleniti aut magnam sequi, ea doloremque dolores aspernatur voluptatibus facere ratione dolore qui.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Consequatur, ratione.</h5>
        <p>Molestias nulla, eius autem ad voluptatum temporibus in et assumenda. Quisquam fugiat laboriosam iusto facilis quam molestiae repellat, omnis eaque.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Commodi, blanditiis!</h5>
        <p>Soluta commodi dolorem placeat molestias fugit nam provident, id, minima dolor sunt explicabo atque ratione fugiat dolorum, quae, nulla in.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Ipsum, ea.</h5>
        <p>Quos quo odio hic nostrum dolore, nemo fugiat incidunt facilis laborum saepe dignissimos itaque esse rem odit dolorum distinctio est.</p>
    </li>
</ul>

<ul class="c-section-list c-section-list--loose">
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Quia, voluptas?</h5>
        <p>Unde atque in eveniet voluptate excepturi alias deleniti aut magnam sequi, ea doloremque dolores aspernatur voluptatibus facere ratione dolore qui.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Consequatur, ratione.</h5>
        <p>Molestias nulla, eius autem ad voluptatum temporibus in et assumenda. Quisquam fugiat laboriosam iusto facilis quam molestiae repellat, omnis eaque.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Commodi, blanditiis!</h5>
        <p>Soluta commodi dolorem placeat molestias fugit nam provident, id, minima dolor sunt explicabo atque ratione fugiat dolorum, quae, nulla in.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Ipsum, ea.</h5>
        <p>Quos quo odio hic nostrum dolore, nemo fugiat incidunt facilis laborum saepe dignissimos itaque esse rem odit dolorum distinctio est.</p>
    </li>
</ul>