/*
******** ------------------------------ **** SOLUTION ****
*/

.solution {
	background-color: var(--clr-accent-2);
	grid-column: full-width;
}

.solution__content {
	--grid-gap: 0;
	--grid-columns-md: 5;
	--grid-columns-lg: 7;

	max-inline-size: min(100vw, 2200px);
	margin-inline: auto;
	position: relative;
}

.solution__figure {
	@media screen and (min-width: 769px) { grid-column: 1 / 3; }
	@media screen and (min-width: 1025px) { grid-column: 1 / 4; }
}

.solution__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.solution__copy {
	padding-inline: clamp(1rem, 5vw, 5rem);
	padding-block: clamp(3rem, 5vw, 5rem);

	@media screen and (min-width: 769px) {
		grid-column: 3 / 7;
	}

	@media screen and (min-width: 1025px) {
		grid-column: 4 / 8;
	}
}

.solution__list {
	--stack-gap: 2rem;

	list-style: none;
	padding: 0;
}

.solution__arrow {
	--arrow-inline-end: 4%;

	@media screen and (min-width: 769px) {
		--arrow-rotation: 30deg;
		--arrow-block-end: -10rem;
		--arrow-inline-end: 30%;
	}

	@media screen and (min-width: 1025px) {
		--arrow-block-end: -10rem;
		--arrow-inline-end: 35%;
	}
}

.solution--methodik {
	& .solution__figure {
		object-position: left;
		
		@media screen and (min-width: 769px) {
			grid-row: 1;
			grid-column: 4 / 7;
		}

		@media screen and (min-width: 1025px) {
			grid-column: 5 / 8;
		}
	}

	& .solution__copy {
		@media screen and (min-width: 769px) {
			grid-row: 1;
			grid-column: 1 / 4;
		}

		@media screen and (min-width: 1025px) {
			grid-column: 1 / 5;
		}
	}

	& .solution__arrow {
		--arrow-rotation: 20deg;
		--arrow-inline-end: 10%;
		--arrow-block-end: -7rem;

		@media screen and (min-width: 769px) {
			--arrow-rotation: 3deg;
			--arrow-block-end: -10rem;
			--arrow-inline-end: 38%;
		}

		@media screen and (min-width: 1025px) {
			--arrow-block-end: -9rem;
			--arrow-inline-end: 83%;

			img {
				transform: scaleX(-1);
			}
		}
	}
}

.solution--eignung {
	background-color: var(--clr-accent-1);
	color: white;
}