/* Keep the heading and its contrast backdrop between the banner characters. */
.workspace[data-view=library] .forest-hero h1 {
  box-sizing: border-box;
  inset: 9% auto auto 50%;
  transform: translateX(-50%);
  width: fit-content;
  max-width: min(52%, 720px);
  margin: 0;
  padding: 7px 12px;
  font-size: clamp(16px, 2.6vw, 36px);
  line-height: 1.3;
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: anywhere;
  background: #122c4bb3;
  border-radius: 12px;
}

@media (max-width: 760px) {
  .workspace[data-view=library] .forest-hero h1 {
    inset: 8% auto auto 50%;
    max-width: 54%;
    padding: 4px 6px;
    font-size: clamp(14px, 3.5vw, 24px);
  }
}