/* Rezerwuj miejsce na mapę przed załadowaniem Google Maps. */
#map {
  display: block;
  width: 100%;
  height: 450px;
}

#map > div {
  height: 100%;
}

/* Zachowaj proporcje obszaru wideo przed jego utworzeniem przez JS. */
#vid {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

#vid > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#fav-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
}

#fav-hero > #vid {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  pointer-events: none;
}

#fav-hero > #vid > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#fav-hero > #fav-leadwrap {
  position: relative;
  z-index: 1;
}

/* Ekran pośredni: bez wideo, leady pozostają widoczne. */
@media (min-width: 768px) and (max-width: 991px) {
  #fav-hero > #vid {
    display: none;
  }
}

/* Mały ekran: leady znikają. */
@media (max-width: 767px) {
  #fav-hero > #fav-leadwrap {
    display: none;
  }
}

@media (min-width: 992px) {
  #fav-hero {
    position: relative;
    width: 100%;
    height: clamp(480px, 56.25vw, 2160px);
  }

  #fav-hero > #vid {
    width: 100%;
    height: 100%;
  }

  #fav-hero > #fav-leadwrap {
    position: absolute;
    inset: auto 0 8px;
    z-index: 1;
    width: 100%;
    height: 65%;
    margin: 0;
    background: transparent;
  }

  #fav-leadwrap .favth-container {
    width: 100%;
    max-width: none;
  }

  #fav-leadwrap > div,
  #fav-leadwrap .favth-container,
  #fav-leadwrap .favth-row,
  #fav-leadwrap #fav-lead,
  #fav-leadwrap #fav-lead > [id^="fav-lead"],
  #fav-leadwrap #fav-lead .moduletable {
    height: 100%;
  }

  #fav-leadwrap #fav-lead,
  #fav-leadwrap #fav-lead > [id^="fav-lead"] {
    display: flex;
  }

  #fav-leadwrap #fav-lead > [id^="fav-lead"] > .moduletable {
    width: 100%;
  }
}

@media (min-width: 992px) {
  #fav-hero > #fav-leadwrap {
    height: 70%;
  }
}

@media (min-width: 1150px) {
  #fav-hero > #fav-leadwrap {
    height: 65%;
  }
}

@media (min-width: 1352px) {
  #fav-hero > #fav-leadwrap {
    height: 54%;
  }
}

@media (min-width: 1600px) {
  #fav-hero > #fav-leadwrap {
    height: 45%;
  }
}

@media (min-width: 2000px) {
  #fav-hero > #fav-leadwrap {
    height: 40%;
  }
}

@media (min-width: 2500px) {
  #fav-hero > #fav-leadwrap {
    height: 35%;
  }
}