
.acf_section--navigation_grid .navigation_grid_grid {
	display: grid;
	gap: var(--universal-gap);
}

.navigation_grid_container {
	display: grid;
	gap: calc(var(--universal-gap)/2);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	/* column-count: 5; */
}

@media (max-width: 800px) {
	.navigation_grid_container {
		gap: calc(var(--universal-gap)/1);
	}
}

.ng_column_head {
	background-color: var(--color-blue);
	color: var(--color-white);
	position: relative;
	height: auto;
	width: 100%;
	display: inline-block;
}

.navigation_grid_container.with-image .ng_column_head::before {
	content: '';
	display: inline-block;
	margin-top: 100%;
	width: 100%;
}


.ng_column_head .ng_column_headline {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--color-blue);
	padding: calc(var(--universal-gap)*0.6) calc(var(--universal-gap)*0.4);
}

@media (max-width: 800px) {
	.ng_column_head .ng_column_headline {
		padding: calc(var(--universal-gap)*1.2) calc(var(--universal-gap)*1);
	}
}

.ng_column_head--image .ng_column_headline {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	z-index: 1;
	writing-mode:vertical-rl;
	transform: rotate(-180deg);
}

@media (max-width: 800px) {
	.navigation_grid_container.with-image .ng_column_head::before {
		margin-top: 75%;
	}

}


.ng_column_head--image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ng_column_links {
	display: grid;
	grid-template-columns: 1fr;
}

.ng_link {
	width: 100%;
	border-bottom: 1px solid var(--color-table-grey);
	padding: calc(var(--universal-gap)/2);
	background-color: var(--color-white);
	display: flex;
	justify-content: space-between;
	font-weight: var(--fw-normal);
	gap: calc(var(--universal-gap)/2);
	color: var(--color-blue);
	hyphens: auto;
}

@media (max-width: 800px) {
	.ng_link {
		padding: calc(var(--universal-gap)/1);
	}
}

.navigation_grid_grid.ng_link_color--grey .ng_link {
	color: var(--color-dark-grey);
}

.ng_link:hover {
	text-decoration: none;
}

.ng_link::after {
	content: var(--arrow-right);
	font-family: var(--ff-icon-font);
	padding-right: 0px;
	padding-left: 10px;
	transition: padding 600ms ease;
}

.ng_link:hover::after {
	padding-right: 10px;
	padding-left: 0px;
}

.ng_link:last-of-type {
	border-bottom: none;
}
