.quicklinks-block .quicklinks-images {
	column-gap: 15px;
	row-gap: 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: var(--wp--style--global--wide-size) !important;
	margin-left: auto;
	margin-right: auto;

	& .image {
		aspect-ratio: 1/1;
		background-color: var(--wp--preset--color--navy);
		display: inline-block;
		flex: 0 1 calc(33.333% - 10px);
		transition: .25s ease-in-out;
		position: relative;
		@media screen and (max-width: 662px) {
			aspect-ratio: 16 / 9;
		}
	}

	/* 4 links: lay out 2 columns x 2 rows instead of 3 + 1 */
	&.count-2 .image,
	&.count-4 .image {
		aspect-ratio: auto;
		max-height: 345px;
		flex-basis: calc(50% - 7.5px);
	}

	/*
	 * Any other total: rows are capped at 3 across by the default flex-basis
	 * above, but a leftover final row of 1 or 2 would otherwise sit at 1/3
	 * width instead of filling the row. Catch those leftovers and give them
	 * the same "N across" treatment as count-2/count-4, whatever N turns out
	 * to be (5 links = 3 + 2, 7 links = 3 + 3 + 1, etc.) — no per-count class
	 * needed since these are plain nth-child position checks.
	 */
	&:not(.count-2):not(.count-4) .image:last-child:nth-child(3n + 1) {
		/* final row has exactly 1 leftover tile */
		aspect-ratio: auto;
		max-height: 345px;
		flex-basis: calc(50% - 7.5px);
	}
	&:not(.count-2):not(.count-4) .image:nth-last-child(2):nth-child(3n + 1),
	&:not(.count-2):not(.count-4) .image:last-child:nth-child(3n + 2) {
		/* final row has exactly 2 leftover tiles */
		aspect-ratio: auto;
		max-height: 345px;
		flex-basis: calc(50% - 7.5px);
	}

	& .image img {
		height: 100%;
		object-fit: cover;
		object-position: center;
		overflow: hidden;
		position: relative;
		width: 100%;
	}

	& .image .caption {
		align-items: center;
		bottom: 0;
		color: var(--wp--preset--color--white);
		display: flex;
		height: auto;
		padding: 20px;
		position: absolute;
		transition: .25s ease-in-out;
		width: 100%;
		z-index: 0;
		&::before {
			content: '';
			background-color: var(--wp--preset--color--blue);
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			transition: .25s ease-in-out;
			width: 0;
			z-index: -1;
		}
	}
	& .image .caption i {
		margin-left: 7px;
		position: relative;
		right: 0;
		top: 0;
		transition: .25s ease-in-out;
	}

	& .image:hover .caption {
		color: var(--wp--preset--color--white);
		&::before {
			content: '';
			background-color: var(--wp--preset--color--blue);
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: -1;
		}
	}
	& .image:hover .caption i {
		right: -10px;
	}

}

@media screen and (max-width: 992px) {
	.quicklinks-block .quicklinks-images .image {
		flex-basis: calc(50% - 7.5px) !important;
	}
}

@media screen and (max-width: 662px) {
	.quicklinks-block .quicklinks-images .image {
		flex-basis: 100% !important;
	}
}