.articles .tags {width: 70%; margin: 2rem auto -12px; text-align: center; font-size: 0;}
.articles .tags .tag {
	display: inline-block; margin: 0 0 12px 12px; padding: 5px 10px;
	border-radius: .5rem; font-size: 14px; cursor: pointer;
	border: 1px solid var(--color-main); background-color: var(--color-main-lightest);
}
.articles .tags .tag:hover {
	color: white;
	border-color: var(--color-main-darker);
	background-color: var(--color-main-lighter)
}
.articles .tags .tag.active {
	box-shadow: 0 2px 5px #00000040; color: white;
	border-color: var(--color-button-darker); background-color: var(--color-button);
}

.articles .cards {display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem;}

@media screen and (min-width: 40em) {
	.articles .cards {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-column-gap: 2rem;
		grid-row-gap: 2rem;
	}
}

.articleCard {
	display: flex; flex-direction: column; height: 400px;
	position: relative; overflow: hidden; transition: all .3s;
	border-radius: 20px; background-color: #fff; box-shadow: 0 8px 20px rgba(155, 175, 205, 0.28);
}
.articleCard:before {
	content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 2px;
	background: linear-gradient(20deg, var(--color-main), white 80%);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude; pointer-events: none;
}
.articleCard:hover {box-shadow: 0 6px 15px rgba(105, 125, 155, 0.5);}
.articleCard:hover:before {background: linear-gradient(20deg, var(--color-main), white 90%);}

.articleCard > a {
	position: absolute; top: 0; right: 0; z-index: 1; width: 100%; height: 100%; border-radius: 20px;
}
.articleCard img {height: 300px; object-fit: cover;}
.articleCard .name {
	height: 40px; margin-top: -40px; padding: 0 12px; color: white;
	line-height: 40px; background-color: #00000080; font-size: 1rem;
}
.articleCard .description {margin-top: 1rem; padding: 0 1rem;}
.articleCard .description p {margin-bottom: 0; line-height: 22px;}
.articleCard .description p:first-child {max-height: 44px; overflow: hidden;}