/* WHY US */

.why-us h2 {
	margin-bottom: 5px;
}

.why-us__content {
	display: flex;
	gap: 60px;
}

.why-us__content img {
	max-width: 727px;
	object-fit: contain;
	margin-top: 50px;
}

.why-us__cards {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(5, auto);
	gap: 15px;
}

.why-us__card {
	border: 5px solid var(--site-dark-accent-color);
	background-color: var(--site-white-accent-color);
	border-radius: var(--site-border-radius);
	padding: 40px;

	display: flex;
	flex-direction: column;
	gap: 30px;
}

.why-us__cards .why-us__card:nth-child(1) {
	grid-column: 1 / span 3;
	grid-row: 1 / span 3;
}

.why-us__cards .why-us__card:nth-child(2) {
	grid-column: 4 / span 3;
	grid-row: 2 / span 2;
}

.why-us__cards .why-us__card:nth-child(3) {
	grid-column: 2 / span 4;
	grid-row: 4 / span 2;
}

.why-us .decor-1 {
	top: 25px;
	right: 337px;
}
.why-us .decor-2 {
	bottom: 30px;
	left: 720px;
}
.why-us .decor-3 {
	top: 90px;
	right: 160px;
}
.why-us .decor-4 {
	bottom: 200px;
	left: 620px;
}
.why-us .decor-5 {
	top: 400px;
	right: -190px;
}

@media (max-width: 1600px) {
	.why-us__content img {
		max-width: 50%;
	}

	.why-us__cards .why-us__card:nth-child(1) {
		grid-column: 1 / span 6;
		grid-row: auto;
	}

	.why-us__cards .why-us__card:nth-child(2) {
		grid-column: 1 / span 6;
		grid-row: auto;
	}

	.why-us__cards .why-us__card:nth-child(3) {
		grid-column: 1 / span 6;
		grid-row: auto;
	}

	.why-us .decor-1 {
		right: 40px;
	}
}

@media (max-width: 1440px) {
	.why-us__card {
		padding: 30px;
		gap: 20px;
	}

	.why-us .decor-2 {
		bottom: -15px;
		left: 320px;
	}

	.why-us__content img {
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.why-us h2 {
		margin-bottom: 30px;
	}

	.why-us__content {
		flex-direction: column;
		gap: 30px;
	}

	.why-us__content img {
		margin-top: 0;
		max-width: 100%;
	}

	.why-us__cards {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.why-us__card {
		padding: 25px 35px;
		gap: 30px;
		flex-direction: row;
		align-items: center;
	}

	.why-us__card-number {
		font-weight: 600;
		font-size: 75px;
		line-height: 90%;
		letter-spacing: -5%;
	}

	.why-us .decor-1 {
		right: 30px;
		width: 50px;
	}
	.why-us .decor-2 {
		display: none;
	}
}