.articles-main{max-width:820px;}

.article-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;}
.article-card{
  background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden;cursor:pointer;
  transition:transform .15s ease;
}
.article-card:hover{transform:translateY(-3px);}
.article-card-cover{width:100%;height:150px;object-fit:cover;display:block;}
.article-card-body{padding:16px 18px;}
.article-card-body h3{margin:0 0 6px;color:var(--green-dark);font-size:17px;}

.article-category{
  display:inline-block;color:var(--green-dark);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px;
}

.link-back{
  background:none;border:none;color:var(--green-dark);font-weight:700;font-size:14px;
  padding:0 0 16px;cursor:pointer;
}
.link-back:hover{text-decoration:underline;}

.article-box .article-cover{width:100%;max-height:320px;object-fit:cover;border-radius:12px;margin-bottom:16px;}
.article-body{white-space:pre-wrap;font-size:15px;line-height:1.7;margin:16px 0 28px;}

.comments-title{color:var(--green-dark);margin:0 0 12px;}
.comment-post{border-top:1px solid #f0f0f0;padding:14px 0;}
.comment-post:first-child{border-top:none;padding-top:0;}
.comment-post .p-author{font-weight:700;color:var(--green-dark);margin:0 0 2px;font-size:14px;}
.comment-post .p-date{color:#999;font-size:12px;margin:0 0 8px;}
.comment-post .p-body{white-space:pre-wrap;font-size:14px;line-height:1.6;margin:0;}

#comment-body{
  padding:12px 14px;border:1.5px solid #ddd;border-radius:10px;font-size:15px;
  font-family:inherit;resize:vertical;
}