/* Keep the home hero within one screen and its message above the fold. */
#البطل {
	height: calc(100vh - 5rem);
	height: calc(100svh - 5rem);
	min-height: calc(100vh - 5rem) !important;
	min-height: calc(100svh - 5rem) !important;
	box-sizing: border-box;
	padding-top: clamp(1.25rem, 3.5vh, 2.75rem) !important;
	padding-bottom: clamp(1.25rem, 3.5vh, 2.75rem) !important;
}

@media (max-width: 1023px) {
	#البطل > .container > .grid {
		gap: 0 !important;
	}

	#البطل > .container > .grid > div:last-child {
		display: none !important;
	}

	#البطل > .container > .grid > div:first-child {
		transform: translateY(clamp(-3rem, -6vh, -1.5rem));
	}
}

@media (min-width: 1024px) {
	#البطل {
		padding-top: clamp(1.25rem, 3.5vh, 2.5rem) !important;
		padding-bottom: clamp(1.25rem, 3.5vh, 2.5rem) !important;
	}

	#البطل > .container,
	#البطل > .container > .grid {
		height: 100%;
	}

	#البطل > .container > .grid > div:first-child {
		transform: translateY(clamp(-2.5rem, -3.5vh, -1.25rem));
	}

	#البطل > .container > .grid > div:last-child > .relative {
		max-width: clamp(16.5rem, 43svh, 21rem) !important;
	}
}

@media (max-width: 767px) {
	#البطل {
		height: auto;
	}

	#البطل > .container > .grid > div:first-child > :not([hidden]) ~ :not([hidden]) {
		margin-top: clamp(0.75rem, 2vh, 1rem) !important;
	}

	#البطل h1 {
		font-size: clamp(2rem, 10vw, 2.75rem);
		line-height: 1.12;
	}
}