/* ==========================================================================
 * Landing
 * ========================================================================== */

.mds-c-landing {
  display: grid;
  grid-template: 1fr / 1fr;
  grid-template-areas: 'left';
  height: 100%;
  justify-content: stretch;
  width: 100%;

  &--split {
    grid-template-areas: 'left' 'right';
    grid-template-columns: 1fr 1fr;
  }
}

.mds-c-landing__column {
  @mixin mds-m-scroll-vertical;

  background-size: cover;
  display: grid;
  grid-template-areas: 'main' 'footer';
  grid-template-rows: 1fr auto;
  justify-items: center;
}

.mds-c-landing__main {
  @mixin mds-m-scroll-vertical;

  grid-area: main;
  margin-bottom: auto;
  margin-top: auto;
  max-height: 100%;
  padding: var(--mds-d-spacing--med);
  width: 25rem;

  .mds-c-landing__column--right & {
    text-align: center;
  }
}

.mds-c-landing__logo {
  height: 5rem;
  margin-bottom: var(--mds-d-spacing--xxxl);
  max-height: 5rem;
}

.mds-c-landing__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-landing__column--right & {
    color: var(--mds-t-text-color--inverse-primary);
  }
}

.mds-c-landing__before-title {
  @mixin mds-m-heading;
  @mixin mds-m-heading--size-med;

  color: var(--mds-t-text-color--tertiary);

  .mds-c-landing__column--right & {
    color: var(--mds-t-text-color--inverse-primary);
  }
}

.mds-c-landing__footer {
  grid-area: footer;
  padding: var(--mds-d-spacing--med);
  width: 25rem;
}