section#visual-posts {
	--list-grid-gap: 30px;
	--list-grid-module: calc( (var(--main-column-width) - (var(--list-grid-gap) * 5)) / 6);
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: var(--list-grid-module);
	grid-gap: var(--list-grid-gap);
	margin-bottom: 200px;
}

section#visual-posts article.small {
	grid-row: span 2;
	grid-column: span 2;
}

section#visual-posts article.large {
	grid-row: span 3;
	grid-column: span 3;
}

section#visual-posts article a {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

section#visual-posts > article > a > img {
	width: 100%;
	height: auto;
}

section#visual-posts article h2, 
section#visual-posts article img {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

article h2 {
	padding: 0.571em 1.5em;
	max-width: calc(100% - 60px);
	justify-self: center;
	align-self: start;
	text-align: center;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.75);
	font-family: 'Circular-Bold';
	font-size: 0.75em;
}

@media (min-width: 1440px) and (max-width: 1749px) {
	
	section#visual-posts {
		--list-grid-gap: calc(15px + (30 - 15) * (100vw - 1440px) / (1750 - 1440));
	}
}

@media (min-width: 768px) and (max-width: 1439px) {
	
	section#visual-posts {
		--list-grid-gap: 15px;
	}	
}

@media (max-width: 767px) {
	
	section#visual-posts {
		grid-auto-rows: var(--main-column-width);
		grid-template-columns: 1fr;
		grid-gap: 15px;
		margin-bottom: 100px;
	}
	
	section#visual-posts article.large,
	section#visual-posts article.small {
		grid-row: span 1;
		grid-column: span 1;
	}
}