/* ==========================================================================
 * Splash
 * ========================================================================== */

.mds-c-splash {
  display: grid;
  grid-template: 1fr / 1fr auto;
  grid-template-areas:
    'main'
    'footer';
  height: 100%;
  justify-content: center;
  justify-items: center;
  width: 100%;

  &--landing {
    @media screen and (min-width: 32rem) {
      grid-template-columns: 32rem;
    }
  }

  &--has-background {
    @media screen and (min-width: 64rem) {
      grid-template-areas:
        'main background'
        'footer background';
      grid-template-columns: 32rem 1fr;
    }
  }
}

.mds-c-splash__main {
  grid-area: main;
  justify-self: stretch;
  margin-bottom: auto;
  margin-top: auto;
  max-height: 100%;
  padding: var(--mds-d-spacing--med);

  @media screen and (min-width: 64rem) {
    padding: var(--mds-d-spacing--xxxl);
  }

  &--scroll {
    @mixin mds-m-scroll-vertical;
  }
}

.mds-c-splash__background {
  display: none;

  @media screen and (min-width: 64rem) {
    background-image: url('https://edge.inmotionnow.com/images/login-page/background-2019-12-06.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    grid-area: background;
    justify-self: stretch;
  }
}

.mds-c-splash__logo {
  display: block;
  height: 6rem;
  margin-bottom: var(--mds-d-spacing--xxxl);
  max-height: 6rem;
}

.mds-c-splash__title {
  @mixin mds-m-heading;
  @mixin mds-m-heading--size-xxl;

  color: var(--mds-t-text-color--primary);
  margin-bottom: var(--mds-d-spacing--xl);
}

.mds-c-splash__footer {
  grid-area: footer;
  justify-self: stretch;
  padding: var(--mds-d-spacing--med);

  @media screen and (min-width: 64rem) {
    padding: var(--mds-d-spacing--xxxl);
  }
}