.hero-image {
  background-image: linear-gradient(90deg, rgba(14, 18, 28, .96), rgba(14, 18, 28, .65) 33%, transparent 70%), linear-gradient(0deg, rgba(14, 18, 28, .68), transparent 55%), url('assets/hero-companion-768.jpg');
}

@media (min-width: 761px) {
  .hero-image {
    background-image: linear-gradient(90deg, rgba(14, 18, 28, .96), rgba(14, 18, 28, .65) 33%, transparent 70%), linear-gradient(0deg, rgba(14, 18, 28, .68), transparent 55%), url('assets/hero-companion-1024.jpg');
  }
}

.tonight-image {
  background-image: linear-gradient(0deg, var(--night2), transparent 35%), url('assets/two-sides-of-tonight.jpg');
}

@supports (background-image: image-set("x" 1x)) {
  .tonight-image {
    background-image: linear-gradient(0deg, var(--night2), transparent 35%), image-set(url('assets/two-sides-of-tonight.avif') type('image/avif') 1x, url('assets/two-sides-of-tonight.jpg') type('image/jpeg') 1x);
  }
}