/* Full-viewport image that preserves aspect ratio */ html, body { height: 100%; margin: 0; } .hero { position: fixed; inset: 0; /* top:0; right:0; bottom:0; left:0; */ overflow: hidden; z-index: 0; background: #000; } /* img fills viewport, preserves aspect ratio and is centered */ .hero__img { width: 100%; height: 100%; object-fit: cover; /* cover preserves aspect ratio and fills */ object-position: center; display: block; } /* page content sits above the image */ .content { width: 30rem; position: relative; z-index: 2; color: #fff; padding: 1rem; min-height: 20vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: left; align-items: left; text-align: left; } .gradient-fullscreen { z-index: 1; position: fixed; inset: 0; /* top:0; right:0; bottom:0; left:0; */ pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 70%); } .full-screen-link { position: fixed; inset: 0; /* top:0; right:0; bottom:0; left:0; */ width: 100%; height: 100%; z-index: 9999; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }