.hero {
  position: relative;
  width: 100%;
  height: 50vh;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2ch;
  background: linear-gradient(transparent, oklch(0.15 0 0 / 0.6));
  color: var(--chalk-100);
  font-weight: var(--weight-medium);
  z-index: 2;
}

.hero__content {
  max-width: 140ch;
  margin: 0 auto;
  padding-inline: 0;
}

.hero__title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  margin: 0;
}

.hero__subtitle {
  font-size: var(--text-lg);
  margin: 0.25rem 0 0;
  opacity: 0.9;
}

@media (min-width: 100ch) {
  .hero {
    height: 40vh;
  }

  .hero__overlay {
    padding: 2rem;
  }

  .hero__content{
    padding-inline: var(--inline-space);
  }
}