.quarto-title-banner {
  min-height: clamp(360px, 42vw, 680px);
}

.quarto-title-banner::after {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 0.65rem;
  color: rgba(255, 255, 255, 0.78);
  content: "Illustration created with OpenAI";
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.quarto-title-banner h1.title {
  max-width: 760px;
  font-size: clamp(2.25rem, 4.3vw, 4.6rem);
}

.quarto-title-banner .subtitle {
  font-size: clamp(1rem, 1.7vw, 1.35rem);
}

@media (max-width: 575.98px) {
  .quarto-title-banner {
    min-height: 330px;
    background-position: 44% center;
  }

  .quarto-title-banner::after {
    right: 0.65rem;
    bottom: 0.45rem;
    font-size: 0.65rem;
  }
}