.hero h1 {
  font-size: clamp(2.8rem, 5vw, 5.15rem);
}

/*
 * Keep long product headlines inside their grid column. The previous hero
 * gave the screenshot more space than the copy, causing words such as
 * "Semesterplanung" to extend underneath the browser preview.
 */
body.product-page .product-hero-layout {
  grid-template-columns: minmax(0, 1.06fr) minmax(430px, 0.94fr);
  gap: 56px;
}

body.product-page .product-hero-copy,
body.product-page .product-hero-media {
  min-width: 0;
}

body.product-page .product-hero-copy h1 {
  max-width: 100%;
  font-size: clamp(2.7rem, 4.4vw, 4.55rem);
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

body.product-page .product-hero-media {
  align-self: center;
}

@media (max-width: 1100px) {
  body.product-page .product-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.86fr);
    gap: 40px;
  }

  body.product-page .product-hero-copy h1 {
    font-size: clamp(2.65rem, 4.2vw, 4rem);
  }
}

@media (max-width: 900px) {
  body.product-page .product-hero-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  body.product-page .product-hero-copy {
    max-width: 760px;
  }

  body.product-page .product-hero-media {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  body.product-page .product-hero-copy h1 {
    font-size: clamp(2.45rem, 12vw, 3.45rem);
  }
}