.articles .tags {margin: 1rem 0 -1rem; font-size: 0;}
.articles .tags .tag {
	display: inline-block; min-width: 80px; height: 40px; margin: 0 0 1rem 1rem; padding: 0 1rem;
	line-height: 40px; text-align: center; font-size: 1rem; font-weight: bold; cursor: pointer;
	border: 1px solid #ddd; background-color: white;
}
.articles .tags .tag:hover {border-color: #253B78; background-color: #f8f8ff;}
.articles .tags .tag.active {border-color: #253B78; background-color: #253B78; color: white;}

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

.articleCard {
	display: flex; flex-direction: column; padding: 1rem; position: relative;
	background-color: #fff; box-shadow: 0 3px 6px #00000029; transition: all .3s;
}
.articleCard:hover {background-color: #f7f7ff; box-shadow: 0 5px 10px #00000040;}
.articleCard > a {position: absolute; top: 0; right: 0; z-index: 1;	width: 100%; height: 100%;}
.articleCard img {height: 200px; object-fit: cover;}
.articleCard .name {margin-top: 1.5rem; font-size: 18px; font-weight: bold;}
.articleCard .description {margin-top: .5rem;}
.articleCard .description p {margin-bottom: 0; line-height: 22px;}
.articleCard .description p:first-child {max-height: 88px; overflow: hidden;}

@media screen and (min-width: 64em) {
	.articles .cards {
		display: grid; margin-top: 2.5rem;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 1rem;
		grid-row-gap: 1rem;
	}
	.articleCard {padding: 2rem;}
	.articleCard img {height: 360px;}
}