.hero-card{width:100%;border-radius:12px;overflow:hidden;margin:0 0 18px;box-shadow:0 8px 30px rgba(0,0,0,0.18);background:#111}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:120px;gap:6px}
.hero-grid .col{display:grid;gap:6px}
.hero-item{background-size:cover;background-position:center;height:100%;min-height:120px;border-radius:6px;cursor:pointer;transition:transform .25s, box-shadow .25s}
.hero-item:hover{transform:scale(1.02);box-shadow:0 10px 30px rgba(0,0,0,0.35)}
.hero-grid .large{grid-row:span 2;min-height:260px}
.hero-caption{padding:14px;background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.02));color:#eee}
.hero-caption h2{margin:0 0 6px}
/* Simple modal viewer */
.img-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:9999}
.img-overlay img{max-width:95%;max-height:90%;border-radius:6px;box-shadow:0 14px 60px rgba(0,0,0,0.6)}
.img-overlay .close{position:fixed;top:18px;right:20px;color:#fff;font-size:20px;background:rgba(0,0,0,0.4);padding:6px 10px;border-radius:6px;cursor:pointer}
@media(min-width:900px){.hero-grid{grid-template-columns:1fr 1fr  }}