.b-articles {
	--b-posts-per-row: 4;
	--b-post-gap: 30px;
	--b-post-pad: 10px;
	--b-hover-zoom: 1.1;
}
.b-hidden-while-loading {
	display: none;
}
.b-gutter {
	width: var(--b-post-gap);
}

.b-article {
	display: flex;
	flex-direction: column;
	width: calc( (100% - (var(--b-posts-per-row) - 1) * var(--b-post-gap)) / var(--b-posts-per-row));
	
	cursor: pointer;
	text-decoration: none;
}

.b-article .b-img-container {
	width: 100%;
	padding: var(--b-post-pad);
}
.b-article .b-img-inner {
	overflow: hidden;
}
.b-article .b-img-container img {
	width: 100%;
	transition: transform 0.25s;
}
:root.b-hover .b-article:hover .b-img-container img {
	transform: scale(var(--b-hover-zoom));
}

.b-article .b-text-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	height: 100%;
	padding: var(--b-post-pad);
}

.b-article .b-date {
	font-size: 0.5rem;
	font-weight: 600;
}



@media only screen and (max-width: 1024px) {
	.b-articles {
		--b-posts-per-row: 3;
		--b-post-gap: 15px;
	}
}
@media only screen and (max-width: 700px) {
	.b-articles {
		--b-posts-per-row: 1;
		--b-post-gap: 12.5px;
	}
}