/* Phase 1 media optimization: responsive WebP backgrounds and picture wrappers. */

.lp-responsive-bg {
  background-image: var(--lp-bg-desktop);
}

.lp-hero-bg-01 {
  background-image: url("media/hero/hero-01-1920.webp");
}

.lp-hero-bg-03 {
  background-image: url("media/hero/hero-03-1920.webp");
}

.lp-hero-bg-04 {
  background-image: url("media/hero/hero-04-1920.webp");
}

.lp-hero-bg-05 {
  background-image: url("media/hero/hero-05-1920.webp");
}

@media (max-width: 767px) {
  .lp-responsive-bg {
    background-image: var(--lp-bg-mobile, var(--lp-bg-desktop));
  }

  .lp-hero-bg-01 {
    background-image: url("media/hero/hero-01-768.webp");
  }

  .lp-hero-bg-03 {
    background-image: url("media/hero/hero-03-768.webp");
  }

  .lp-hero-bg-04 {
    background-image: url("media/hero/hero-04-768.webp");
  }

  .lp-hero-bg-05 {
    background-image: url("media/hero/hero-05-768.webp");
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .lp-responsive-bg {
    background-image: var(--lp-bg-tablet, var(--lp-bg-desktop));
  }

  .lp-hero-bg-01 {
    background-image: url("media/hero/hero-01-1280.webp");
  }

  .lp-hero-bg-03 {
    background-image: url("media/hero/hero-03-1280.webp");
  }

  .lp-hero-bg-04 {
    background-image: url("media/hero/hero-04-1280.webp");
  }

  .lp-hero-bg-05 {
    background-image: url("media/hero/hero-05-1280.webp");
  }
}

@media (min-width: 1800px) {
  .lp-responsive-bg {
    background-image: var(--lp-bg-large, var(--lp-bg-desktop));
  }

  .lp-hero-bg-01 {
    background-image: url("media/hero/hero-01-2400.webp");
  }

  .lp-hero-bg-03 {
    background-image: url("media/hero/hero-03-2400.webp");
  }

  .lp-hero-bg-04 {
    background-image: url("media/hero/hero-04-2400.webp");
  }

  .lp-hero-bg-05 {
    background-image: url("media/hero/hero-05-2400.webp");
  }
}

.lp-interactive-showcase__image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.lp-company-facts__portrait picture {
  display: block;
  width: 100%;
  height: 100%;
}