/* Shared gradient hero for injectable procedure pages */

.subhero.subhero--gradient {
  background:
    radial-gradient(
      circle at 78% 28%,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.12) 24%,
      rgba(255, 255, 255, 0) 48%
    ),
    linear-gradient(
      100deg,
      #756759 0%,
      #95836f 30%,
      #c4ad8e 62%,
      #eadfc9 100%
    );
}

.subhero.subhero--gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(43, 35, 29, 0.18) 0%,
    rgba(43, 35, 29, 0.06) 44%,
    rgba(43, 35, 29, 0) 72%
  );
}

.subhero.subhero--gradient .subhero__inner {
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .subhero.subhero--gradient {
    background:
      radial-gradient(
        circle at 75% 18%,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.08) 28%,
        rgba(255, 255, 255, 0) 52%
      ),
      linear-gradient(
        145deg,
        #76685b 0%,
        #a18d74 48%,
        #dfd0b7 100%
      );
  }

  .subhero.subhero--gradient::after {
    background: linear-gradient(
      180deg,
      rgba(43, 35, 29, 0.14) 0%,
      rgba(43, 35, 29, 0.04) 55%,
      rgba(43, 35, 29, 0) 100%
    );
  }
}