/* Keep every editable heading segment readable inside the narrow hero card. */
@media (max-width: 575px) {
  #index .zc-hero__content {
    min-width: 0;
  }

  #index .zc-hero__title {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(2rem, 8.5vw, 3rem);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  #index .zc-hero__title > span {
    display: block;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #index .zc-hero__title-highlight {
    margin: 0.12em 0;
    padding: 0 8px;
    transform: none;
  }
}