/* Keep the login scene aligned to the shared banner without an outer frame. */
body[data-route="account"] .wrap > .hero::after,
body[data-route="account"] .wrap > .hero + .main::before,
body[data-route="account"] .wrap > .hero + .main::after {
  content: none;
}

body[data-route="account"] .wrap > .hero + .main {
  background-color: #e3f1fa;
  background-image: url('../assets/grand-mu-menu-continuation-aligned-v5.jpg');
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

body[data-route="account"] .wrap #main-content {
  padding: 0;
  border: 0;
  border-image: none;
  background: none;
  box-shadow: none;
}

body[data-route="account"] .wrap #main-content::before,
body[data-route="account"] .user-panel-inline::after {
  content: none;
}

body[data-route="account"] .user-panel-inline,
body[data-route="account"] .user-panel-inline iframe {
  background: transparent;
}

/* The iframe starts at the same edge and width as the scene behind it. */
.login-gate {
  background-color: #e3f1fa;
  background-image: url('/assets/grand-mu-menu-continuation-aligned-v5.jpg');
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

@media (max-width: 720px) {
  body[data-route="account"] .wrap > .hero + .main,
  .login-gate {
    background-size: 113.5% auto;
  }
}