/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Lock viewport */
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Container */
.hero {
    width: 100vw;
    height: 100vh;
}

/* Image handling (THIS is the key) */
.hero img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* shows full image on phones */
    object-position: center;
    display: block;
}

/* Desktop enhancement */
@media (min-width: 769px) {
    .hero img {
        object-fit: cover; /* cinematic look on large screens */
    }
}