/* Shared visual language for the heroes on the secondary pages. */
.page-hero {
  background-color: var(--navy);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(rgba(117, 166, 228, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 166, 228, .2) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 82%);
}

.page-hero::after {
  width: 610px;
  height: 610px;
  right: -190px;
  top: -105px;
  box-shadow: 0 0 0 78px rgba(28, 98, 205, .08), 0 0 0 155px rgba(28, 98, 205, .04);
}

@media (max-width: 760px) {
  .page-hero::after { right: -350px; }
  .page-hero::before { mask-image: none; }
}