:root {
  --columnwrap: column;
  --columnwidth: 96%;
  --top-space: 9vh;
  --bottom-space: 50px;
  --padding-left: 1rem;
  --narrow-left: 1rem;
  --flex-left: 100%;
  --flex-right: 100%;
}
@media screen and (min-width: 641px) {
  :root {
    --columnwrap: row;
    --columnwidth: 96%;
    --bottom-space: 250px;
    --padding-left: 3vw;
    --narrow-left: 1px;
    --flex-left: 40%;
    --flex-right: 60%;
  }
}

.mission-top {
  color: black;
  padding-top: calc(var(--menu-margin) / 2.5);
  padding-left: var(--menu-margin);
  padding-right: var(--menu-margin);
  padding-bottom: var(--menu-margin);

}

.mission-box {
  color: black;
  display: flex;
  justify-content: space-between;
  flex-direction: var(--columnwrap);
/*  padding-bottom: 4rem;*/
  padding-left: var(--menu-margin);
  padding-right: var(--menu-margin);
}

.mission-left {
  flex: var(--flex-left);
  font-size: calc(1.5 * var(--title-font));
  font-weight: 500;
  padding-bottom: var(--menu-margin);
}

.mission-right {
  flex: var(--flex-right);
  font-size: var(--min-text-size);
  font-weight: 300;
  margin-bottom: 100px;
  width: var(--info-width);
  line-height: var(--min-text-spacing);
}