/* Var Definitions */
.contentRelations {
	--bg-color: transparent;
	--font-color: var(--font-color-dark, #ffffff);		/* Schriftfarbe im Menü*/
	--hover-color: var(--logo-color-2, #ffffff);	/* Hover Linkfarbe im Menü*/
	--link-color: var(--font-color-light, #ffffff);
	--h1-color: var(--logo-color-1);
	--num-cols: 5;
	--gap-width: 20px;
}

.contentRelations .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	column-gap: var(--gap-width);
	row-gap: var(--gap-width);
}

.contentRelations .header {
	display: inline-block;
	margin-top: 10px;
	padding: 10px;
	font-size: 32px;
	font-weight: 600;
	color: white;
	background-color: var(--logo-color-1);
	border-radius: 10px 10px 0 0;
}

.contentRelations .item {
	display: block;
	position: relative;
 	border: 1px solid var(--logo-color-1);
 	padding: 13px;
	background-color: var(--bg-color);
	/* border-radius: 10px; */
	flex-grow: 0;
	box-sizing: border-box;
	flex-basis: calc( (100% / var(--num-cols)) - ( var(--gap-width) * (var(--num-cols) - 1) / var(--num-cols)));
	overflow: hidden;
	/*
	min-width: calc( (100% / var(--num-cols)) - ( var(--gap-width) * (var(--num-cols) - 1) / var(--num-cols)));
	width: max-content;
	*/
}
.contentRelations .item a { display: block; text-decoration: none; }
.contentRelations .item .pic  { width: 100%; }

.contentRelations .title {
	padding: 5px;
	font-size: 22px;
	color: var(--font-color);
	hyphens: auto;
}

/* animation */
.contentRelations .item img { transition: transform var(--transition-time) ease; }
.contentRelations .item:hover img { transform: scale(1.05,1.05); }


@media all and (max-width: 1000px) { .contentRelations { --num-cols: 4; } }
@media all and (max-width: 600px) { .contentRelations { --num-cols: 2; } }
@media all and (max-width: 300px) { .contentRelations { --num-cols: 1; } }