.hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* pull the hero up to remove the white gap */
  margin-top: -2.5rem;
}

.hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* remove the default top padding that causes the gap */
.md-content__inner {
  padding-top: 0 !important;
}

:root {
  --md-primary-fg-color: #3169e0;
  --md-primary-fg-color--dark: #3169e0;
  --md-primary-fg-color--light: #3169e0;
}

figure figcaption {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.5rem;
  text-align: center;
  font-style: italic;
}