/* Blog / news article */

.article-title {
	font-size: 40px;
	font-weight: 700;
	line-height: 130%;
	margin-top: 0;

	@include mobile {
		font-size: 30px;
	}

	@include small-mobile {
		font-size: 26px;
	}
}

.article-featured-image {
	img {
		@include default-shape();
		width: 100%;
		height: 100%;
	}
}

.article-date {
	border: 4px solid $grayBackground2;
	@include default-shape();

	background: $grayBackground2;
	padding: 8px 12px;
	color: $mainTextColor;
	font-size: 12px;
	font-weight: 600;
	margin-right: 5px;
	display: inline-block;
	margin-bottom: 6px;

}

.article-categories {
	display: inline-block;

	ul {
		li {
			margin-right: 5px;

			a {
				padding-top: 6px;
				padding-bottom: 6px;
			}
		}
	}
}

.article-content {
	color: $mainTextColor;

	p {
		color: $mainTextColor;
		line-height: 24px;
		font-size: 14px;
		font-weight: 400;
	}
}

.share-article {
	display: flex;

	a {
		@include round(8px);

		font-size: 14px;
		color: $mainTextColor;
		display: inline-block;
		padding: 0 4px;
		border: 2px solid $mainTextColor;
		text-align: center;
		line-height: 24px;
		margin-right: 8px;

		i {
			margin-right: 0;
		}
	}
}

.comment {
	&.bordered-box {
		border: 1px solid $borderColor2;
		padding: 20px 25px;
		margin-bottom: 20px;
		@include default-shape;
	}

	&.bordered-box:last-child {
		margin-bottom: 0;
	}

	.comment-details-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;

		@include breakpoint-down(xs) {
			align-items: flex-start;
			flex-direction: column;
		}

		.comment-author-name {
			margin-left: 20px;
			margin-right: auto;

			@include breakpoint-down(xs) {
				margin-left: unset;
				margin-right: unset;
			}

		}
	}
}

.article-similar-articles {
	h3 {
		font-size: 32px;

		@include mobile {
			font-size: 24px;
		}
	}
}