/* Custom Styles for Royal App page */
.superHero__base .superHero__container,
.superHero__base .basicHero__imageContainer,
.superHero__base .basicHero__container,
.heroMobApp {
  height: calc(100vh - 96px);
}

.basicHero__container {
  padding: 0;
}

@media (max-width: 40.625rem) {
  .heroMobApp .headerMobApp {
    padding: 0 1.875rem;
  }

  .heroMobApp .imgContainer {
    overflow: hidden;
    height: 30rem;
  }

  .heroMobApp > .imgContainer > img {
    height: 34rem;
    transform: translateX(1rem);
  }
}

@media (min-width: 46.9375rem) {
  .heroMobApp .imgContainer {
    overflow: hidden;
    height: 43rem;
  }

  .heroMobApp > .imgContainer > img {
    height: calc(100vw + 1.875rem);
    transform: translateX(0);
  }
}

@media screen and (min-width: 65.625rem) {
  .basicHero__content {
    max-width: unset;
  }

  .heroMobApp {
    grid-template-columns: 1fr;
    align-content: center;
    overflow: hidden;
  }

  .heroMobApp .headerMobApp {
    width: 90rem;
    margin: 0 auto;
    padding: 0 1.875rem;
    grid-row: 1;
    grid-column: 1;
  }

  .heroMobApp .imgContainer {
    grid-row: 1;
    grid-column: 1;
    justify-self: end;
    height: 100vh;
  }

  .heroMobApp > .imgContainer > img {
    height: 105vh;
  }
}

.superHero__customSection {
  display: none;
}