/* Блок «Читайте также»: три карточки в конце статьи.
   Палитра взята с сайта: текст #5a4535, заголовки #2b1f14, акцент #ea5a1f,
   рамки #f2dfc8. Отдельным файлом, чтобы не трогать существующие стили. */
.related{display:grid;grid-template-columns:1fr;gap:18px;margin:0 0 28px}
@media (min-width:640px){.related{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.related{grid-template-columns:repeat(3,1fr)}}

.rel-card{display:flex;flex-direction:column;max-width:none;background:#fff;
          border:1px solid #f2dfc8;border-radius:12px;overflow:hidden;
          transition:border-color .15s ease}
.rel-card:hover{border-color:#ea5a1f}

/* Место под обложку зарезервировано пропорцией: без неё карточка подпрыгивает
   на загрузке картинки — это сдвиг вёрстки ровно там, где читатель решает,
   идти ли дальше. */
.rel-card__thumb{display:block;aspect-ratio:16/9;background:#fff1e6}
.rel-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}

.rel-card__body{display:flex;flex-direction:column;gap:6px;padding:13px 14px 15px;flex:1}
.rel-card__cat{color:#a8836a;font-size:11.5px;font-weight:600;
               letter-spacing:.08em;text-transform:uppercase}
/* Обрезка в три строки: без неё карточки в ряду разной высоты и ряд рвётся. */
.rel-card__title{color:#2b1f14;text-decoration:none;font-size:16.5px;
                 line-height:1.34;font-weight:600;
                 display:-webkit-box;-webkit-box-orient:vertical;
                 -webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.rel-card__title:hover{color:#ea5a1f}