.hero {
  position: relative;
  padding: 5rem 0;
  color: var(--color-white);
  background-image: url("https://images.unsplash.com/photo-1711632308710-f2e5bf722778?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkaWdpdGFsJTIwc2lnbmFnZSUyMHRvdGVtJTIwZGlzcGxheXxlbnwxfHx8fDE3NzUwNDk3NDJ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral");
  background-size: cover;
  background-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.hero__content {
  position: relative;
  z-index: 1;
}

.hero__inner {
  max-width: 48rem;
}

.hero__title {
  margin: 0 0 1.5rem;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 1.125;
}

.hero__text {
  margin: 0 0 4rem;
  font-size: 1.125rem;
  color: #e5e7eb;
}