@import "./properties.css";
@import "../media.css";

.container {
  width: 100%;
  height: 100%;
}

.column {
  font-size: var(--landing-column-font-size);
  position: relative;
}

.secondary.column,
.primary.column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.secondary,
.primary {
  min-height: 100vh;
}

.secondary {
  order: 1;
}

.primary {
  order: 2;
}

.dark {

  &.primary {
    background-color: var(--landing-dark-primary-background-color);
  }

  &.secondary {
    background-color: var(--landing-dark-secondary-background-color);
  }

  &.primary,
  &.secondary {
    box-shadow: var(--landing-box-shadow);
    color: var(--landing-dark-color);
  }

  & h1 {
    color: var(--landing-dark-title-color);
  }
}

.light {

  &.primary {
    background-color: var(--landing-light-primary-background-color);
  }

  &.secondary {
    background-color: var(--landing-light-secondary-background-color);
  }

  &.primary,
  &.secondary {
    box-shadow: var(--landing-box-shadow);
    color: var(--landing-light-color);
  }

  & h1 {
    color: var(--landing-light-title-color);
  }
}

.grid {
  height: 100%;
}

.row {
  min-height: 100%;
}

@media (--media-palm) {

  .primary {
    order: 1;
  }

  .secondary {
    order: 2;
  }
}