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

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

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

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

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