.hero {
  background-image: url("assets/projects/IMG_2393.webp");
  background-image: image-set(url("assets/projects/IMG_2393.avif") type("image/avif"), url("assets/projects/IMG_2393.webp") type("image/webp"));
  background-position: center 48%;
}

.about__image {
  background-image: url("assets/projects/IMG_6435.webp");
  background-image: image-set(url("assets/projects/IMG_6435.avif") type("image/avif"), url("assets/projects/IMG_6435.webp") type("image/webp"));
  background-position: center 42%;
}

@media (max-width: 760px) {
  .hero {
    background-position: center 45%;
    background-image: image-set(url("assets/projects/IMG_2393-mobile.avif") type("image/avif"), url("assets/projects/IMG_2393.webp") type("image/webp"));
  }

  .about__image {
    background-position: center 38%;
  }
}