.visualLink{background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--bg)}


.visualLink{display:flex;flex-direction: column;min-height:400px;text-align: center;padding:15%;justify-content: space-between;background-size: cover;background-position: center;filter: grayscale(100%);
	transition: filter 0.35s ease;}
.visualLink h4{color:white;}
.visualLink svg{width:40px;height:40px;margin-top:auto}

.visualLink:has(a:hover) {
	filter: grayscale(0%) contrast(1);
}


.masonry {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.masonry-group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
		"hero hero"
		"hero hero"
		"small1 tall"
		"small2 tall"
		"strip strip";
		--row: 300px;

	grid-auto-rows: var(--row);
	gap: 20px;
}

.masonry .visualLink {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 130px;
	overflow: hidden;
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--bg);
	padding:0;
	background-size: cover;
	background-position: center;
	text-align: center;
}

.masonry .visualLink.pos-1 { grid-area: hero; }
.masonry .visualLink.pos-2 { grid-area: small1; }
.masonry .visualLink.pos-3 { grid-area: small2; }
.masonry .visualLink.pos-4 { grid-area: tall; }
.masonry .visualLink.pos-5 { grid-area: strip; grid-row: span 1;}



@media (max-width: 768px) {
	.masonry-group {
		grid-template-columns: 1fr;
		grid-template-areas: none;
		grid-auto-rows: auto;
	}

	.masonry .visualLink {
		grid-area: auto !important;
		min-height: 220px;
	}
}