body[data-service="media"] .service-hero,
body[data-service="event"] .service-hero,
body[data-service="link"] .service-hero {
  --hero-image: url("./assets/stream-studio.png");
}

body[data-service="wiki"] .service-hero {
  --hero-image: url("./assets/id-castle-key.png");
}

body[data-service="support"] .service-hero,
body[data-service="status"] .service-hero {
  --hero-image: url("./assets/admin-command-center.png");
}

body[data-service] .service-hero {
  background-image:
    linear-gradient(90deg, rgba(4, 18, 34, .99) 0%, rgba(5, 25, 45, .94) 46%, rgba(3, 17, 31, .32) 100%),
    var(--hero-image);
  background-position: center, center right;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

body[data-service="wiki"] .service-hero { background-position: center, 72% center; }
body[data-service="support"] .service-hero,
body[data-service="status"] .service-hero { background-position: center, 64% center; }

@media (max-width: 760px) {
  body[data-service] .service-hero {
    background-image:
      linear-gradient(0deg, rgba(4, 18, 34, .99) 0%, rgba(4, 18, 34, .88) 72%, rgba(3, 17, 31, .34) 100%),
      var(--hero-image);
    background-position: center, 68% center;
  }
}