/* First hero iteration: original content, split layout, imagery and brand. */
#hero .intro-copy {
  container-type: inline-size;
  grid-template-columns: minmax(0, 1fr);
}

#hero .intro-title {
  max-width: 100%;
  text-wrap: balance;
}

#hero .intro-proof {
  width: min(100%, 640px);
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 20px);
}

#hero .intro-proof span {
  display: block;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #696969;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.5;
}

#hero .intro-proof span + span {
  border-left: 1px solid rgba(176, 77, 247, .25);
  padding-left: clamp(10px, 1vw, 20px);
}

@media (min-width: 901px) {
  #hero .intro-copy {
    width: min(100%, 800px);
    max-width: none;
    align-content: center;
    padding: 112px clamp(28px, 3vw, 64px) 96px;
  }

  #hero .intro-title {
    font-size: min(clamp(3rem, 4.5vw, 5rem), 12.5cqi);
  }

  html[lang="ru"] #hero .intro-title {
    font-size: min(clamp(2.5rem, 4.5vw, 4.5rem), 10.3cqi);
  }

  #hero .intro-lead {
    max-width: 32rem;
  }

  /* Let the composition determine height, rather than the image's aspect ratio. */
  #hero .intro-media img {
    position: absolute;
    inset: 0;
    min-height: 0;
  }
}

@media (max-width: 900px) {
  #hero .intro-title {
    font-size: min(clamp(2.25rem, 10.6vw, 3.95rem), 12.5cqi);
  }

  html[lang="ru"] #hero .intro-title {
    font-size: min(clamp(2rem, 10vw, 3.6rem), 10.3cqi);
  }
}

@media (max-width: 760px) {
  #hero .intro-proof span {
    font-size: .6rem;
  }
}