/* V94 · LoLR Studio and LoLR Box first-screen banners only. */

#page-studio > .pd-hero,#page-box > .pd-hero {
  isolation: isolate;
  background-color: #02040d;
  background-repeat: no-repeat;
  background-position: center 50%;
  background-size: cover;
}

#page-studio > .pd-hero {
  background-image: url("/homepage/v157/assets/media/bdee0cd47b12f4751056.webp");
}

#page-box > .pd-hero {
  background-image: url("/homepage/v157/assets/media/12922dfcb71a823e4e17.webp");
}

/* Protect the left-side narrative and the full-width facts without hiding the products. */
#page-studio > .pd-hero::before,#page-box > .pd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 3, 14, .84) 0%, rgba(1, 3, 14, .72) 40%, rgba(1, 3, 14, .28) 68%, rgba(1, 3, 14, .08) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .05) 46%, rgba(0, 0, 0, .56) 100%);
}

#page-studio > .pd-hero > .shell,#page-box > .pd-hero > .shell {
  position: relative;
  z-index: 1;
}

#page-studio > .pd-hero h1,#page-box > .pd-hero h1 {
  color: #fff;
  text-shadow: none;
}

#page-studio > .pd-hero .pd-back,#page-studio > .pd-hero .pd-kick .cn,#page-box > .pd-hero .pd-back,#page-box > .pd-hero .pd-kick .cn {
  color: rgba(255, 255, 255, .72);
}

#page-studio > .pd-hero .pd-kick .en,#page-studio > .pd-hero .pd-facts em,#page-box > .pd-hero .pd-kick .en,#page-box > .pd-hero .pd-facts em {
  color: #79c4ff;
}

#page-studio > .pd-hero .pd-facts,#page-box > .pd-hero .pd-facts {
  border-top-color: rgba(255, 255, 255, .24);
}

@media (max-width: 1000px) {
  #page-studio > .pd-hero {
    background-position: 67% center;
  }

  #page-box > .pd-hero {
    background-position: 68% center;
  }

  #page-studio > .pd-hero::before,#page-box > .pd-hero::before {
    background:
      linear-gradient(90deg, rgba(1, 3, 14, .90) 0%, rgba(1, 3, 14, .76) 72%, rgba(1, 3, 14, .58) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, .62) 100%);
  }
}

@media (max-width: 620px) {
  #page-studio > .pd-hero {
    background-position: 74% center;
  }

  #page-box > .pd-hero {
    background-position: 76% center;
  }

  #page-studio > .pd-hero .lead,#page-box > .pd-hero .lead {
    box-sizing: border-box;
    padding-right: 64px;
  }

  #page-studio > .pd-hero::before,#page-box > .pd-hero::before {
    background:
      linear-gradient(90deg, rgba(1, 3, 14, .78), rgba(1, 3, 14, .68)),
      linear-gradient(180deg, rgba(1, 3, 14, .58) 0%, rgba(1, 3, 14, .72) 55%, rgba(1, 3, 14, .91) 100%);
  }
}