/* .comments *******************************/

.comments {
	margin-bottom: 40px;
	padding: 0 20px;
	width: 100%;

	.header {
		border-bottom: 1px solid #ccc;
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
		padding-bottom: 10px;

		h3 {
		}

		a {
			color: #222;
			text-decoration: none;

			&:hover {
				color: #222;
				text-decoration: underline;
			}
		}
	}

	.wrapper {

		.comment {
			display: flex;
			gap: 20px;
			margin-bottom: 20px;

			> img {
				border-radius: 30px;
				height: 60px;
				width: 60px;
			}

			.text {

				.user {
					margin-bottom: 5px;

					img {
						height: 20px;
						width: auto;
					}

					span {
						color: #666;
						font-size: 0.98rem;
					}
				}

				.comment {
					margin-bottom: 5px;
				}

				.reactions {
					align-items: center;
					display: flex;
					gap: 10px;
					margin-bottom: 10px;

					img {
						height: 20px;
						width: auto;
					}

					a {
						color: #333;
						font-weight: 600;
						text-decoration: none;
					}
				}

				.replies {
					color: #065fd4;
					font-weight: 600;

					img {
						height: 20px;
						width: auto;
					}
				}
			}
		}
	}
}

@media (min-width: 1000px) {

	.comments {
		padding: 0;

		.header {
			align-items: flex-end;
			flex-direction: row;
			justify-content: space-between;

			h3 {
			}

			a {

				&:hover {
				}
			}
		}

		.wrapper {

			.comment {

				> img {
				}

				.text {

					.user {

						span {
						}
					}

					.comment {
					}

					.reactions {

						img {
						}

						a {
						}
					}

					.replies {

						img {
						}
					}
				}
			}
		}
	}
}