.landing__body--hero {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100vh;
  width: 100%;
  background: var(--primary);
}

.hero__section {
  height: calc(100vh - 8em);
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}

.hero__section .title {
  color: var(--white);
}

.hero__section .subtitle {
  color: var(--bg-white)
}

.hero__section .button.open {
  color: var(--white);
  outline: 1px solid var(--white);
}

.hero__section .button.open:hover {
  color: var(--black);
  outline: 1px solid var(--accent);
}

.panel__image--hero {
    width: 45em !important;
    max-width: unset;
    position: relative;
    left: -8em;
    bottom: -1em;
}

.app__button svg {
  height: 12em;
  width: 12em;
}

.landing__body--banner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 20em;
  width: 100%;
  background: var(--primary);
}

.banner__section {
  height: 12em;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}

.banner__section .title {
  font-family: var(--ft-primary);
  color: var(--white);
  text-align: center;
}