/* Mise en page mobile commune aux quatre rubriques créatives.
   Les règles sont volontairement limitées au mobile afin de préserver le bureau. */
@media (max-width: 760px) {
  html body.personalized-poem-page main > section.personalized-hero,
  html body.alphabet-page main > section.alphabet-hero {
    display: flex !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 82px !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  html body.personalized-poem-page main > section.personalized-hero::after,
  html body.alphabet-page main > section.alphabet-hero::after {
    display: none !important;
    content: none !important;
  }

  html body.personalized-poem-page .personalized-hero > img.hero-image-desktop {
    display: none !important;
  }

  html body.personalized-poem-page .personalized-hero > img.hero-image-mobile,
  html body.alphabet-page .alphabet-hero > picture > img {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1800 / 945 !important;
    object-fit: contain !important;
    object-position: center !important;
    flex: none !important;
  }

  html body.alphabet-page .alphabet-hero > picture {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1800 / 945 !important;
    flex: none !important;
  }

  html body.personalized-poem-page .personalized-hero > .personalized-hero-copy,
  html body.alphabet-page .alphabet-hero > .alphabet-hero-copy {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 25px 22px 38px !important;
    transform: none !important;
  }
}