.root {
  margin: rfs(100px) 0;
  position: relative;

  &:before {
    content: '';
    background: linear-gradient(45deg, #e9fcff 30%, #fdf2ed 60%);
    clip-path: var(--clip-path);
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    bottom: 0;
    z-index: -1;

    @media (width > 900px) {
      top: 0;
    }
  }
}

.rootInner {
  @media (width > 900px) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.intro,
.picker {
  flex: 1;
}

.intro {
  margin: 0 0 rfs(80px);

  @media (width > 900px) {
    margin: 120px 70px 100px 0;
  }
}

.introSub {
  font-weight: bold;
  margin-bottom: 30px;
}

.introTitle {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: bold;
  line-height: 1;
  font-size: rfs(60px);
  margin-bottom: rfs(40px);
}

.picker {
  box-shadow: var(--box-shadow);
  border-radius: 5px;
  background: white;
}

.personas {
  padding: rfs(40px);
  border-bottom: 1px solid var(--border-color);
  &:last-child {
    border-bottom-width: 0;
  }
}

.personasTitle {
  font-weight: bold;
  line-height: 1;
  margin: 0;
  font-size: rfs(25px);
  margin-bottom: 10px;
}

.personasBody {
  font-size: 0.9em;
}

.kicker {
  font-size: rfs(20px);
  margin-bottom: rfs(30px);
  font-weight: bold;
  color: var(--extra-light-body-color);
  text-transform: uppercase;
}
