:root {
    --home-header-height: 634px;
    --home-header-background: linear-gradient(to bottom, var(--color-text), var(--color-secondary));
}

#home-container,
#home-container-device {
    background: var(--home-header-background);
    margin: 0 auto;
    height: var(--home-header-height);
}

#home-container-device {
    display: none;
    height: 500px;
}

#home-container-device #title-img {
    margin-bottom: 12%;
    max-width: 65%;
}

#home-container-device #ilustration-img {
    position: absolute;
    bottom: -1px;
}

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

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

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

    #home-container-device {
		display: flex;
	}

	#home-page-map-img {
		display: none;
	}
}

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

	#home-container-device #title-img {
		max-width: 75%;
		margin-bottom: 8%;
	}

	#home-page-buttons {
		flex-direction: column;
		gap: 25px;
	}
}

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

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