/*---------------------------------------
  BACKGROUND MEDIA
  Tratamiento de imagen/video usados como fondo de
  una sección (oscurecidos con brightness para que
  el texto encima sea legible).

  El div envoltorio (.img-wrap/.video-wrap) es el que
  se posiciona con inset:0 — eso sí estira un elemento
  normal (no reemplazado) para cubrir a su ancestro sin
  importar si ese ancestro tiene una altura explícita o
  depende de su contenido (p. ej. .hero-section_2).
  La imagen/video de adentro es un hijo normal (no
  position:absolute) al 100% de ancho/alto: un <img> o
  <video> con ambas dimensiones en auto cae a su tamaño
  intrínseco si se posiciona directamente con solo
  inset:0, así que necesita este envoltorio ya resuelto.
-----------------------------------------*/
.img-wrap,
.video-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.custom-img,
.custom-img_2,
.custom-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-img {
    filter: brightness(0.5);
}

.custom-img_2 {
    filter: brightness(0.3);
}

.custom-video {
    filter: brightness(0.5);
}