.ipf-solutioncards {
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	padding: 2em 5px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	box-sizing: border-box;
	& * { box-sizing: border-box; }
}

@media (min-width: 512px) {
	.ipf-solutioncards { grid-template-columns: 1fr 1fr;
		max-width: 640px }
}
@media (min-width: 640px) {
	.ipf-solutioncards { grid-template-columns: 1fr 1fr 1fr;
		max-width: 960px }
}
@media (min-width: 960px) {
	.ipf-solutioncards { grid-template-columns: 1fr 1fr 1fr 1fr;
		max-width: 1280px }
}

.ipf-solutioncards .ipf-solutioncard {
	width: 100%; aspect-ratio: 1 / 1; padding: 1em;
	display: grid; grid-template-columns: auto; gap: 1em;
	background: white; border: 2px solid white; border-radius: 10px;
	position: relative;

	&:hover { border-color: var(--ipfRot) }

	a.link { display: block; position: absolute; top: 0; right: 0;
		left: 0; bottom: 0 }

	& > img { aspect-ratio: 5 / 4; object-fit: contain;
		width: 95%; margin: 0 auto;
		transition: transform 300ms ease-out, filter 300ms ease-out;
		transform: scale(1); filter: grayscale(50%) }
	&:hover > img { transform: scale(1.05); filter: grayscale(0%) }
	.caption { text-align: center; font-weight: bold; color: var(--schwarz);
		display: flex; flex-direction: row; align-items: end;
		justify-content: center }
	.ipf-solutioncard-info { position: absolute; top: 15px; right: 15px;
		font-size: 30px; color: #ccc;
		cursor: pointer }
	.ipf-solutioncard-info i { background-repeat: no-repeat;
		display: block; width: 100%; height: 100%;
		transition: all 200ms ease; transform: scale(1);
		background-image: url(data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjY2NjIiBkPSJNNDA2LjUsMEgxMDUuNUM0Ny4yMywwLDAsNDcuMjMsMCwxMDUuNXYzMDFjMCw1OC4yNyw0Ny4yMywxMDUuNSwxMDUuNSwxMDUuNWgzMDFjNTguMjcsMCwxMDUuNS00Ny4yMywxMDUuNS0xMDUuNVYxMDUuNWMwLTU4LjI3LTQ3LjIzLTEwNS41LTEwNS41LTEwNS41Wk0yNTYsODRjMjMuNzUsMCw0MywxOS4yNSw0Myw0M3MtMTkuMjUsNDMtNDMsNDMtNDMtMTkuMjUtNDMtNDMsMTkuMjUtNDMsNDMtNDNaTTMwOS43NSw0MjhoLTEwNy41Yy0xNy44NywwLTMyLjI1LTE0LjM4LTMyLjI1LTMyLjI1czE0LjM4LTMyLjI1LDMyLjI1LTMyLjI1aDMyLjI1di04NmgtMzIuMjVjLTE3Ljg3LDAtMzIuMjUtMTQuMzgtMzIuMjUtMzIuMjVzMTQuMzgtMzIuMjUsMzIuMjUtMzIuMjVoNjQuNWMxNy44NywwLDMyLjI1LDE0LjM4LDMyLjI1LDMyLjI1djExOC4yNWgxMC43NWMxNy44NywwLDMyLjI1LDE0LjM4LDMyLjI1LDMyLjI1cy0xNC4zOCwzMi4yNS0zMi4yNSwzMi4yNVoiLz48L3N2Zz4=) }
	.ipf-solutioncard-info:hover i { transform: scale(1.1);
		color: var(--ipfRot);
		background-image: url(data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZTMwNTEzIiBkPSJNNDA2LjUsMEgxMDUuNUM0Ny4yMywwLDAsNDcuMjMsMCwxMDUuNXYzMDFjMCw1OC4yNyw0Ny4yMywxMDUuNSwxMDUuNSwxMDUuNWgzMDFjNTguMjcsMCwxMDUuNS00Ny4yMywxMDUuNS0xMDUuNVYxMDUuNWMwLTU4LjI3LTQ3LjIzLTEwNS41LTEwNS41LTEwNS41Wk0yNTYsODRjMjMuNzUsMCw0MywxOS4yNSw0Myw0M3MtMTkuMjUsNDMtNDMsNDMtNDMtMTkuMjUtNDMtNDMsMTkuMjUtNDMsNDMtNDNaTTMwOS43NSw0MjhoLTEwNy41Yy0xNy44NywwLTMyLjI1LTE0LjM4LTMyLjI1LTMyLjI1czE0LjM4LTMyLjI1LDMyLjI1LTMyLjI1aDMyLjI1di04NmgtMzIuMjVjLTE3Ljg3LDAtMzIuMjUtMTQuMzgtMzIuMjUtMzIuMjVzMTQuMzgtMzIuMjUsMzIuMjUtMzIuMjVoNjQuNWMxNy44NywwLDMyLjI1LDE0LjM4LDMyLjI1LDMyLjI1djExOC4yNWgxMC43NWMxNy44NywwLDMyLjI1LDE0LjM4LDMyLjI1LDMyLjI1cy0xNC4zOCwzMi4yNS0zMi4yNSwzMi4yNVoiLz48L3N2Zz4=) }
	.desc { opacity: 0; pointer-events: none; position: absolute;
		display: none; top: 50px; right: -128px; z-index: 1;
		line-height: 1.15; font-size: 12px }
	.desc p { line-height: 1.15; font-size: 12px; margin: .5em 0 }
	.desc::after { content: ''; display: block; position: absolute;
		top: -6px; width: 7.05px; height: 7.05px;
		border: 1px solid transparent; background: white;
		border-left-color: var(--ipfRot);
		border-top-color: var(--ipfRot);
		transform: rotate(45deg); left: calc(50% - 11px) }
	.right + .desc { right: 5px; left: auto }
	.right + .desc::after { left: auto; right: 17px }
	.left + .desc { left: 5px }
	.left + .desc::after { left: 17px }
	.ipf-solutioncard-info.open + .desc {
		display: block; width: 300px; padding: 1em; font-size: 14px;
		color: var(--schwarz); background: white;
		border: 1px solid var(--ipfRot);
		opacity: 1; pointer-events: auto }

	animation: ipf-solutioncard-in 200ms 800ms ease-in backwards;
	&:nth-child(0) { animation-delay: 0 }
	&:nth-child(1) { animation-delay: 100ms }
	&:nth-child(2) { animation-delay: 200ms }
	&:nth-child(3) { animation-delay: 300ms }
	&:nth-child(4) { animation-delay: 400ms }
	&:nth-child(5) { animation-delay: 500ms }
	&:nth-child(6) { animation-delay: 600ms }
	&:nth-child(7) { animation-delay: 700ms }
}

@keyframes ipf-solutioncard-in {
	from { opacity: 0; transform: translateX(-10%) }
	to { opacity: 1; transform: translateX(0) }
}