^^&&^^

Edit File: comments.scss

/**
 * Comments Wrapper
 */
.comments-area {

> * {
		margin-top: var(--global--spacing-vertical);
		margin-bottom: var(--global--spacing-vertical);

&:first-child {
			margin-top: 0;
		}

&:last-child {
			margin-bottom: 0;
		}
	}

&.show-avatars {

.avatar {
			border-radius: 50%;
			position: absolute;
			top: 10px;
		}

.fn {
			display: inline-block;
			padding-left: 85px;
		}

.comment-metadata {
			padding: 8px 0 9px 85px;
		}

}
}

/**
 * Comment Title
 */

.comments-title,
.comment-reply-title {
	font-size: var(--heading--font-size-h2);
	letter-spacing: var(--heading--letter-spacing-h2);
}

.comment-reply-title {
	display: flex;
	justify-content: space-between;

small {

a {
			font-family: var(--global--font-secondary);
			font-size: var(--global--font-size-xs);
			font-style: normal;
			font-weight: normal;
			letter-spacing: normal;
		}
	}
}

/* Nested comment reply title*/
.comment .comment-respond .comment-reply-title {
	font-size: var(--global--font-size-lg);
}

/**
 * Comment Lists
 */
.comment-list {
	padding-left: 0;
	list-style: none;

> li {
		margin-top: var(--global--spacing-vertical);
		margin-bottom: var(--global--spacing-vertical);
	}

}

.comment-list .children {
	list-style: none;
	padding-left: 0;

> li {
		margin-top: var(--global--spacing-vertical);
		margin-bottom: var(--global--spacing-vertical);
	}

}

.comment-list .depth-2,
.comment-list .depth-3 {
	@include media(mobile) {
		padding-left: calc(4 * var(--global--spacing-horizontal));
	}
}

/**
 * Comment Meta
 */
.comment-meta {

.comment-author {
		line-height: var(--global--line-height-heading);
		margin-bottom: calc(0.25 * var(--global--spacing-unit));

@include media(mobile) {
			margin-bottom: 0;
			padding-right: 0;
		}

.fn {
			font-family: var(--global--font-secondary);
			font-weight: normal;
			font-size: var(--global--font-size-lg);
			hyphens: auto;
			word-wrap: break-word;
			word-break: break-word;
		}

}

.comment-metadata {
		color: var(--global--color-primary);
		font-size: var(--global--font-size-xs);
		padding: 8px 0 9px 0;

.edit-link {
			margin-left: var(--global--spacing-horizontal);
		}

}

@include media(mobile) {
		margin-right: inherit;

.comment-author {
			max-width: inherit;
		}
	}
}

.reply {
	font-size: var(--global--font-size-sm);
	line-height: var(--global--line-height-heading);
}

.bypostauthor {
	display: block;
}

.says {
	display: none;
}

.pingback .url,
.trackback .url {
	font-family: var(--global--font-primary);
}

// Comment body
.comment-body {
	position: relative;
	margin-bottom: calc(1.7 * var(--global--spacing-vertical));

> * {
		margin-top: var(--global--spacing-vertical);
		margin-bottom: var(--global--spacing-vertical);
	}

.reply {
		margin: 0;
	}
}

.comment-content {
	word-wrap: break-word;
}

// Pingbacks & Trackbacks
.pingback .comment-body,
.trackback .comment-body {
	margin-top: var(--global--spacing-vertical);
	margin-bottom: var(--global--spacing-vertical);
}

.comment-respond {
	margin-top: var(--global--spacing-vertical);
}

.comment-respond > * {
	margin-top: var(--global--spacing-unit);
	margin-bottom: var(--global--spacing-unit);

&:first-child {
		margin-top: 0;
	}

&:last-child {
		margin-bottom: 0;

&.comment-form {
			margin-bottom: var(--global--spacing-vertical);
		}
	}
}

.comment-author {
	padding-top: 3px;

.url {
		color: currentColor;
	}
}

.comment-form {
	display: flex;
	flex-wrap: wrap;

> * {
		flex-basis: 100%;
	}

.comment-notes {
		font-size: var(--global--font-size-sm);
	}

.comment-form-url,
	.comment-form-comment {
		width: 100%;
	}

.comment-form-author,
	.comment-form-email {
		flex-basis: 0;
		flex-grow: 1;

@include media(mobile-only) {
			flex-basis: 100%;
		}
	}

.comment-form-cookies-consent > label,
	.comment-notes {
		font-size: var(--global--font-size-xs);
		font-weight: normal;
	}
}

.comment-form > p {
	margin-bottom: var(--global--spacing-unit);

&:first-of-type {
		margin-top: 0;
	}

&:last-of-type {
		margin-bottom: 0;
	}

label,
	input[type="email"],
	input[type="text"],
	input[type="url"],
	textarea {
		display: block;
		font-size: var(--global--font-size-sm);
		margin-bottom: calc(.5 * var(--global--spacing-unit));
		width: 100%;
		font-weight: var(--form--label-weight);
	}

&.comment-form-cookies-consent {
		display: flex;
	}

@include media(mobile) {

&.comment-form-author {
			margin-right: calc(1.5 * var(--global--spacing-horizontal));
		}

&.comment-notes,
		&.logged-in-as {
			display: block;
		}
	}
}