.page-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-muted);
  border-block-end: 1px solid var(--color-border);
  isolation: isolate;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(40rem, 60%);
  z-index: -1;
  background-color: var(--color-gold-500);
  opacity: 0.16;
  -webkit-mask: url("/static/illustrations/khatam.svg") center / 56px repeat, linear-gradient(to left, transparent, var(--color-black) 80%);
  -webkit-mask-composite: source-in;
  mask: url("/static/illustrations/khatam.svg") center / 56px repeat intersect, linear-gradient(to left, transparent, var(--color-black) 80%);
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-8) var(--space-12);
}

.page-hero__title {
  margin-block-start: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
}

.page-hero__lead {
  max-inline-size: 38rem;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}