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

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