message: Add second slide for OnboardingModal
diff: @@ -13,6 +13,13 @@ $button-primary: #067997;
  color: #fff;
  }
  +@mixin slide-inner {
  + position: absolute;
  + width: 100%;
  + height: 100%;
  + padding: 0 2rem;
  +}
  +
  .ProgressDots {
  display: flex;
  align-items: center;
  @@ -71,18 +78,60 @@ $button-primary: #067997;
  .FirstSlide {
  @include perfectly-centered;
  + @include slide-inner;
  - position: absolute;
  + button {
  + margin-top: 1.33rem;
  + }
  +
  + @media (min-width: 820px) {
  + padding: 0 8rem;
  + }
  +}
  +
  +.SecondSlide {
  + @include perfectly-centered;
  + @include slide-inner;
  +
  + display: flex;
  + flex-direction: column;
  +
  + &-content {
  + display: flex;
  + flex: 1;
  + flex-direction: column;
  + align-items: center;
  + justify-content: center;
  width: 100%;
  - height: 100%;
  - padding: 0 2rem;
  +
  + section {
  + margin: 1rem;
  + }
  button {
  margin-top: 1.33rem;
  }
  + @media (min-width: 512px) {
  + flex-direction: row;
  + justify-content: space-evenly;
  + padding: 0;
  + h1 {
  + font-size: 16px;
  + }
  + p {
  + font-size: 12px;
  + }
  + }
  @media (min-width: 820px) {
  - padding: 0 8rem;
  + h1 {
  + font-size: 30px;
  + }
  + p {
  + font-size: 18px;
  + line-height: 33px;
  + }
  + }
  }
  }
  @@ -92,6 +141,21 @@ $button-primary: #067997;
  border-radius: 2px;
  background: $button-primary;
  color: #fff;
  +
  + &.first {
  + visibility: hidden;
  + }
  + &.second {
  + visibility: visible;
  + }
  + @media (min-width: 512px) {
  + &.first {
  + visibility: visible;
  + }
  + &.second {
  + visibility: hidden;
  + }
  + }
  }
  .OnboardingModal {
  