.hero {
  background-image: url('../img/hero_section_bg.png');
  background-size: cover;
  background-position: center center;
  position: relative;
  isolation: isolate;
}

@supports (background-image: url('../img/hero_section_bg.webp')) {
  .hero {
    background-image: url('../img/hero_section_bg.webp');
  }
}

@supports (image-orientation: from-image) {
  .hero {
    background-image: url('../img/hero_section_bg.avif');
  }
}