section#comments #comments-wrapper {
	 margin: 1.5em 0;
	 padding: 0 var(--card-padding);
}
 section#comments .comment {
	 display: grid;
	 column-gap: 1rem;
	 grid-template-areas: "avatar name" "avatar time" "avatar post" "...... interactions";
	 grid-template-columns: min-content;
	 justify-items: start;
	 margin: 0em auto 0em -1em;
	 padding: 0.5em;
}
 section#comments .comment.comment-reply {
	 margin: 0em auto 0em 1em;
}
 section#comments .comment .avatar-link {
	 grid-area: avatar;
	 height: 4rem;
	 position: relative;
	 width: 4rem;
}
 section#comments .comment .avatar-link .avatar {
	 height: 100%;
	 width: 100%;
}
 section#comments .comment .avatar-link.op::after {
	 background-color: var(--accent-color);
	 border-radius: 50%;
	 bottom: -0.25rem;
	 color: var(--accent-color-text);
	 content: "✓";
	 display: block;
	 font-size: 1.25rem;
	 font-weight: bold;
	 height: 1.5rem;
	 line-height: 1.5rem;
	 position: absolute;
	 right: -0.25rem;
	 text-align: center;
	 width: 1.5rem;
}
 section#comments .comment .author {
	 align-items: center;
	 display: flex;
	 font-weight: bold;
	 gap: 0.5em;
	 grid-area: name;
}
 section#comments .comment .author .instance {
	 background-color: var(--code-background-color);
	 border-radius: 9999px;
	 color: var(--neutral);
	 font-size: smaller;
	 font-weight: normal;
	 padding: 0.25em 0.75em;
}
 section#comments .comment .author .instance:hover {
	 opacity: 0.8;
	 text-decoration: none;
}
 section#comments .comment .author .instance.op {
	 background-color: var(--accent-color);
	 color: var(--accent-color-text);
}
 section#comments .comment .author .instance.op::before {
	 content: "✓";
	 font-weight: bold;
	 margin-inline-end: 0.25em;
	 margin-inline-start: -0.25em;
}
 section#comments .comment .emoji {
	 display: inline;
	 height: 1.25em;
	 vertical-align: middle;
	 width: 1.25em;
}
 section#comments .comment .invisible {
	 display: none;
}
 section#comments .comment .ellipsis::after {
	 content: "…";
}