#hl_projects
{
	display: flex;
	flex-direction: column;
	gap: 2rem;
	background-color: #FFF;
	/* Fix: Top Padding */
	padding-top: 3.8rem;
}

#hl_blog
{
	display: flex;
	flex-direction: column;
	padding-top: 6rem;
	padding-bottom: 2rem;
	background-color: #FFF;
}

.project_row
{
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	padding: 2rem 0;
	border-bottom: 1px solid #CCC;
}

.project_row.reverse
{
	flex-direction: row-reverse;
}

.project_row:last-child
{
	border-bottom: none;
}

.project_row:hover
{
	background: #ffffff;
	background: linear-gradient(90deg,rgba(255, 255, 255, 1) 2%, rgba(222, 222, 222, 1) 50%, rgba(255, 255, 255, 1) 98%);
}

.project_img
{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 18.75rem;
	min-width: 11.25rem;
}

.project_img img
{
	max-width: 100%;
	max-height: 15.625rem;
	object-fit: contain;
	border-radius: 0.2rem;
}


.project_text
{
	flex: 2;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.project_text.align_right
{
	text-align: right;
}

.project_type,
.project_name,
.project_desc,
.project_skills,
.project_date
{
	font-size: 1rem;
	color: #333;
}

.project_name
{
	font-weight: bold;
	font-size: 1.5rem;
	transform: skew(-3deg);
}

.project_desc
{
	white-space: normal;
}

.skill_tags
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.skill_tags.align_right
{
	justify-content: flex-end;
}

.tag
{
	background-color: #f0f0f0;
	padding: 0.25rem 0.75rem;
	border-radius: 0.2rem;
	font-size: 0.875rem;
	color: #333;
}

.project_footer
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1rem;
}

/* Original: 768px */
@media (max-width: 48em)
{
	.project_row,
	.project_row.reverse
	{
		flex-direction: column;
	}

	.project_text.align_right,
	.skill_tags.align_right
	{
		text-align: left;
		justify-content: flex-start;
	}
}