.mdx-hero {
  position: relative;
  z-index: 0; /* create a stacking context below header/tabs */
  margin: 0;
  padding: 0;
  /* Crop any background overflow strictly to the hero block */
  overflow: hidden;
}

/* Pull hero up under the header + tabs so the image is visible behind both */
.mdx-hero {
  margin-top: calc(-1 * (var(--md-header-height, 3.2rem) + var(--md-tabs-height, 0px) ));
  padding-bottom: calc(var(--md-header-height, 3.2rem) + var(--md-tabs-height, 0px));
  /*padding-bottom: 2rem;*/
}
.mdx-hero__bg {
  height: 70vh;             /* adjust height */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; /* prevent tiling */
  width: 100vw;
  position: relative;
  z-index: 0;               /* keep background behind content, header, and tabs */
  left: 50%;
  margin-left: -50vw;  /* full-bleed */
  opacity: var(--hero-opacity, 1);
  transition: opacity 1s linear;
  will-change: opacity;
}
.mdx-hero__content {
  position: relative;
  z-index: 1;               /* ensure hero text stays under header/tabs (which are >1) */
  margin-top: -260px;        /* adjust to place text on image */
  max-width: 40rem;
  padding-left: 1rem;        /* add left spacing so elements aren't at the border */
  padding-right: 1rem;        /* add left spacing so elements aren't at the border */
  color: #111;               /* make content text darker */
  display: flex;             /* stack title and subtitle while allowing content-based width */
  flex-direction: column;
  align-items: flex-start;   /* prevent headings from stretching to full width */
}

.mdx-hero__content h1,
.mdx-hero__content h2,
.mdx-hero__content h3,
.mdx-hero__content p {
  color: inherit;            /* ensure headings and paragraphs use the darker text */
}
.mdx-hero__content h1,
.mdx-hero__content h3 {
  color: inherit;            /* ensure headings and paragraphs use the darker text */
  background-color: rgba(255, 255, 255, 0.7);
  display: inline-block;     /* background only wraps the text */
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Spacing between hero title and subtitle */
.mdx-hero__content h1 {
  /* bottom margin controls the gap above the subtitle */
  margin: 0 0 var(--hero-title-gap, 0.4rem) 0;
}
.mdx-hero__content h3 {
  /* top margin pairs with the h1 bottom margin to form total spacing */
  margin: var(--hero-subtitle-top, 0.2rem) 0 0 0;
}