.page-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--secondary-color);
  background-size: cover;
  background-position: center;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--background-color) 96%, transparent) 0%,
      color-mix(in srgb, var(--background-color) 92%, transparent) 38%,
      color-mix(in srgb, var(--background-color) 62%, transparent) 60%,
      transparent 100%
    ),
    radial-gradient(
      680px 420px at 14% 18%,
      color-mix(in srgb, var(--button-color) 18%, transparent),
      transparent 70%
    );
  pointer-events: none;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: none !important;
}

.page-hero-message {
  z-index: 1;
  max-width: min(46vw, 620px);
  padding: clamp(20px, 2.4vw, 34px);
  border-radius: 28px;
  background: color-mix(in srgb, var(--background-color) 90%, white 10%);
  border: 1px solid color-mix(in srgb, var(--dark-background-color) 8%, transparent);
  box-shadow: 0 20px 52px rgba(86, 43, 16, 0.14);
  color: var(--dark-background-color);
  text-shadow: none;
}

.hero--center {
  top: 50%;
  left: clamp(20px, 6vw, 84px);
  transform: translateY(-50%);
  text-align: left;
  width: min(90%, 620px);
}

.hero--top-left {
  top: clamp(20px, 4vw, 52px);
  left: clamp(20px, 6vw, 84px);
  transform: none;
  text-align: left;
  width: min(90%, 620px);
}

.hero--top-right {
  top: clamp(20px, 4vw, 52px);
  right: clamp(20px, 6vw, 84px);
  left: auto;
  transform: none;
  text-align: right;
  width: min(90%, 620px);
}

.hero--bottom-left {
  bottom: clamp(20px, 4vw, 52px);
  left: clamp(20px, 6vw, 84px);
  top: auto;
  transform: none;
  text-align: left;
  width: min(90%, 620px);
}

.hero--bottom-right {
  bottom: clamp(20px, 4vw, 52px);
  right: clamp(20px, 6vw, 84px);
  left: auto;
  top: auto;
  transform: none;
  text-align: right;
  width: min(90%, 620px);
}

@media (max-width: 768px) {
  .page-hero::after {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--background-color) 32%, transparent) 0%,
        color-mix(in srgb, var(--background-color) 90%, transparent) 60%,
        color-mix(in srgb, var(--background-color) 96%, transparent) 100%
      ),
      radial-gradient(
        520px 320px at 50% 20%,
        color-mix(in srgb, var(--button-color) 14%, transparent),
        transparent 72%
      );
  }

  .page-hero-message {
    max-width: min(90%, 560px);
    width: min(90%, 560px);
    padding: 20px 18px;
    border-radius: 22px;
  }

  .hero--center {
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .hero--top-left,
  .hero--top-right,
  .hero--bottom-left,
  .hero--bottom-right {
    left: 50%;
    right: auto;
    text-align: center;
    transform: translateX(-50%);
  }
}