/* Reset essentials */
html, body {
  margin: 0;
  padding: 0;
}

/* HERO CONTAINER */
.hero-container {
  position: relative;
  width: 100%;
  max-height: 1080px;
  height: 100vh;
  min-height: 480px;
  overflow: hidden;
  background-color: #000;
}

/* MEDIA WRAPPER */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* MEDIA ELEMENTS */
.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* VIDEO SAFETY */
.hero-media video {
  autoplay: true;
  muted: true;
  loop: true;
  playsinline: true;
}

/* CAPTION */
.hero-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;

  padding: clamp(1rem, 4vw, 3rem);

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0)
  );

  color: #fff;
  box-sizing: border-box;
}

/* TYPOGRAPHY DEFAULTS */
.hero-caption h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.15;
}

.hero-caption p {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
}