Сделай адаптивный блок похожих материалов с [3] колонками.
Каждый элемент — карточка: сверху обложка материала фиксированной высотой [200px] со скруглением [16px], снизу название обычным текстом.
Между карточками отступы [25px].
Заголовок блока оформить как подзаголовок над сеткой.
Стиль — современный, аккуратный, с выравниванием по центру.

В шаблоне "Страница материалов и комментариев" у меня уже есть код для вывода блока:

<?if($RELATED_ENTRIES$(3))?>
<div id="rel">
 <h3>Похожие материалы</h3>
 <? $RELATED_ENTRIES$(3)?>
</div>
<?endif?>
 

<li class="uRelatedEntry">
 <a href="$ENTRY_URL$">
 <div class="related-item">
 <img class="related-cover" src="$COVER_URL$" alt="$TITLE$">
 <p class="related-title">$TITLE$</p>
 </div>
 </a>
</li>

<style>
#rel {
 margin-top: 30px;
}

#rel > h3 {
 margin-top: 0;
 margin-bottom: 20px;
}

.uRelatedEntries {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 25px;
}

.uRelatedEntries > li {
 margin: 0;
}

.uRelatedEntry {
 list-style: none;
 margin-bottom: 15px;
}

.related-item {
 border: none;
 border-radius: 0;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.related-cover {
 width: 100%;
 height: 200px;
 object-fit: cover;
 display: block;
 margin-bottom: 8px;
 border-radius: 16px;
}

.related-title {
 font-size: 16px;
 margin: 0 0 6px 0;
}

.related-description {
 font-size: 14px;
 color: #666;
 margin: 0;
}

/* Адаптив */
@media (max-width: 992px) {
 .uRelatedEntries {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 600px) {
 .uRelatedEntries {
 grid-template-columns: 1fr;
 }
 .related-cover {
 height: 160px;
 }
 .related-title {
 font-size: 15px;
 }
}
</style>