.hero{position:relative;display:grid;align-items:center;overflow:hidden}
.hero-media{width:100%;height:320px;object-fit:cover;border-radius:calc(var(--radius) + 4px);box-shadow: var(--shadow);display:block}
.hero .hero-content{position:absolute;left:24px;bottom:8px;color:var(--text);background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35));padding:14px;border-radius:10px;z-index:2}
.hero-media{z-index:1}

@media(min-width:768px){.hero-media{height:420px}}

/* Mobile adjustments: ensure hero-content never overflows the viewport */
@media(max-width:768px){
	.hero .hero-content{
		left:12px;
		right:12px;
		bottom:12px;
		padding:10px;
		box-sizing:border-box;
		max-width:none;
		border-radius:8px;
		/* slightly smaller text on small screens */
	}
	.hero .hero-content h1{font-size:1.6rem;line-height:1.1}
}