<ul>
    <li class="txt-s item-hover gray "> <a class="flex-txt" href=""><img loading="lazy" class="avatar size-S " src="/components/images/p1.jpg" alt="avatar">
            <div class="column-flex"> <span class="fw-semibold">Person 1</span> <span>This is the message</span> </div>
        </a></li>
    <li class="txt-s item-hover gray"><a class="flex-txt" href=""><img loading="lazy" class="avatar size-S " src="/components/images/p2.jpg" alt="avatar">
            <div class="column-flex"> <span class="fw-semibold">Person 2</span> <span>This is the message</span> </div>
        </a></li>
    <li class="txt-s item-hover gray"><a class="flex-txt" href=""><img loading="lazy" class="avatar size-S " src="/components/images/p3.jpg" alt="avatar">
            <div class="column-flex"> <span class="fw-semibold">Person 3</span> <span>This
                    is the message</span> </div>
        </a></li>
    <li class="txt-s item-hover gray"><a class="flex-txt" href=""><img loading="lazy" class="avatar size-S " src="/components/images/p4.jpg" alt="avatar">
            <div class="column-flex"> <span class="fw-semibold">Person 4</span> <span>This
                    is the message</span> </div>
        </a></li>
</ul>