.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(60vh, 560px);
  padding: 48px 24px;
  color: var(--on-image-color);
  background-color: var(--dark-color);
  isolation: isolate;
}

.hero picture {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 65%), rgb(0 0 0 / 0%) 70%);
}

.hero-body {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
}

.hero h1,
.hero h2 {
  margin-top: 0;
  font-size: var(--heading-font-size-xxl);
}

.hero a:any-link {
  color: inherit;
}

.hero a.button.primary {
  border-color: var(--on-image-color);
  background-color: var(--on-image-color);
  color: var(--text-color);
}

@media (width >= 900px) {
  .hero {
    padding: 64px 32px;
  }
}