:root {
	--home-header-height: 465px;
}

#home-container {
	background-image: url("../images/fondo-header.webp");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: var(--home-header-height);
}

#home-header-slogan {
	max-height: 90%;
	max-width: 90%;
}

#causes {
	.causes-item {
		width: 30%;
	}

	.causes-item.interactive {
		position: relative;
		cursor: pointer;

		img {
			transition: transform 0.4s ease;
			backface-visibility: hidden;
		}

		img.causes-back {
			position: absolute;
			top: 0;
			left: 0;
			transform: rotateY(180deg);
		}
	}

	.causes-item.interactive:hover {
		img.causes-front {
			transform: rotateY(180deg);
		}

		img.causes-back {
			transform: rotateY(0deg);
		}
	}
}

@media all and (max-width: 1250px) {
	#home-container {
		height: 425px;
	}
}

@media all and (max-width: 1050px) {
	#home-container {
		height: 400px;
	}
}

@media all and (max-width: 850px) {
	#home-container {
		height: 350px;
	}

	#causes .causes-item {
		width: 45%;
	}
}

@media all and (max-width: 710px) {
	#home-container {
		height: 325px;
	}
}

@media all and (max-width: 550px) {
	#home-container {
		height: 240px;
	}

	#causes .causes-item {
		width: 80%;
	}
}

@media all and (max-width: 450px) {
	#home-container {
		height: 200px;
	}
}