/* Existing hub pages, Stories and Shop: the mobile introduction follows its container.
   One padding layer reserves space for the existing wrapped navigation.
   Desktop styling is owned by the existing page and global hero styles. */
@media (max-width: 900px) {
  section#top.em-hub-hero,
  section.em-hub-hero--direct {
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 !important;
    align-items: flex-start !important;
  }

  section#top.em-hub-hero > .hero-inner,
  section.em-hub-hero--direct > .em-shop-hero__content {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 264px 24px 80px !important;
  }

  section#top.em-hub-hero > .hero-inner > .hero-copy {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 680px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    translate: none !important;
    transform: none !important;
  }
}

@media (max-width: 360px) {
  section#top.em-hub-hero > .hero-inner,
  section.em-hub-hero--direct > .em-shop-hero__content {
    padding-top: 304px !important;
  }
}