/* Tantra Legacy hero artwork treatment. */
.hero {
  min-height: 820px;
  background:
    linear-gradient(90deg, rgba(7, 7, 7, .96) 0%, rgba(7, 7, 7, .82) 31%, rgba(7, 7, 7, .34) 61%, rgba(7, 7, 7, .12) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(11, 10, 8, .45) 22%, transparent 50%),
    url("../images/event-rise-of-trimurti.png") 58% center / cover no-repeat;
}

.hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 68% 31%, rgba(224, 159, 73, .14), transparent 24rem),
    linear-gradient(180deg, rgba(0, 0, 0, .32), transparent 26%);
  pointer-events: none;
}

.hero-glow {
  top: 29%;
  left: 48%;
  width: 520px;
  height: 520px;
  opacity: .7;
  background: rgba(211, 134, 40, .1);
}

.hero-content {
  max-width: 660px;
}

.hero-copy {
  max-width: 540px;
  color: #d8d2c8;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .85);
}

.server-card {
  background: rgba(12, 11, 9, .88);
}

@media (min-width: 1500px) {
  .hero {
    background-position: 63% center;
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 820px;
    background:
      linear-gradient(90deg, rgba(7, 7, 7, .93), rgba(7, 7, 7, .55) 65%, rgba(7, 7, 7, .2)),
      linear-gradient(0deg, var(--bg), transparent 47%),
      url("../images/event-rise-of-trimurti.png") 62% center / cover no-repeat;
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: 760px;
    background:
      linear-gradient(90deg, rgba(7, 7, 7, .92), rgba(7, 7, 7, .46)),
      linear-gradient(0deg, var(--bg), transparent 55%),
      url("../images/event-rise-of-trimurti.png") 61% center / auto 100% no-repeat,
      #090806;
  }

  .hero::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, .38), transparent 25%);
  }
}