main.overview-page {
	height: 100%;
	min-height: 100vh;
	max-width: 2075px;
	width: 93%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	&.tools-services {
		.cards-container {
			.card {
				.infos-container {
					gap: 10px;
				}

				.description {
					margin-bottom: 0;
				}
			}
		}

		.footer {
			.link-button {
				display: none;
			}
		}
	}

	.cards-container {
		padding-top: 75px;

		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 50px;

		counter-reset: card;

		/* Pace items of second row to start from the right */
		> div:nth-child(5) {
			grid-column: 4 / span 1;
			grid-row: 2;
		}

		> div:nth-child(6) {
			grid-column: 3 / span 1;
			grid-row: 2;
		}

		> div:nth-child(7) {
			grid-column: 2 / span 1;
			grid-row: 2;
		}

		> div:nth-child(8) {
			grid-column: 1 / span 1;
			grid-row: 2;
		}

		> div {
			position: relative;

			&::after {
				content: "";
				position: absolute;
				right: -10px;
				top: 50%;
				transform: translate(100%, -50%) rotate(45deg);

				display: inline-block;
				height: 25px;
				width: 25px;

				border-style: solid;
				border-color: var(--color-dark-green);
				border-width: 4px 4px 0 0;
			}

			&:nth-child(4)::after {
				right: unset;
				top: unset;
				left: 50%;
				bottom: 0;
				transform: translate(-50%, 100%) rotate(135deg);
			}

			&:is(:nth-child(5), :nth-child(6), :nth-child(7))::after {
				right: unset;
				top: unset;
				left: -10px;
				bottom: 50%;
				transform: translate(-100%, -50%) rotate(-135deg);
			}

			&:nth-child(8)::after {
				display: none;
			}
		}


		.initial-card {
			.logo {
				width: 100%;

				img {
					width: 100%;
				}
			}

			> p {
				margin-top: 10px;
				font-size: 20px;
				text-align: center;
			}

			.icon-container {
				display: flex;
				margin-top: auto;
				gap: 10px;

				.icon {
					display: flex;
					align-items: center;
					gap: 10px;

					> div {
						width: 45px;
						height: 45px;
						aspect-ratio: 1;
						background: var(--color-green);
						padding: 4px;
						border-radius: 100px;
						display: flex;
						justify-content: center;
						align-items: center;

						img {
							filter: var(--filter-white);
							width: 100%;
						}
					}
				}
			}
		}

		.card {
			border: 5px solid var(--color-dark-green);
			padding: 20px 25px;
			display: flex;
			flex-direction: column;
			gap: 10px;

			.headline {
				color: var(--color-dark-green);
				font-size: 20px;
				text-transform: uppercase;
				font-family: "Bosch Sans Bold";
				display: inline-block;
				margin: 0;
				padding-inline: 8px;
				background: var(--color-white);
				max-width: 95%;
				white-space: wrap;
				text-align: center;
				width: max-content;

				position: absolute;
				top: -2px;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.description {
				font-family: "Bosch Sans Bold";
				color: var(--color-green);
				font-size: 17px;
				height: 60px;
				display: flex;
				align-items: center;
				padding-left: 71px;
				position: relative;
				margin-bottom: 10px;

				line-height: 1.2;
				white-space: normal;

				&::before {
					content: "0" counter(card);
					display: inline-block;
					counter-increment: card;
					font-size: 45px;
					width: 65px;
					position: absolute;
					left: 0;
				}
			}

			.infos-container {
				flex: 1 1 0px;
				display: flex;
				flex-direction: column;
				gap: 25px;

				.info {
					display: flex;
					align-items: center;
					gap: 20px;
					font-size: 17px;

					.info-icon {
						width: 45px;
						height: 45px;
						aspect-ratio: 1;
						background: var(--color-green);
						padding: 4px;
						border-radius: 100px;
						display: flex;
						justify-content: center;
						align-items: center;

						img {
							filter: var(--filter-white);
							width: 100%;
						}
					}

					> span {
						flex: 1 1 0px;
					}
				}
			}

			.link-button {
				align-self: flex-end;
			}
		}

		@media only screen and (max-width: 1600px) {
			gap: 40px;

			.initial-card {
				.logo {
					display: flex;
					justify-content: center;

					img {
						max-width: 450px;
					}
				}

				> p {
					font-size: 18px;
				}

				.icon-container {
					justify-content: center;
					flex-direction: column;
				}
			}

			.card {
				padding: 20px 15px;

				.description {
					padding-left: 60px;

					&::before {
						font-size: 37px;
						width: 45px;
					}
				}

				.infos-container {
					gap: 15px;

					.info {
						gap: 15px;
					}
				}
			}

			> div {
				position: relative;

				&::after {
					height: 20px;
					width: 20px;
				}
			}
		}

		@media only screen and (max-width: 1200px) {
			grid-template-columns: 1fr;

			.initial-card {
				.logo {
					display: flex;
					justify-content: center;

					img {
						max-width: 450px;
					}
				}

				.icon-container {
					justify-content: center;
				}
			}

			> div:nth-child(5),
			> div:nth-child(6),
			> div:nth-child(7),
			> div:nth-child(8) {
				grid-column: unset;
				grid-row: unset;
			}

			> div {
				position: relative;

				&::after {
					display: none;
				}
			}

			.card {
				padding: 15px;
				gap: 10px;

				.headline {
					font-size: 18px;
				}

				.description {
					padding-left: 55px;
					margin-bottom: 0;

					&::before {
						font-size: 35px;
						width: 40px;
					}
				}

				.infos-container {
					gap: 15px;

					.info {
						gap: 15px;
						font-size: 16px;

						.info-icon {
							width: 40px;
							height: 40px;
						}
					}
				}
			}
		}
	}
}

.footer {
	display: flex;
	justify-content: space-between;
	padding-block: 20px 40px;

	.special-links-container {
		display: flex;

		.special-link {
			display: flex;
			flex-direction: column;
			gap: 5px;
			position: relative;
			padding-right: 55px;

			.headline {
				font-size: 20px;
				text-transform: uppercase;
				font-family: "Bosch Sans Bold";
			}

			> div {
				display: flex;
				align-items: center;
				gap: 20px;
			}

			.subline {
				font-size: 16px;
				line-height: 22px;
				font-family: "Bosch Sans Bold";
			}
		}
	}

	.overview-link-container {
		display: flex;
		gap: 40px;
		align-items: flex-end;

		.overview-link {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			position: relative;
			padding-right: 45px;
			height: fit-content;

			.description {
				font-size: 17px;
				white-space: nowrap;
			}

			.link-button::after {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		> div:not(.overview-link) {
			display: flex;
			gap: 35px;
		}

		img {
			height: 40px;

			&.moon {
				cursor: pointer;
			}
		}
	}

	@media only screen and (max-width: 1700px) {
		padding-block: 15px;

		.link-button {
			font-size: 15px;

			&::after {
				width: 25px;
				height: 25px;
				background-size: 25px 25px;
			}
		}

		.special-links-container {
			gap: 40px;

			.special-link {
				padding-right: 0;
				padding-bottom: 20px;

				.headline {
					font-size: 16px;
				}

				.subline {
					font-size: 15px;
					line-height: 25px;
				}

				> div {
					flex-direction: column;
					align-items: flex-start;
					gap: 0;
				}

			}
		}

		.overview-link-container {
			align-items: flex-start;
			gap: 25px;

			> div:not(.overview-link) {
				gap: 25px;
			}
		}
	}

	@media only screen and (max-width: 1200px) {
		flex-direction: column;
		width: 90%;
		margin-block: 40px 20px;
		margin-inline: auto;
		gap: 20px;
		padding: 0;

		.special-links-container {
			flex-direction: column;
			gap: 30px;

			.special-link {
				padding-right: 0;

				.headline {
					font-size: 16px;
				}

				.subline {
					font-size: 15px;
					line-height: 25px;
				}

				.link-button {
					position: static;
					right: unset;
					bottom: unset;
				}
			}
		}

		.overview-link-container {
			flex-direction: column;
			align-items: flex-start;
			gap: 20px;

			.overview-link {
				align-items: flex-start;
				padding-right: 0;

				.link-button::after {
					position: static;
					transform: unset;
				}
			}

			img {
				height: 22px;
				align-self: flex-end;
			}
		}
	}
}