@font-face {
 font-family: cnn-icons;
 src: url("../index/cnn-icons.ttf") format("ttf");
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}
.comments-container * {
 font-family: "Inter", sans-serif;

 font-weight: 400;
 font-style: Regular;
 font-size: 16px;
 leading-trim: NONE;
 line-height: 160%;
 letter-spacing: 0%;
}
.comments-container {
 max-width: 680px;
 margin: 0 auto;
 padding: 24px 16px;
}
.comments-header {
 padding-top: 8px;
 border-bottom: 1px solid #ddd;
 position: relative;
}
.comments-title {
 font-size: 18px;
 font-weight: 700;
 color: #000;
 display: inline-block;
}
.comments-underline {
 width: 140px;
 height: 3px;
 background-color: #f15d22;
 margin-top: 10px;
}
.comment {
 display: flex;
 margin-top: 25px;
}
.comment-avatar {
 width: 48px;
 height: 48px;
 border-radius: 4px;
 margin-right: 12px;
 object-fit: cover;
}
.comment-content {
 flex: 1;
}
.comment-meta {
 font-size: 15px;
 margin-bottom: 4px;
}
.comment-author {
 font-weight: 700;
 color: #000;
 font-size: 13px;
}
.comment-time {
 font-weight: 400;
 font-size: 12px;
 color: #888;
 margin-left: 6px;
}
.comment-text {
 font-size: 15px;
 color: #111;
 margin-bottom: 6px;
 line-height: 21px;
 font-weight: 300;
}
.comment-actions {
 font-size: 12px;
 color: #555;
 display: flex;
 gap: 6px;
 align-items: center;
}
.comment-actions .icon {
 font-family: cnn-icons !important;
 font-size: 11px;
 color: #999;
}
.vote-down {
 padding-right: 0;
 padding-left: 6px;
 border-left: 2px solid #e7e9ee;
}
.vote-down,
.vote-up {
 position: relative;
 height: 7px;
 min-height: 14px;
 overflow: hidden;
}
.comment-actions a {
 color: #666;
 text-decoration: none;
}
.comment-actions a:hover {
 text-decoration: underline;
}
.comment.reply {
 margin-left: 60px;
 padding-left: 12px;
}
@media (max-width: 600px) {
 .comment-avatar {
  width: 44px;
  height: 44px;
 }
 .comments-container {
  padding: 16px 10px;
 }
}