/* 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;
            }