.hero {
  --hero-transparency-size: 150px;
  position: relative;
}

.hero.has-overlay {
  background-image: linear-gradient(
    to bottom,
    #fff 75%,
    /* Start solid white */ rgba(255, 255, 255, 0.8) 85%,
    rgba(255, 255, 255, 0.4) 92%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Background-image variant */
.hero--background-image {
  padding-bottom: calc(4 * var(--space-xxl));
  background: linear-gradient(to bottom, var(--white) 50%, transparent 80%);
}

/* Background image layer (absolutely positioned behind content) */
.hero-background-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Mask: fade in from transparent at top */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--hero-transparency-size));
  mask-image: linear-gradient(to bottom, transparent, #000 var(--hero-transparency-size));
}

/* Inner container */
.hero__container {
  align-items: center;
}

/* Info block — stacks heading, description, buttons */
.hero__container-info {
  display: flex;
  flex-direction: column;
  row-gap: var(--content-gap);
  align-items: center;
  padding-inline: var(--section-space-s);
}

@media (max-width: 480px) {
  .hero__container-info {
    align-items: stretch;
  }
}

/* Inner info container (heading grouping) */
.hero__inner-container-info {
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: var(--space-xs);
}

/* Heading */
.hero__heading {
  margin-top: 0;
  text-align: center;
  font-size: calc(1.5 * var(--h1));
}

/* Description / lede */
.hero__description {
  max-width: var(--width-60);
  text-align: center;
  font-size: var(--text-l);
}

/* Button container */
.hero__container-btn {
  display: flex;
  flex-direction: row;
  column-gap: var(--space-s);
  row-gap: var(--space-s);
  align-items: stretch;
}

@media (max-width: 480px) {
  .hero__container-btn {
    flex-direction: column;
  }
}