.block-hero {
	background-color: black;
	display: flex;
	flex-direction: column;
	background-repeat: no-repeat;
	background-image: url('/img/cms/dallah3.webp');
	background-position: bottom left;
	background-size: auto 50%;
	margin-top:-20px;
	min-height: calc(100vh - 80px);
	> div {
		flex:1;
	}
	& .hero-content {
		padding: 1rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1rem;
		
		> *{
			padding:0;
			margin:0;
		}
		
		& h1{
			font-family: Reem Kufi,serif;
			font-optical-sizing: auto;
			font-style: normal;
			font-weight: 700;
			font-size: clamp(1.5rem,8vw,2.75rem);
			color: wheat;
		}
		
		& p {
			color: white;
			font-size: clamp(1.25rem,4vw,1.5rem);
			font-weight: 700;
		}
		& a:last-child {
			background-color: var(--coral);
			color: white;
			display: block;
			width: fit-content;
			padding: 0.5em 1em;
			font-weight: bold;
			text-decoration: none;
			border-radius: 3px;
			font-size: clamp(1rem, 4vw, 1.25rem);
		}
		
	}
	
}

@media screen and (min-width: 768px) {
    .block-hero {
        flex-direction: row;
        background-size: 100% auto;
    }
}