.hero--about {
  background-color: #08110c;
  background-image: url('../../images/a10/hero-about-a10-2560.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@supports (background-image: image-set(url('image.webp') 1x)) {
  .hero--about {
    background-image: image-set(
      url('../../images/a10/hero-about-a10-2560.webp') 1x,
      url('../../images/a10/hero-about-a10-3840.webp') 2x
    );
  }
}

@media (max-width: 767px) {
  .hero--about {
    background-image: url('../../images/a10/hero-about-a10-768.webp');
  }

  @supports (background-image: image-set(url('image.webp') 1x)) {
    .hero--about {
      background-image: image-set(
        url('../../images/a10/hero-about-a10-768.webp') 1x,
        url('../../images/a10/hero-about-a10-1536.webp') 2x
      );
    }
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .hero--about {
    background-image: url('../../images/a10/hero-about-a10-1536.webp');
  }

  @supports (background-image: image-set(url('image.webp') 1x)) {
    .hero--about {
      background-image: image-set(
        url('../../images/a10/hero-about-a10-1536.webp') 1x,
        url('../../images/a10/hero-about-a10-2560.webp') 2x
      );
    }
  }
}